convex
Version:
Client for the Convex Cloud
82 lines (77 loc) • 2.16 kB
TypeScript
import { default as React_2 } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
/**
* Type representing authentication configuration, from the authInfo array
* of a convex.json config file.
*
* @public
*/
export declare interface AuthInfo {
domain: string;
applicationID: string;
}
/**
* A wrapper React component which provides a {@link react.ConvexReactClient}
* authenticated with Auth0.
*
* Using this component requires
* 1. Installing the Auth0 React SDK with `npm install @auth0/auth0-react`
* 2. [Setting up an Auth0 app](https://docs.convex.dev/using/auth#auth0), and
* 3. [Registering that app](https://docs.convex.dev/using/auth#configuring-convex) with `npx convex auth add`.
*
*
* ```tsx
* function AppWrapper() {
* return (
* <ConvexProviderWithAuth0 client={convex} authInfo={authInfo}>
* <App/>
* </ConvexProviderWithAuth0>
* );
* }
* ```
*
* Using this component instead of {@link react.ConvexProvider}
* makes the [useAuth0](https://auth0.com/docs/libraries/auth0-react)
* hook available.
*
* If a user is not logged in, this component renders the loading prop
* with a fallback of a simple "Log in" button if that prop is not passed in.
* To write your own login component, use the
* `loginWithRedirect` property of the return value of `useAuth0()`
* in the click handler of your login button.
*
* ```tsx
* function YourLoggedOutComponent() {
* const { loginWithRedirect } = useAuth0();
* return (
* <div>
* <h1>Please log in :)</h1>
* <button onClick={loginWithRedirect}>Log in</button>
* </div>
* );
* }
*
* <ConvexProviderWithAuth0
* client={convex}
* authInfo={authInfo}
* loggedOut={<YourLoggedOutComponent/>}
* >
* <App/>
* </ConvexProviderWithAuth0>
* ```
*
* @public
*/
export declare const ConvexProviderWithAuth0: React_2.FC<{
children: ReactNode;
client: IConvexReactClient;
authInfo: AuthInfo;
loading?: ReactElement;
loggedOut?: ReactElement;
}>;
declare type IConvexReactClient = {
setAuth(s: string): void;
clearAuth(): void;
};
export { }