Securing the frontend

The authentication was implemented to the backend using JWT. In Chapter 5, Securing and Testing Your Backend, we created JWT authentication, and the /login endpoint is allowed to everyone without authentication. In the frontend's login page, we have to first call the /login endpoint to get the token. After that, the token will be included in all requests we are sending 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:

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 login...