Implementing User Authentication and Global Notifications

In the previous chapters, we configured the pages, created mocked APIs, and made the API calls from our application. However, the application still relies on test data when it comes to the authentication of the users in the admin dashboard.

In this chapter, we will build the application’s authentication system, allowing users to authenticate and access protected resources in the admin dashboard. We will also be creating a toast notification system to provide feedback to users if an action happens that we want to notify them about.

In this chapter, we will cover the following topics:

• Implementing the authentication system
• Implementing notifications

By the end of the chapter, we will have learned how to authenticate users in our application and also how to handle the global application state with Zustand.

Technical requirements

Before we get started, we need to set up the project. To be able to develop the project, you will need the following things installed on your computer:

• Node.js version 16 or above and npm version 8 or above.

There are multiple ways to install Node.js and npm. Here is a great article that goes into more detail: https://www.nodejsdesignpatterns.com/blog/5-ways-to-install-node-js.

• VSCode (optional) is currently the most popular editor/IDE for JavaScript/TypeScript, so we will be using it. It is open source, has great integration with TypeScript, and you can extend its features via extensions. It can be downloaded from here: https://code.visualstudio.com/.

The code files for this chapter can be found here: https://github.com/PacktPublishing/React-Application-Architecture-for-Production.

The repository can be cloned locally with the following command:

git clone https://github.com/PacktPublishing/React-Application-Architecture-for...

Implementing the authentication system

Authentication is the process of identifying who the user on a platform is. In our application, we need to identify users when they access the admin dashboard.

Before implementing the system, we should look closely at how it will work.

Authentication system overview

We are going to authenticate the users with a token-based authentication system. That means the API will expect the user to send their authentication token with the request to access protected resources.

Let’s take a look at the following diagram and the subsequent steps:

Figure 7.1 – Authentication system overview

The preceding diagram is explained as follows:

1. The user submits the login form with the credentials by creating a request to the /auth/login endpoint.
2. If the user exists and the credentials are valid, a response with the user data returns. In addition to the response data, we are also attaching an httpOnly cookie...

Implementing notifications

Whenever something happens in the application, such as a successful form submission or a failed API request, we want to notify our users about it.

We will need to create a global store that will keep track of all notifications. We want it to be global because we want to show these notifications from anywhere in the application.

For handling global states, we will be using Zustand, a state management library that is lightweight and very simple to use.

Creating the store

Let’s open the src/stores/notifications/notifications.ts file and import the dependencies we will use:

import { createStore, useStore } from 'zustand';
import { uid } from '@/utils/uid';

Then, let’s declare the notification types for the store:

export type NotificationType =
  | 'info'
  | 'warning'
  | 'success'
  | 'error';
export type Notification = {
 ...

Summary

In this chapter, we learned how to handle authentication and manage the global state of the application.

We started with an overview of the authentication system and how it works. Then, we implemented authentication features such as login, logout, and getting the authenticated user info. We also built the Protected component, which controls whether the user is allowed to see a page based on their authentication status.

Then, we built a toast notification system where the user can trigger and display notifications from anywhere in the application. The main goal of building it was to introduce Zustand, a very simple and easy-to-use state management library for handling global application state.

In the next chapter, we will learn how to approach testing the application with unit, integration, and end-to-end tests.