Spring Boot React JS Login Example

In this tutorial, we will create a full-stack application using Spring Boot for the backend and React (using functional components and hooks) for the frontend. We will implement user authentication using Spring Security 6+ and React 18. The tutorial will cover setting up the project, configuring Spring Security, creating a Spring Boot REST API for user login, and building a React application for the login functionality.


Before we start, ensure you have the following:

  • Java Development Kit (JDK) installed
  • Apache Maven installed
  • Node.js and npm installed
  • An IDE (such as IntelliJ IDEA, Eclipse, or VS Code) installed

Step 1: Setting Up the Spring Boot Project

1.1 Create a Spring Boot Project

  1. Open Spring Initializr:

  2. Configure Project Metadata:

    • Project: Maven Project
    • Language: Java
    • Spring Boot: Select the latest version of Spring Boot
    • Group: com.example
    • Artifact: spring-boot-react-login
    • Name: spring-boot-react-login
    • Description: Full Stack Application with Spring Boot and React for Login
    • Package Name: com.example.springbootreactlogin
    • Packaging: Jar
    • Java Version: 17 (or your preferred version)
    • Click Next.
  3. Select Dependencies:

    • On the Dependencies screen, select the dependencies you need. For user authentication, you can start with:
      • Spring Web
      • Spring Security
      • Spring Data JPA
      • H2 Database
      • Spring Boot DevTools
    • Click Next.
  4. Generate the Project:

    • Click Generate to download the project zip file.
    • Extract the zip file to your desired location.
  5. Open the Project in Your IDE:

    • Open your IDE and import the project as a Maven project.

1.2 Project Structure

After importing the project, you will see the following structure in your IDE:

├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── springbootreactlogin
│   │   │               ├── SpringBootReactLoginApplication.java
│   │   │               ├── config
│   │   │               ├── controller
│   │   │               ├── model
│   │   │               ├── repository
│   │   │               └── service
│   ├── main
│   │   └── resources
│   │       ├── application.properties
│   └── test
│       └── java
│           └── com
│               └── example
│                   └── springbootreactlogin
│                       └── SpringBootReactLoginApplicationTests.java
└── pom.xml

Step 2: Creating the Backend

2.1 Configure H2 Database

Open the application.properties file located in the src/main/resources directory and add the following configuration:

# H2 Database configuration

# JPA settings

2.2 Create the User Entity

In the model package, create a new Java class named User:

package com.example.springbootreactlogin.model;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;

public class User {

    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    private String role;

    // Getters and Setters

