useAuth uses an AuthProvider component to configure the Auth0 client and share state between components. It's using React context with a reducer behind the scenes, but that's an implementation detail.
I recommend adding this around your root component. In Gatsby that's done in gatsby-browser.js and gatsby-ssr.js. Yes useAuth is built so it doesn't break server-side rendering. ✌️
But of course server-side "you" will always be logged out.
import React from "react"
import { navigate } from "gatsby"
import { AuthProvider } from "react-use-auth"
export const wrapRootElement = ({ element }) => (
<AuthProvider
navigate={navigate}
auth0_domain="useauth.auth0.com"
auth0_client_id="GjWNFNOHqlino7lQNjBwEywalaYtbIzh"
>
{element}
</AuthProvider>
)
<AuthProvider>
creates a context, sets up a state reducer, initializes an Auth0 client and so on. Everything you need for authentication to work in your whole app :)
The API takes a couple config options:
navigate
– your navigation function, used for redirects. I've tested with Gatsby, but anything should work
auth0_domain
– from your Auth0 app
auth0_client_id
– from your Auth0 app
auth0_params
– an object that lets you overwrite any of the default Auth0 client parameters
PS: even though Auth doesn't do anything server-side, useAuth will throw errors during build, if its context doesn't exist
By default useAuth
's Auth0 client uses these params:
const params = {
domain: auth0_domain,
clientID: auth0_client_id,
redirectUri: `${callback_domain}/auth0_callback`,
audience: `https://${auth0_domain}/api/v2/`,
responseType: "token id_token",
scope: "openid profile email"
}
domain
and clientID
come from your props.
redirectUri
is set to use the auth0_callbackpage
on the current domain. Auth0 redirects here after users login so you can set cookies and stuff. useAuthwill handle this for you ✌️
audience
is set to use api/v2. I know this is necessary but honestly have been copypasting it through several of my projects.
responseType
same here. I copy paste this from old projects so I figured it's a good default.
scope
you need openid for social logins and to be able to fetch user profiles after authentication. Profile and Email too. You can add more via the auth0_params
override.