Securing the frontend

In Chapter 5, Securing Your Backend, we created JWT authentication and allowed everyone access to the /login endpoint without authentication. Now, on the frontend login page, we have to send a POST request to the /login endpoint using user credentials to get a token. After that, the token will be included in all requests that we send to the backend, as demonstrated in the following figure:

Figure 16.2: Secured application

With this knowledge, we will start to implement login functionality on our frontend. We will implement the login page where the user enters credentials, and then we will send a login request to get a token from the server. We will use the stored token in the requests that we send to the server.

Creating a login component

Let’s first create a login component that asks for credentials from the user to get a token from the backend:

1. Create a new file called Login.tsx in the components folder. Now, the file...