Creating the Authentication Frontend

In this lesson, we’ll develop a frontend that’s capable of fetching users’ details and sending them to the Strapi API. The frontend will also perform actions based on the response it gets from the Strapi API.

For our application, we want to allow users to save recipes to their favorites so they can look up recipes that they want quickly and without having to search for them again. To associate users with their saved recipes, we’ll need to authenticate them and fetch their details.

Because we have the backend set up already, we need to create a front-end application capable of consuming the back-end APIs and authenticating users.

Creating the authentication context

Before we can implement our application’s authentication functionality, we need to set up a few things. We’ll need a few helpers, as well as an authentication context and context provider. Let’s get started with those implementations.

The helpers.js and constants.js files will go in the /utils folder. Both of these files contain a few utilities and helper functions that will be used for multiple pages. We’re keeping them in a separate file to keep the code modular and to avoid redundancy.