Module: react-auth0

React login component for use with Auth0.

Interfaces

• AuthInfo

Functions

ConvexProviderWithAuth0

▸ ConvexProviderWithAuth0(props, context?): null | ReactElement<any, any>

A wrapper React component which provides a ConvexReactClient authenticated with Auth0.

Using this component requires

• installing the Auth0 React SDK,
• setting up an Auth0 app, and
• registering that app with npx convex auth add.

function AppWrapper() {
  return (
    <ConvexProviderWithAuth0 client={convex} authInfo={authInfo}>
      <App/>
    </ConvexProviderWithAuth0>
  );
}

Using this component instead of ConvexProvider makes the useAuth0 hook available in addition to useQuery, useMutation, and 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.

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>

Parameters

Name	Type
props	PropsWithChildren<{ children: ReactNode ; client: IConvexReactClient ; authInfo: AuthInfo ; loading?: ReactElement<any, string | JSXElementConstructor<any>> ; loggedOut?: ReactElement<any, string | JSXElementConstructor<any>> }>
context?	any

Returns

null | ReactElement<any, any>