Skip to main content

Module: react-auth0

React login component for use with Auth0.

Interfaces

Functions

ConvexProviderWithAuth0

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

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

Using this component requires

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

NameType
propsPropsWithChildren<{ 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>