Making a Site with User Authentication

Sometimes, you need to create a site with gated content, restricted to only authenticated users. Using Gatsby, you may achieve this using the concept of client-only routes, to define which pages a user can view only after logging in.

Prerequisites

You should have already configured your environment to be able to use the gatsby-cli. A good starting point is the main tutorial.

Security notice

In production, you should use a tested and robust solution to handle the authentication. Auth0, Firebase, and Passport.js are good examples. This tutorial will only cover the authentication workflow, but you should take the security of your app as seriously as possible.

Building your Gatsby app

Start by creating a new Gatsby project using the barebones hello-world starter:

Create a new component to hold the links. For now, it will act as a placeholder:

And create the layout component that will wrap all pages and display navigation bar:

Lastly, change the index page to use layout component:

Authentication service

For this tutorial you will use a hardcoded user/password. Create the folder src/services and add the following content to the file auth.js:

The guide on adding authentication contains more information about the flow for connecting Gatsby to an external service.

Creating client-only routes

At the beginning of this tutorial, you created a “hello world” Gatsby site, which includes the @reach/router library. Now, using the @reach/router library, you can create routes available only to logged-in users. This library is used by Gatsby under the hood, so you don’t even have to install it.

First, create gatsby-node.js in root directory of your project. You will define that any route that starts with /app/ is part of your restricted content and the page will be created on demand:

Note: You can also use the File System Route API to create client-only routes.

Now, you must create a generic page that will have the task to generate the restricted content:

Next, add the components regarding those new routes. The profile component to show the user data:

The login component will handle - as you may have guessed - the login process:

Though the routing is working now, you still can access all routes without restriction.

Controlling private routes

To check if a user can access the content, you can wrap the restricted content inside a PrivateRoute component:

And now you can edit your Router to use the PrivateRoute component:

Refactoring to use new routes and user data

With the client-only routes in place, you must now refactor some files to account for the user data available.

The navigation bar will show the username and logout option to registered users:

The index page will suggest to log in or check the profile accordingly:

And the profile will show the user data:

You should now have a complete authentication workflow, functioning with both login and a user-restricted area!