2. Set up AuthProvider

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

Default Auth0 params

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.