## 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.

```jsx
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:

```jsx
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.