Project Setup and Initialization

Introduction

In this project, we’ll create a small authentication application. Using this application, a user can log in, log out, and view their profile. We’ll use Context API to store the user’s data and authentication state. We’ll also restrict unauthenticated users from accessing private components, and we’ll learn more about private and restricted routes along the way. A set of instructions and hints will be provided to help build this application.

Project setup

Here, we’ve created a React app using CRAcreate-react-app and installed the react-router-dom package. We can also use build tools like Vite or Parcel. Let’s open the src/pages folder from the coding widget in the app preview section.

The Dashboard, Home, and profile components contain simple text, while the Login.js file contains a form with one input and a submit button. When clicked, the submit button calls the handleSubmit function, which logs the input value or displays an error to the user if there is no input value. The App.css file contains all the required styling for this application.

Adding dummy data

We’ve created a fake database that contains user details, such as ID, name, and email. Open the FakeData.js file from the components folder or check out the following code snippet to view this database.

Let’s open the FakeData.js file from the following coding widget. In this file, we’ve declared an array of objects named users starting on line 1. Each user has a first name, a last name, an email address, and an ID. At the end of this file, we’ve defined a function called getAllUsers that returns this array.

App preview

Run the following coding widget and see the output. Click on the URL next to “Your app can be found at:” to open the application in a new tab.