Gatsby + Server-side Auth0 on H

by karlhorky

GitHub Readme.md

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 https://github.com/gatsbyjs/gatsby/issues/20745.

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:

Deploy

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:
    http://localhost:3000/callback,https://YOUR-APP.herokuapp.com/callback
    
  2. Enter your Allowed Logout URLs:
    http://localhost:3000,https://YOUR-APP.herokuapp.com
    

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:

Auth0

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:

https://github.com/gatsbyjs/gatsby/issues/20745

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.