TL;DR: In this article, you'll learn how to secure a basic Gatsby static site with Auth0. The finished code for this tutorial is at the gatsby-auth0 repository. I have a confession. Despite my public love of Angular, I have recently also fallen in love with the static site generator GatsbyJS. I believe by the transitive property that this means that I've fallen in love with React, too, since Gatsby is built around React (but don't tell anyone). Gatsby just feeds two parts of my soul simultaneously: the programmer nerd side and the writer side. It's not just me, either. Gatsby has been growing in popularity due to how beautifully it merges technologies like GraphQL and MDX with concepts like progressive web apps and server-side rendering. There's even an easy-to-use command line interface (the Gatsby CLI) to make developing, building, and deploying your static site virtually painless. To me, it is the most intuitive JAM stack (JavaScript + APIs + Markup) solution out there. This combination of power and simplicity has inspired people like Dan Abramov, Joel Hooks, Marcy Sutton, Emma Wedekind, and many more to build their personal sites with Gatsby. ".@GatsbyJS is a powerful static site generator combining React, GraphQL, and many other modern web technologies." Tweet This As wonderful as this is, in many static sites there is still the need for authentication. Stores, member areas, or admin dashboards can all be built as static sites and all require either a protected route or a persisted user profile. Luckily, Auth0 is here to help. In this article, I'm going to take a slightly different path than our typical authentication tutorial. Ordinarily, I would have you build a sample application that includes styling and a source of data. Because Gatsby orchestrates things like GraphQL, CSS-in-JS, API data, and much more, it's incredibly easy to get lost in the weeds in a tutorial and lose track of what is specific to Gatsby. For that reason, I'm going to have you build the absolute simplest (and, well, ugliest) sample application possible so you can focus solely on learning how to set up authentication in that app. I won't be covering any data sources, GraphQL, or styling strategies. Keeping this tutorial super simple means that this strategy will work for you whether you're building a blog, a store, or anything else your heart desires. One more thing. If you'd like to watch a video of this approach, you can watch Auth0's Ado Kukic pair with Gatsby's Jason Lengstorf in this recorded stream about adding Auth0 to Gatsby. I'm using the same approach in this tutorial with a few details cleaned up. Prerequisites To go through this tutorial, you will need Node.js and NPM installed. You should download and install them before continuing. You'll also need some basic knowledge of React. You only need to know the basic scaffolding of components and JSX to follow along, but it will be difficult if you're a total beginner. If that's you, you can read our article on building and securing your first React app before continuing. Gatsby Basics To get started with Gatsby, you'll first need to install the Gatsby CLI globally on your machine. You can do that by running the command: npm install -g gatsby-cli The Gatsby CLI has some built in commands like develop to run a development server, build to generate a production build, and serve to serve the production build. There are lots of other options and commands that you can check out in the Gatsby CLI docs. One cool feature of the CLI is the ability to use a starter as the template for a new project. You can use either an official Gatsby starter or any other Gatsby repository. For this tutorial, you'll use gatsby-starter-hello-world by running the following command: gatsby new gatsby-auth0 gatsbyjs/gatsby-starter-hello-world Note that the first argument (gatsby-auth0) is just the name of the new project. You can call it whatever you'd like. Gatsby will automatically run npm install for you, so once that's done, open the project in your preferred editor. You'll see the simplest possible Gatsby project, which includes one file inside of the src/pages/ folder called index.js. Open that file and replace it with the following: // ./src/pages/index.js import React from "react" import { Link } from "gatsby" export default () => (

Hello Gatsby!

Go to your account

) You can see that this is a super simple React component written in JSX. It imports Gatsby's Link function to navigate to an account route. You'll create that route in the next section. For now, run the command gatsby develop in your terminal and navigate to localhost:8000. You should see "Hello Gatsby!" with a link to go to the account page. How to Create a Protected Account Route You've now created your first static site with Gatsby — congratulations! You're ready to create an account route that you'll protect with Auth0 in just a bit. To start, create a new file called account.js in the src/pages/ folder and paste in the following code: // src/pages/account.js import React from "react" const Account = () => (