Chapter 14: Securing Your Application

This chapter will explain how to implement authentication to our frontend when we are using JSON Web Token (JWT) authentication in the backend. In the beginning, we will switch on security in our backend to enable JWT authentication. Then, we will create a component for the login functionality. Finally, we will modify our CRUD functionalities to send the token in the request's authorization header to the backend. We will learn how to secure our application in this chapter.

In this chapter, we will cover the following topics:

• Securing the backend
• Securing the frontend

Technical requirements

The Spring Boot application that we created in Chapter 5, Securing and Testing Your Backend, is required (located on GitHub at https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-2-and-React/tree/main/Chapter05), as is the React app that we used in Chapter 12, Styling the Frontend with React MUI (located on GitHub at https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-2-and-React/tree/main/Chapter12).

The following GitHub link will also be required: https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-and-React/tree/main/Chapter14.

Check out the following video to see the Code in Action: https://bit.ly/38RFO0X

Securing the backend

We have implemented CRUD functionalities in our frontend using an unsecured backend. Now, it is time to switch on security for our backend and go back to the version that we created in Chapter 5, Securing and Testing Your Backend:

1. Open your backend project with the Eclipse IDE and open the SecurityConfig.java file in the editor view. We have commented the security out and have allowed everyone access to all endpoints. Now, we can remove that line and also remove the comments from the original version. Now, the configure method of your SecurityConfig.java file should look like the following:

   @Override
   protected void configure(HttpSecurity http) throws Exception {
     http.csrf().disable().cors().and()
     .sessionManagement()
   .sessionCreationPolicy(SessionCreationPolicy.
       STATELESS).and()
     .authorizeRequests()
     .antMatchers(HttpMethod.POST, "/login").permitAll()
     .anyRequest...

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

Summary

In this chapter, we learned how to implement a login functionality for our frontend when we are using JWT authentication. Following successful authentication, we used session storage to save the token that we received from the backend. The token was then used in all requests that we sent to the backend; therefore, we had to modify our CRUD functionalities to work with authentication properly.

In the next chapter, we will deploy our application to Heroku, as we demonstrate how to create Docker containers.

Questions

1. How should you create a login form?
2. How should you log in to the backend using JWT?
3. How should you store tokens in session storage?
4. How should you send a token to the backend in CRUD functions?

Further reading

Packt has other great resources available for learning about React. These are as follows:

• React - The Complete Guide, by Academind GmbH: https://www.packtpub.com/product/react-the-complete-guide-includes-hooks-react-router-and-redux-2021-updated-second-edition-video/9781801812603
• React 17 Design Patterns and Best Practices - Third Edition, by Carlos Santana Roldán: https://www.packtpub.com/product/react-17-design-patterns-and-best-practices-third-edition/978800560444