Securing Your Application

We will learn how to secure our application in this chapter. This chapter will explain how to implement authentication in our frontend when we are using JSON Web Token (JWT) authentication in the backend. First, 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, and implement the logout functionality.

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 Your Backend, is required (https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-3-and-React-Fourth-Edition/tree/main/Chapter05), as is the React app that we used in Chapter 14, Styling the Frontend with React MUI (https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-3-and-React-Fourth-Edition/tree/main/Chapter14).

The following GitHub link for this chapter will also be useful: https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-3-and-React-Fourth-Edition/tree/main/Chapter16.

Securing the backend

In Chapter 13, we 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 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 allowed everyone access to all endpoints. Now, we can remove that line and also remove the comments from the original version. Now, the filterChain() method of your SecurityConfig.java file should look like the following:

   @Bean
   public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
     http.csrf((csrf) -> csrf.disable()) .cors(withDefaults())
       .sessionManagement((sessionManagement) ->
         sessionManagement.sessionCreationPolicy(
         SessionCreationPolicy.STATELESS))
       .authorizeHttpRequests( (authorizeHttpRequests) ->
         authorizeHttpRequests...

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

Summary

In this chapter, we learned how to implement a login and logout 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 and final chapter, we will deploy our backend and frontend and also 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. What is session storage?
4. How should you send a token to the backend in CRUD functions?

Further reading

Here are some other resources for learning about React and state management:

• State Management with React Query, by Daniel Afonso (https://www.packtpub.com/product/state-management-with-react-query/9781803231341)
• MobX Quick Start Guide, by Pavan Podila and Michel Weststrate (https://www.packtpub.com/product/mobx-quick-start-guide/9781789344837)

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask the author questions, and learn about new releases – follow the QR code below:

https://packt.link/FullStackSpringBootReact4e