Welcome to your new Gatsby site.
Now go build something great.
How to use useAuth
useAuth is designed to be quick to setup. You'll need an Auth0 account with an app domain and client id.
1. Install the hook
Downloads from npm, adds to your package.json, etc. You can use
npm as well.
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
useAuth is built so it doesn't break server-side rendering. ✌️
But of course server-side "you" will always be logged out.
<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
useAuth's Auth0 client uses these params:
clientID come from your props.
redirectUri is set to use the
auth0_callback page on the current domain. Auth0 redirects here after users login so you can set cookies and stuff.
useAuth will 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
3. Create the callback page
Auth0 and most other authentication providers use OAuth. That requires redirecting your user to their login form. After login, the provider redirects the user back to your app.
Any way of creating React pages should work, here's what I use for Gatsby.
The goal is to load a page, briefly show some text, and run the
handleAuthentication method from
useAuth on page load.
That method will create a cookie in local storage with your user's information and redirect back to homepage. Redirecting to other post-login pages currently isn't supported but is a good idea now that I thought of it 🤔
PS: Make sure you add
<domain>/auth0_callback as a valid callback URL in your Auth0 config
4. Enjoy useAuth
You're ready to use
useAuth for authentication in your React app.
Here's a login button for example:
isAuthenticated is a method that checks if the user's cookie is still valid.
logout trigger their respective actions.
You can even say hello to your users
isAuthenticated then use the user object. Simple as that.