DEV Community

Cover image for Building a Full Stack User Authentication System using React, Spring Boot, and PostgreSQL
Tamilselvan K
Tamilselvan K

Posted on

Building a Full Stack User Authentication System using React, Spring Boot, and PostgreSQL

#react #springboot #postgressql #java

Introduction

In this blog, I will walk through how I built a full-stack User Authentication System using React for the frontend, Spring Boot for the backend, and PostgreSQL for the database.

This project demonstrates a complete flow of user registration, login, and dashboard display, along with validation and login activity tracking.

Tech Stack

Frontend

  • React
  • React Router
  • Axios
  • CSS

Backend

  • Java
  • Spring Boot
  • Spring Data JPA

Database

  • PostgreSQL

Features

  • User Registration
  • User Login Authentication
  • Dashboard with User Details
  • Client-side Form Validation
  • REST API Integration
  • Login Activity Tracking (Status and Timestamp)

Application Flow

  1. User registers with username, password, name, and email
  2. Data is sent to Spring Boot backend and stored in PostgreSQL
  3. User logs in with credentials
  4. Backend validates user and records login attempt
  5. On success, frontend fetches user details
  6. Dashboard displays user information

Frontend Implementation (React)

Form Handling

I used React’s useState hook to manage form inputs and errors. Each input field is a controlled component.

const [data, setData] = useState({
  username: "",
  password: ""
});
Enter fullscreen mode Exit fullscreen mode

Validation

Client-side validation ensures that users cannot submit empty fields or invalid data.

if (!data.username || !data.password) {
  setErrors({ message: "All fields are required" });
}
Enter fullscreen mode Exit fullscreen mode

API Integration

Axios is used to communicate with the backend.

const response = await axios.post(
  "http://localhost:8080/api/login",
  new URLSearchParams(data)
);
Enter fullscreen mode Exit fullscreen mode

Navigation

React Router is used to navigate between pages like Register, Login, and Dashboard.

Backend Implementation (Spring Boot)

Layered Architecture

The backend follows a layered structure:

  • Controller → Handles HTTP requests
  • Service → Contains business logic
  • Repository → Interacts with database

User Registration 

public String register(String username, String password, String name, String email) {
    UserEntity user = new UserEntity();
    user.setUsername(username);
    user.setPassword(password);
    user.setName(name);
    user.setEmail(email);

    userRepo.save(user);
    return "User Registered";
}
Enter fullscreen mode Exit fullscreen mode

Login Logic 

public String login(String username, String password) {
    UserEntity user = userRepo.findByUsername(username);

    String status;

    if (user != null && user.getPassword().equals(password)) {
        status = "SUCCESS";
    } else {
        status = "FAILED";
    }

    LoginEntity attempt = new LoginEntity();
    attempt.setUsername(username);
    attempt.setStatus(status);
    attempt.setTime(LocalDateTime.now());

    loginRepo.save(attempt);

    return status;
}
Enter fullscreen mode Exit fullscreen mode

Login Tracking

Each login attempt is stored with:

  • Username
  • Status (SUCCESS / FAILED)
  • Timestamp

This helps in tracking user activity.

Database Design

UserEntity

  • id
  • username
  • password
  • name
  • email

LoginEntity

  • id
  • username
  • status
  • time

Challenges Faced

  • Managing state and validation in React
  • Handling API communication between frontend and backend
  • Designing clean backend architecture

Limitations

  • Passwords are stored in plain text
  • No authentication mechanism like JWT
  • No route protection

Future Improvements

  • Add JWT-based authentication
  • Encrypt passwords using BCrypt
  • Implement protected routes
  • Improve error handling

Conclusion

This project helped me understand how frontend and backend systems work together in a full-stack application. It also improved my knowledge of API integration, state management, and backend architecture.

If you are learning full-stack development, building an authentication system like this is a great way to understand real-world application flow.

GitHub Repository

GitHub logo Tamilselvan1812 / 37-UserAuthenticationSystem

Full Stack User Authentication System using React, Spring Boot, and PostgreSQL

User Authentication System (React + Spring Boot + PostgreSQL)

Overview

This is a full-stack User Authentication System that allows users to register, log in, and view their profile on a dashboard. The application is built using React for the frontend, Spring Boot for the backend, and PostgreSQL for database management.

Features

  • ✅ User Registration
  • ✅ User Login Authentication
  • ✅ Dashboard with User Details
  • ✅ Client-side Form Validation
  • ✅ REST API Integration
  • ✅ Login Activity Tracking (Status + Timestamp)
  • ✅ Responsive UI with modern CSS

Tech Stack

Frontend

  • React
  • React Router
  • Axios
  • CSS

Backend

  • Java
  • Spring Boot
  • Spring Data JPA

Database

  • PostgreSQL

Application Flow

  1. User registers with username, password, name, and email
  2. Data is stored in PostgreSQL via Spring Boot APIs
  3. User logs in with credentials
  4. Backend validates user and records login attempt
  5. On success, user is redirected to dashboard
  6. Dashboard displays user details

Project Structure

Frontend (React)

src/
 ├── App.jsx
…
View on GitHub

Top comments (0)