JWT Authentication using React and Spring Boot

 Introduction :

Authentication is one of the most important features in modern web applications. In this tutorial, we will learn how to implement JWT (JSON Web Token) Authentication using React.js and Spring Boot.

This guide explains how login authentication works between frontend and backend applications using secure REST APIs.

We will see:

• How login APIs work

• How tokens are generated after login

• How React stores JWT tokens

• How secured APIs are protected

• How frontend and backend communicate with each other

This is beginner-friendly and explained step-by-step for Full Stack Java learners.

---

Technologies :

Frontend

• React.js

• JavaScript

• HTML5

• CSS3

• Axios

Backend

• Java Spring Boot

• Spring Security

• JWT Authentication

• REST APIs

• PostgreSQL

---

What is JWT?

JWT stands for JSON Web Token.

It is a secure token-based authentication mechanism used in modern web applications.

When a user logs in:

1. User enters username and password

2. Spring Boot validates credentials

3. Backend generates JWT token

4. React stores the token

5. Token is sent in API requests for authentication

---

Project Architecture

React Frontend  --->  Spring Boot REST API  ---> PostgreSQL Database
        |                    |
        |---- JWT Token -----|

---

Create Spring Boot Project

Create a Spring Boot project using Spring Initializr.

Required Dependencies

• Spring Web

• Spring Security

• Spring Data JPA

• PostgreSQL Driver

• Lombok

---

Add JWT Dependency :

Add JWT dependency inside pom.xml

<dependency>
   <groupId>io.jsonwebtoken</groupId>
   <artifactId>jjwt</artifactId>
   <version>0.9.1</version>
</dependency>

---

Create User Entity :

@Entity
public class User {

   @Id
   @GeneratedValue(strategy = GenerationType.IDENTITY)
   private Long id;

   private String username;
   private String password;

   // getters and setters
}

otherwise in the place of getter and setter, 
we can add @Getter and @Setter annotations.

@Entity
@Getter
@Setter
public class User {
// code
}

---

Create Login API :

@RestController
@RequestMapping("/api/auth")
@CrossOrigin(origins = "http://localhost:3000")
 // here we can write origins = '*' also
public class AuthController {

   @PostMapping("/login")
   public String login(@RequestBody User user) {

      if(user.getUsername().equals("admin") &&
         user.getPassword().equals("admin123")) {

         return "JWT_TOKEN_GENERATED";
      }

      return "Invalid Credentials";
   }
}

---

Create React Application :

Create React project:

npx create-react-app jwt-auth-app

Install Axios:

npm install axios

---

Create Login Component in React :

import React, { useState } from 'react';
import axios from 'axios';

function Login() {

  const [user, setUser] = useState({
    username: '',
    password: ''
  });

  const handleChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    });
  };

  const handleLogin = async () => {

    const response = await axios.post(
      'http://localhost:8080/api/auth/login',
      user
    );

    localStorage.setItem(
      'token',
      response.data
    );

    alert("Login Successful");
  };

  return (
    <div>

      <input
        type="text"
        name="username"
        placeholder="Enter Username"
        onChange={handleChange}
      />

      <input
        type="password"
        name="password"
        placeholder="Enter Password"
        onChange={handleChange}
      />

      <button onClick={handleLogin}>
        Login
      </button>

    </div>
  );
}

export default Login;

---

Store JWT Token in Browser :

After successful login, the backend generates a JWT token and sends it to the React application.

The React frontend stores this token inside the browser storage (`localStorage` or `sessionStorage`) for future authenticated API requests.

Steps After Login:

1. User enters username and password

2. React sends login request to Spring Boot API

3. Spring Boot validates credentials

4. Backend generates JWT token

5. React stores token in browser storage

6. Token is sent in Authorization Header for secured API calls

Example Authorization Header :

Authorization: Bearer jwt_token

---

Secure Backend APIs :

Spring Security validates the JWT token before allowing access to protected APIs.

Without a valid token:

• User cannot access secured endpoints

• Unauthorized requests are blocked

---

Output :

When the user enters valid credentials:

1. React sends login request

2. Spring Boot validates credentials

3. JWT token is generated

4. User gets authenticated successfully

---

Advantages of JWT Authentication :

• Stateless authentication

• Secure API communication

• Faster authentication process

• Widely used in modern applications

• Easy frontend-backend integration

---

Conclusion :

In this tutorial, we learned how JWT Authentication works using React and Spring Boot. JWT is one of the most commonly used authentication methods in Full Stack Development and modern REST API applications.

Understanding authentication concepts is very important for becoming a Full Stack Java Developer.

Thank you for reading.

Next Article: https://sulochanabasavala.blogspot.com/2026/05/crud-operations-part-1-backend.html

For More: https://sulochanabasavala.blogspot.com/

Tags :

JWT Authentication, React.js, Spring Boot, Spring Security, REST API, Full Stack Development, Java, React Login Authentication

Happy Learning....