convex/dist/esm/react-auth0/ConvexProviderWithAuth0.d.ts

Client for the Convex Cloud

import React, { ReactNode, ReactElement } from "react";
/**
 * Type representing authentication configuration, from the authInfo array
 * of a convex.json config file.
 *
 * @public
 */
export interface AuthInfo {
    domain: string;
    applicationID: string;
}
declare type IConvexReactClient = {
    setAuth(s: string): void;
    clearAuth(): void;
};
/**
 * A wrapper React component which provides a ConvexReactClient authenticated
 * with Auth0.
 *
 * Using this component requires
 * * installing the [Auth0 React SDK](/using/users-and-auth#install-the-auth0-react-sdk),
 * * [setting up an Auth0 app](/using/users-and-auth#getting-started-with-auth0), and
 * * [registering that app](/using/users-and-auth#setting-up-convex-with-your-chosen-identity-provider) with `npx convex auth add`.
 *
 *
 * ```tsx
 * function AppWrapper() {
 *   return (
 *     <ConvexProviderWithAuth0 client={convex} authInfo={authInfo}>
 *       <App/>
 *     </ConvexProviderWithAuth0>
 *   );
 * }
 * ```
 *
 * Using this component instead of [ConvexProvider](/api/modules/react#convexprovider)
 * makes the [useAuth0](https://auth0.com/docs/libraries/auth0-react)
 * hook available in addition to [useQuery](/generated-api/react#usequery),
 * [useMutation](/generated-api/react#usemutation), and
 * [useConvex](/generated-api/react#useconvex).
 *
 * 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.FC<{
    children: ReactNode;
    client: IConvexReactClient;
    authInfo: AuthInfo;
    loading?: ReactElement;
    loggedOut?: ReactElement;
}>;
export {};
//# sourceMappingURL=ConvexProviderWithAuth0.d.ts.map