Securing Gatsby with Auth0
Published: 2022-07-13 09:32:49

### Learn how to set up Auth0 for identity management in a Gatsby static site.

### <br>

**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-sample-app` repository](https://github.com/auth0-blog/gatsby-auth0-sample-app).

Gatsby beautifully merges technologies like [GraphQL](https://graphql.org/) and [MDX](https://github.com/mdx-js/mdx) with concepts like [progressive web apps](https://developers.google.com/web/progressive-web-apps/) and [server-side rendering](https://reactjs.org/docs/react-dom-server.html). 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](https://jamstack.org/) (JavaScript + APIs + Markup) solution out there.

<include src= "TweetQuote" quoteText= "@GatsbyJS is a powerful static site generator combining React, GraphQL, and many other modern web technologies."/>

As wonderful as this is, many static sites still need 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.

This article will 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.

## Prerequisites

To go through this tutorial, you will need Node.js 16 and NPM installed. You should [download and install them](https://nodejs.org/en/download/) 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](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-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:

```bash
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 many other options and commands that you can check out in the [Gatsby CLI docs](https://www.gatsbyjs.org/docs/gatsby-cli/).

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:

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

```jsx
// ./src/pages/index.js
import React from "react";
import { Link } from "gatsby";

export default () => (
  <div>
   <p>Hello Gatsby!</p>
   <Link to="/account">Go to your account</Link>
 </div>
);
```

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`](http://localhost:8000). You should see "Hello Gatsby!" with a link to go to the account page.


[Read more...](https://auth0.com/blog/securing-gatsby-with-auth0/?utm_source=content_synd&utm_medium=sc&utm_campaign=security)