Gatsby + Server-side Auth0 on H

by karlhorky


Gatsby + Server-side Auth0 on Heroku

A starter template for server-side authentication of Gatsby static-site content with Node.js and Express using Auth0 (deployable to Heroku).

This does not use any client-only routes in Gatsby.

Based off of Auth0 + Node.js on Heroku.

Illustration of problem area for

Set up Auth0

Setup for Auth0 is fast and easy:

  1. Sign up for a free account at Auth0, go to the Dashboard and hit the Create button: Auth0 Dashboard
  2. Create an application with the "Regular Web Application" template: Create Regular Web Application
  3. Go to the Settings tab and make a note of the Domain, Client ID and Client Secret. This information will be used for the Heroku setup. Settings tab for application

Set up Heroku

Create a Heroku account at Heroku - Sign up, and then click on this button:


This will set up a new application on your Heroku account using this repo as a template.

Choose your own app name, and use it in the AUTH0_CALLBACK_URL field.

During setup you'll also be asked for some other environment variables, which is the information that we noted earlier in the Auth0 setup:

Fill in Heroku environment variables

After Heroku is set up, return to the Auth0 Settings page and enter the URL in the Allowed urls (replace YOUR-APP with the App name that you chose):

  1. Enter your Allowed Callback URLs:
  2. Enter your Allowed Logout URLs:

It should appear like this:

Auth0 Callback URLs Configuration Auth0 Save Changes

Now everything should be set up! If you visit the application URL in a browser, Auth0 will ask for you to log in to the application:


After logging in, the Gatsby default starter homepage will be displayed:

App homepage

If there are any messages passed through the query string in the URL by Auth0, they will be displayed:

Auth0 query string messages

Finally, there is a rudimentary (regular expression-based!) access control for Gatsby static pages in the Express server.

If the user tries to access any assets from the Gatsby website src/pages/page-2.mdx page, these will be denied:

Access Denied on page 2

This access control serves as a proof of concept - hopefully new tools will become available for Gatsby to improve this workflow:

Log out of the app by visiting the /logout route.

Run the Server Locally

If you want to run the server locally, you can do this as follows:

Install the dependencies.

npm install

Copy the contents of .env.example to a new file called .env and replace the values for AUTH0_DOMAIN, AUTH0_CLIENT_ID, and AUTH0_CLIENT_SECRET with your Auth0 information (from the Settings page). Replace EXPRESS_SESSION_SECRET with a secret to be used for the session.

# Copy configuration to replace with your own information
cp .env.example .env

Run the app.

npm start

The app will be served at localhost:3000.