Making a Site with User Authentication

    You should have already configured your environment to be able to use the . 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, , 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.

    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 and add the following content to the file auth.js:

    At the beginning of this tutorial, you created a “hello world” Gatsby site, which includes the 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 is part of your restricted content and the page will be created on demand:

    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

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

    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 user name and logout option to registered users:

    The index page will suggest to login 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!

    Further reading

    If you want to learn more about using production-ready auth solutions, these links may help: