Skip to main content

Building a Site with Authentication

With Gatsby, you are able to create restricted areas in your app. For that, you must use the concept of client-only routes.

Using the @reach/router library, which comes installed with Gatsby, you can control which component will be loaded when a certain route is called, and check for the authentication state before serving the content.


You must know how to set up a basic Gatsby project. If you need to, check the main tutorial.

Setting the authentication workflow

To create a common authentication workflow, you can usually follow these steps:

Real-world example: Gatsby store

The Gatsby store uses this approach when handling a private route:

// import ...
const PrivateRoute = ({ component: Component, }) => {
if (
!isAuthenticated() &&
isBrowser &&
window.location.pathname !== `/login`
) {
// If we’re not logged in, redirect to the home page.
return null
return (
<Component {} />

Further reading

If you want more information about authenticated areas with Gatsby, this (non-exhaustive list) may help:

Edit this page on GitHub