Securing the frontend

The authentication was implemented in the backend using JWT. In Chapter 5, Securing and Testing Your Backend, we created JWT authentication, and everyone is allowed access to the /login endpoint without authentication. On the frontend's login page, we have to first call the /login endpoint using the user credentials to get the token. After that, the token will be included in all requests that we send to the backend, as demonstrated in Chapter 5, Securing and Testing Your Backend.

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.js, in the components folder. Now, the file structure of the frontend should be the following:

Figure 14.2 – Project structure

2. Open the file in the VS Code editor view and add the following base code to the Login component. We are also importing SERVER_URL, because it is required in a...