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.
Setup for Auth0 is fast and easy:
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
During setup you'll also be asked for some other environment variables, which is the information that we noted earlier in the Auth0 setup:
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):
It should appear like this:
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:
If there are any messages passed through the query string in the URL by Auth0, they will be displayed:
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:
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
If you want to run the server locally, you can do this as follows:
Install the dependencies.
Copy the contents of
.env.example to a new file called
.env and replace the values for
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.
The app will be served at