UNPKG

convex

Version:

Client for the Convex Cloud

82 lines (77 loc) 2.16 kB
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 { }