    public Long getId() {
        return id;

    public void setId(Long id) {
        this.id = id;

    public String getUsername() {
        return username;

    public void setUsername(String username) {
        this.username = username;

    public String getPassword() {
        return password;

    public void setPassword(String password) {
        this.password = password;

    public String getRole() {
        return role;

    public void setRole(String role) {
        this.role = role;

2.3 Create the UserRepository Interface

In the repository package, create a new Java interface named UserRepository:

package com.example.springbootreactlogin.repository;

import com.example.springbootreactlogin.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

public interface UserRepository extends JpaRepository<User, Long> {
    User findByUsername(String username);

2.4 Create the UserService Interface

In the service package, create a new Java interface named UserService:

package com.example.springbootreactlogin.service;

import com.example.springbootreactlogin.model.User;

public interface UserService {
    User findByUsername(String username);

2.5 Implement the UserService Interface

In the service package, create a new Java class named UserServiceImpl:

package com.example.springbootreactlogin.service;

import com.example.springbootreactlogin.model.User;
import com.example.springbootreactlogin.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

public class UserServiceImpl implements UserService {

    private final UserRepository userRepository;

    public UserServiceImpl(UserRepository userRepository) {
        this.userRepository = userRepository;

    public User findByUsername(String username) {
        return userRepository.findByUsername(username);

2.6 Configure Spring Security

Create a new Java class named SecurityConfig in the config package:

package com.example.springbootreactlogin.config;

import com.example.springbootreactlogin.service.UserServiceImpl;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.config.annotation.authentication.configuration.AuthenticationConfiguration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;

public class SecurityConfig {

    private final UserServiceImpl userService;

    public SecurityConfig(UserServiceImpl userService) {
        this.userService = userService;

    public UserDetailsService userDetailsService() {
        return username -> {
            User user = userService.findByUsername(username);
            if (user == null) {
                throw new UsernameNotFoundException("User not found");
            return org.springframework.security.core.userdetails.User

    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();

    public AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration) throws Exception {
        return authenticationConfiguration.getAuthenticationManager();

    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.csrf(csrf -> csrf.disable())
            .authorizeHttpRequests(authorizeRequests ->
        return http.build();

2.7 Create the UserController Class

In the controller package, create a new Java class named UserController:

package com.example.springbootreactlogin.controller;

import com.example.springbootreactlogin.model.User;
import com.example.springbootreactlogin.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

public class UserController {

    private final UserService userService;

    public UserController(UserService userService) {
        this.userService = userService;

    public String login(@RequestBody User user) {
        User existingUser = userService.findByUsername(user.getUsername());
        if (existingUser != null && user.getPassword().equals(existingUser.getPassword())) {
            return "Login successful";
        } else {
            return "Invalid credentials";

Step 3: Creating the Frontend with React

3.1 Set Up React Project

  1. Open a terminal and navigate to your workspace directory.

  2. Create a new React project using Create React App:

    npx create-react-app react-frontend
  3. Navigate to the project directory:

    cd react


### 3.2 Install Axios and React Router DOM

Install Axios to make HTTP requests and React Router DOM for routing:

npm install axios react-router-dom@6

3.3 Create Components

Create the necessary components for the login functionality.

3.3.1 Create AuthService.js

Create a new file AuthService.js in the src directory to handle API requests:

import axios from 'axios';

const API_BASE_URL = "http://localhost:8080/api";

class AuthService {
    login(credentials) {
        return axios.post(`${API_BASE_URL}/login`, credentials);

export default new AuthService();

3.3.2 Create LoginComponent.js

Create a new file LoginComponent.js in the src/components directory:

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import AuthService from '../AuthService';

const LoginComponent = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [message, setMessage] = useState('');
    const navigate = useNavigate();

    const handleLogin = async (e) => {
        try {
            const response = await AuthService.login({ username, password });
            if (response.data === 'Login successful') {
            } else {
                setMessage('Invalid credentials');
        } catch (error) {
            setMessage('Invalid credentials');

    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-6">
                    <div className="card">
                        <div className="card-header">Login</div>
                        <div className="card-body">
                            {message && <div className="alert alert-danger">{message}</div>}
                            <form onSubmit={handleLogin}>
                                <div className="form-group">
                                        onChange={(e) => setUsername(e.target.value)}
                                <div className="form-group">
                                        onChange={(e) => setPassword(e.target.value)}
                                <button type="submit" className="btn btn-primary">Login</button>

export default LoginComponent;

3.3.3 Create DashboardComponent.js

Create a new file DashboardComponent.js in the src/components directory:

import React from 'react';

const DashboardComponent = () => {
    return (
            <p>Welcome to the dashboard!</p>

export default DashboardComponent;

3.3.4 Create App.js

Modify the App.js file to set up routing for the application:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import LoginComponent from './components/LoginComponent';
import DashboardComponent from './components/DashboardComponent';

const App = () => {
    return (
            <div className="container">
                    <Route path="/" element={<LoginComponent />} />
                    <Route path="/login" element={<LoginComponent />} />
                    <Route path="/dashboard" element={<DashboardComponent />} />

export default App;

3.3.5 Update index.js

Ensure the index.js file is set up correctly:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
        <App />

Step 4: Running the Application

4.1 Run the Spring Boot Application

  1. Open the SpringBootReactLoginApplication class in the src/main/java/com/example/springbootreactlogin directory.
  2. Click the green Run button in your IDE or use the terminal to run the application:
    ./mvnw spring-boot:run

4.2 Run the React Application

  1. Open a terminal and navigate to the react-frontend directory.

  2. Start the React application:

    npm start
  3. Open your web browser and navigate to http://localhost:3000.

You can now use the login functionality provided by the React frontend and Spring Boot backend.


In this tutorial, we created a full-stack application using Spring Boot for the backend and React (with functional components and hooks) for the frontend. We implemented user authentication using Spring Security 6+ and created a simple login page with React. This setup provides a solid foundation for developing more complex full-stack applications with user authentication.