Authenticating Gatsby Sites with Auth0

Instructor: [0:00] Using the Gatsby CLI, I'm going to create a new Gatsby site from scratch. If you already have a Gatsby site up and running, all the steps I'm going to be going over here should work just fine in yours.

[0:11] After we've installed all the packages, I'm going to cd into the site and then run Gatsby Develop to start my website so we can see what we're working with. As you can see, it's just the Gatsby default starter page. We're going to be using Gatsby Recipes to do most of the work of setting up our Auth0 code for us.

[0:29] Going back to our terminal, we can run Gatsby Recipes. It's going to pull up all of the officially published recipes within Gatsby. If there's an official Auth0 one there already, then go ahead and use that one. If not, then we can use the one that I put together here. I'll post this note in the video notes below if you want to copy this and follow along.

[0:49] With the recipe on hand and ready to go, all we need to do is run Gatsby Recipes and then the raw MDX of this Gist. Here we'll walk through some steps that tells us all of the changes that are going to be made to our Gatsby site -- stuff like adding NPM packages, routes, new pages, and custom code. All we need to do is press Enter in the terminal, and the recipe does all the rest.

[1:16] Let's take a quick look at the code that will get added when using an Auth0 recipe. You'll notice that we've created a local plugin instead of our plugins folder off the root called Gatsby Plugin Auth0.

[1:31] That's importing and exporting out our custom Auth0 hook that we'll talk about here in a minute, as well as an auth.js file that's doing all the boilerplate needed to get up and running with Auth0, an empty package.json. There's a new gatsby-browser.js file, which, again, we'll talk about here in a moment.

[1:51] On the root level, we've modified the gatsby-config, added a NPM package to our package.json, and then added a new example account page that we can work with logging in and logging out on.

[2:03] Let's look back at the auth.js file. This is where the heavy lifting of setting up Auth0 went. This file is using React context to abstract away all of the implementation details of our Auth0 client. Down at the bottom of the page, you can see we're passing to this value prop an object with a bunch of values.

[2:21] These are Booleans, objects, and functions. For example, isAuthenticated is a bool that will confirm if a user is logged in. The user value is an object that has some info about who is authenticated. Log out. Log in with pop-up, and log in with redirect are functions from the Authorize TK that we can use to authenticate with.

[2:40] All of this is put into our provider. Back at the top, we see this custom React hook that's created that accepts this context. When we want to work with the Auth0 values specified in the provider, we just need to import this hook and that file.

[2:53] In the Gatsby browser page, we wrap our context around the entire app. This is required for our custom hook to work anywhere. Now, notice that we have to import options being used here. These are required to register which app this is in your Auth0 account, so we need to head over to Auth0 to either sign in or create a new account.

[3:13] Now, if you don't have an Auth0 account, go ahead and sign up here. Once you've signed in, then click on the applications tab on the left. Next, create a new application, giving it a good name, and then choosing the single page Web app option.

[3:26] Once you've created this, you'll need to click on the settings tab. Now, the two values we need for our Gatsby app is the domain and the client ID. Go ahead and copy those, and past them in the gatsby-config file on the root within the Gatsby app.

[3:47] Now, back in your Auth0 dashboard, we need to add our app's localhost domain to three places. The Allowed Callback URLs for Authorize URLs we can route to after logging in. The same for Allowed Logout URLs and Allowed Web Origins. This is so, after authenticating, we can refresh the page and keep any current sessions logged in.

[4:08] Make sure to save your changes. Then, back in the terminal, let's run Gatsby Develop again. Once this finishes, we can load their page. Let's navigate to the example account page and click Log In. You can see that we get a pop-up login option here. We can sign in if you've already done this before or create a new account.

[4:26] When creating a new account, you have to agree to some permissions. If you get an error anywhere in this process, double-check that you've added all the right values to your Auth0 account. After logging in, the example account page will show you the approved user object values of the authenticated user.