Helper function for login

In this section, we define the helper functions that we can use in the react component. Helper functions are useful to store the user's JWT token in the browser's local storage.

We use the npm package (jsonwebtoken) for JWT encoding/decoding. To install the package, we can execute the below command in the terminal.

npm i jsonwebtoken

In this section, we can create four (4) helper functions as below:

1. handleLogin: Store the JWT token in the local storage by authenticating the user's email and password.
2. isLoggedIn: Return Boolean if the user is login.
3. getCurrentUser: Return the JWT token from the local storage.
4. logout: Remove the JWT token from the local storage.

To implement the above function, we can create the file in gatsby's project at the below location:

• src/utils/auth.js

In the auth.js, to work with local storage, we need to access the javascript window object. The window object is undefined at the server. To use the window object, we've to make sure that the code runs on the client-side (browser). For that, we can define a variable (isBrowser) that return boolean if the window object is defined as below:

const isBrowser = typeof window !== `undefined`

Using the javascript window object, we can perform operations in local storage (e.g. store, retrieve, store and delete data).

• handleLogin function

In the browser local storage, we need to store the user's information as below:

name, email, token

To store the above information in the browser local storage, we can create a setUser function as below:

const setUser = user => (window.localStorage.gatsbyUser = JSON.stringify(user))

In the above function, we use gatsbyUser key to store the user's information in the local storage.

In the future, we can view the gatsbyUser key data in the browser local storage as shown in the below image.

Next, we can create a handleLogin function that stores the user's login information in the local storage if the user is authorized with the correct email and password. For that, we can create the function as below:

import Axios from "axios"

export const handleLogin = async ({ email, password = "" }) => {
  if (!isBrowser) return false

  let { data } = await Axios.post(`/api/login`, {
    email: email,
    password: password,
  })

  if (data.message === "success") {
    return setUser({
      name: data.name,
      email: data.email,
      token: data.token,
    })
  }

  return false
}

In the above function, we use the Axios npm package to send the HTTP request to the /api/login API route. In return, if the user is authorized then we can save the user's login detail in the local storage.

• getCurrentUser function

We can create a getCurrentUser function that returns the user's information from the browser local storage. For that, we can write the function as below

export const getCurrentUser = () => isBrowser && getUser()

• isLoggedIn function

To check if the user is login, we can create a function (isLoggedIn). In this function, we can check if the user's information is available in the browser's local storage. If so, we can return the boolean. For that, we can write the function as below

export const isLoggedIn = () => {
  if (!isBrowser) return "false"
  const user = getUser()

  return !!user.email
}

• logout function

To log out the user from the website, we simply remove the user's information from the browser local storage. For that, we can create a function as below.

export const logout = callback => {
  if (!isBrowser) return
  setUser({})
  if (callback) {
    callback()
  }
}

You can download the auth.js file from below:

Great!

In the next section, we can use the above-defined helper function to store JWT and handle user authentication.