Site-wide authentication using context within Gatsby
There may be situations where you want the entirety of your Gatsby site to be behind authentication. For example, you may have made a documentation site only meant for employees of your company. Let's look at how we can use context to turn every page into a private route:
- First, let's create a login component in the
componentsfolder. Call this fileLogin.jsand add the following code to it:import React from "react"; const Login = ({login}) => { return <button onClick={login}>Login</button>; }; export default Login;You'll notice that, unlike the last
Logincomponent we created, we are not retrieving theloginfunction from the context. The reason for this will become clear when we create the context. - Create a folder called
contextinsrc. - Create a file in
contextcalledauth-context.jsand add the following code:import React, { useState, useContext } from "react"...