Authentication using client-only routes within Gatsby
While not common practice, we can use routers inside Gatsby pages too. Normally, Gatsby abstracts all the routing away so that we don't have to worry about it, but authentication is one example where we need to bring the control over routing back into our hands. We will be creating what is known as client-only routes. To demonstrate this within our project, we are going to create a page at /private. As its name might suggest, this path contains a private page that we will lock behind authentication. Let's get started:
Important Note
This example will conflict with the Site-wide authentication using context within Gatsby section's code. It's best to choose one of these two methods to implement instead of trying to combine them.
- Create a new folder inside
srccalledcontext. - Create a new file called
auth-context.jsand add the following code:import React, { useState, useContext } from "react...