React SpringBoot Authentication – Part 2 (User Registration Flow)

Learn React SpringBoot Authentication by implementing user registration, login, password handling, sessions, and authentication components in React and Spring Boot.

TL;DR

• React SpringBoot Authentication connects a React application to Spring Boot authentication endpoints for user registration and login.

• Create a LoginRequest model and update the User model to store a password hash.

• Implement an authentication service that validates the user’s username and password.

• Create Registration and Login components in React to send authentication requests to the Spring Boot API.

• Use a session to maintain the authenticated user’s state after a successful login.

This is Part 2 of the tutorial on How to a authenticate from React application to Spring Boot API.

In this part you will actually implement user authentication in Spring Boot. Then you will see how to store user credentials in in React using local storage (session or cookies).

We would cover the following:

1. Add the LoginRequest Model and Update the User Model
2. Write the Authenticate Service Method
3. Write the Login Controller Method
4. Implement the Registration and RegistrationSuccessful Components
5. Implement the Login and LoginSuccessful Components

 

1. Add the LoginRequest Model and update the User model

The LoginRequest would be used to hold the username and password coming from the request body of a login request. I would just have fields:

• id
• username
• password

We would also add the passwordHash field to the user model and this is going to be a string field

Update the addUser method of the UserService so that when a new user is being saved, the passwordHash field is also set.

 

2. Write the Authenticate Service Method

Write the authenticate method in the UserService. This method would take a LoginRequest object (username and password) and checks if the values are valid

The authenticate method placed in the UserService and is given below:

public boolean authenticate(String username, String password) {
    User user = userRepository.findByUsername(username);

    if (!user.getUsername().equals(username)){
        throw new UsernameNotFoundException("User not found in the database");
    }

    if(user.getPasswordHash().equals(bCryptPasswordEncoder.encode(password))) {
        throw new BadCredentialsException("The password is incorrect");
    }
    return true;
}

 

3. Write the Login Controller Method

You will write the controller method for /login.

This method would receive the LoginRequest in the request body and call the authenticate method. At successful authentication it returns an Ok status code

The login() method is given below:

@PostMapping("/login")
public ResponseEntity<String> login(@RequestBody LoginRequest loginRequest, HttpSession session) {
    try {
        boolean isAuthenticated = authenticationService.authenticate(loginRequest.getUsername(), loginRequest.getPassword());
        if (isAuthenticated) {
            session.setAttribute("user", loginRequest.getUsername());
            return ResponseEntity.ok("Login successful");
        } else {
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid username or password");
        }
    } catch (Exception e) {
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("An error occurred during login");
    }
}

 

Note that this method has HttpSession as its second parameter but you don’t need to worry about it as Spring would handle creating and managing sessions.

 

4. Implement the Registration and RegistrationSuccessful Components

Create a Registration Component that would contain  the following fields:

• firstname
• lastname
• username
• password
• confirmPassword

Get the designed form here.

The markup and script for the RegistrationSuccessful component is given below:

import React from 'react'
import {Typography, Container, Box } from '@mui/material';

export default function RegistrationSuccess() {
  return (
    <Container maxWidth="xs">
    <Box sx={{ mt: 8, color: 'green' }}>
      <Typography variant="h3" align="center" gutterBottom>
        You have successfully Registered. You can now Login
      </Typography>
      <Typography variant="h6" align="center" gutterBottom>
        <a href="#">You can now Login</a>
      </Typography>
    </Box>
    </Container>

  )
}

 

5. Create the Login Component

The Login component would contain 2 fields, username and password.

When the user fills and clicks on the Submit, it makes a post request to the /login endpoint and a response of either 200(Ok) or exception is returned.

At successful login, the user should be directed to the LoginSuccess component. You also need to create this component

Get the markup for the Login component here.

FAQs

What is React SpringBoot Authentication?

React SpringBoot Authentication is the process of connecting a React frontend with a Spring Boot backend to handle user registration, login, and authentication.

What is the LoginRequest model used for?

The LoginRequest model holds the username and password submitted by the user during the login process.

How does Spring Boot authenticate the user?

The authentication service retrieves the user by username and checks the supplied password against the stored password information before allowing the login to succeed.

What components are created for registration and login?

The tutorial creates Registration, RegistrationSuccessful, Login, and LoginSuccess components to handle the different stages of the authentication flow.

How is the login session managed?

The login controller receives an HttpSession and stores the authenticated username in the session after successful authentication.

Final Thoughts

Implementing React SpringBoot Authentication requires both sides of the application to work together. Spring Boot handles the authentication logic, user information, password data, and login session, while React provides the registration and login interfaces through which users interact with the system.

This tutorial establishes the foundation for connecting a React application to a Spring Boot authentication system. Once registration and login are working, the next step is to use that authentication state to control access to protected routes and application features.