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
- Installing the Auth0 React SDK with
npm install @auth0/auth0-react
- 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.
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
>