Provision an Auth0 app and add authentication to an app with a custom Gatsby plugin

Kyle Gill: [0:00] Login the Auth0. First, click Create application. Give your app a name. Select single-page web applications and click Create. Copy the Auth0 domain and client id in the Settings tab into a .env file.

[0:15] I'm using .env.development, so the environment variables will be used when I develop the site locally. Copy the values for domain and client ID into new variables. Mine are called Gatsby Auth0 domain and Gatsby Auth0 client ID.

[0:30] Make sure to add localhost port 8000 to your Auth0 apps. Allowed domain settings to make sure that you can login while in development. You need to edit for Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins. You'll also need to add any domain you deploy your web app to here.

[0:49] That sets up the Auth0 side of things. Now, to add support in Gatsby, we'll put the logic for Auth0 into our own custom plugin. We could find an existing plugin, but we can implement our own in less than 20 lines of code.

[1:02] Create a new folder at the root of your site called plugins. This is where local Gatsby's plugins can be created, rather than installed from NPM. Create another folder inside it called gatsby-plugin-auth0.

[1:13] Create an empty index.js file and a package.JSON file with empty brackets. These are necessary files for any plugin. That install the @auth0/auth0-react package, which includes a provider to wrap React apps with Auth0 functionality.

[1:31] Create a gatsby-browser.js file in your local Auth0 plugins folder. This gatsby-browser is just like the gatsby-browser file in the root of your site, but contains the logic just for this plugin. This is key to how plugins can be combined to make Gatsby site so powerful, because each gatsby-browser file will be run.

[1:48] Import React, the Auth0Provider from auth0-react and navigate from Gatsby. Export the wrapRootElement function similar to how we did to wrap the whole site in the layout component.

[2:01] You can also access options in this function that were set for a plugin in the gatsby-config. Include them and pass them into the domain and client ID props of the Auth0Provider.

[2:15] Set the redirect URI prop to window.location.origin in the onDirect callback prop, to a new function that will take the app state and navigate to a given target URL with Gatsby's navigate function, if there's a target URL to navigate to.

[2:36] All that's left is adding your local plugin to your gatsby-config and giving it the domain and client ID options, which you've already copied into your .env file.

[2:50] Also, be sure to add a piece of code before the module.exports here to configure the .env package, include with Gatsby, to make sure your environment variables are available. This makes login and logout functions available throughout my app with the Auth0 hook.

[3:07] Go to the header component and import useAuth0 from @auth0/auth0-react. Then, call the hook and de-structure the login with redirect. Logout is authenticated and user values returned by it.

[3:26] We're going to add these functions to the Signup button and toggle it to a profile drop down when a user is authenticated. We can also access user data on the user variable and display things like an email.

[3:51] When I restart the site, and I try clicking on the Signup button, I'm redirected to Auth0 where I can log in or sign up. When I complete the process, I'm taken back to the site where I can see my email displayed. This completes adding authentication. The next step is authorization and adding these users to the server backend.