Building a Full Enterprise-Ready React + Spring Boot Auth Flow: An End-to-End Guide

Authentication in production often appears simple but can become complex due to various factors such as token storage, CSRF protection, refresh flows, and protected routing. Getting any of these aspects wrong can lead to significant security issues. In two previous articles, the author covered enabling CSRF in a JWT-based React + Spring Boot application and storing personal information using either sessionStorage or the Context API.

This article brings all these components together into a complete end-to-end authentication flow suitable for enterprise applications.

The article begins by outlining the high-level flow, which involves the following steps: login, token issuance, protected routes, token refresh, and logout. The frontend uses React, while the backend is built with Spring Boot.

Architecture Overview

The architecture consists of two main components: the React frontend and the Spring Boot backend. The frontend handles user interactions, while the backend manages authentication, token issuance, and protected routes. The key steps in the authentication flow are:

1. POST /login: The frontend sends login credentials to the backend, which validates them using an AuthenticationManager. Upon successful authentication, the backend generates and issues both an access token and a refresh token as httpOnly cookies.

2. GET /protected: The frontend accesses protected routes by sending the access token and CSRF token in request headers. The backend validates both the token and the CSRF token before granting access to protected data.

3. POST /refresh: When the access token expires, the frontend sends a request to the backend to generate a new access token using the refresh token. The backend then issues a new access token while rotating the refresh token.

4. POST /logout: The frontend sends a request to the backend to invalidate the user's session, thereby logging out the user.

Key Design Decisions

The article discusses several design decisions made during the implementation of this authentication flow:

1. Token storage: httpOnly cookies are used to store tokens. These cookies are not accessible to JavaScript, which mitigates the risk of XSS token theft.

2. CSRF protection: The double-submit cookie pattern is implemented using Spring Security's CookieCsrfTokenRepository. This pattern ensures that incoming requests with CSRF tokens are legitimate and not forged by an attacker.

3. Token type: Short-lived access tokens combined with refresh tokens help limit the exposure window in case a token is compromised.

4. State management: The Context API is used for managing authentication status in the React frontend, providing a centralized and lightweight solution.

Step 1: Backend — Login and Token Issuance

When a user logs in successfully, the backend generates and issues a JWT (JSON Web Token) as an httpOnly cookie. This token is then sent to the frontend, which stores it securely using the Context API. The backend also generates a refresh token, which is used later for token refresh operations.

Step 2: Backend — CSRF Protection

Since the authentication flow relies on cookies, CSRF protection is essential. Spring Security's double-submit cookie pattern is employed to mitigate CSRF attacks. The CSRF token is set as a cookie that can be read by the frontend and included in outgoing requests as a request header. This ensures that even if an attacker successfully steals the access token, they cannot forge requests without the CSRF token.

Step 3: Frontend — Configuring the HTTP Client

The frontend must be configured to work with cookies and include CSRF tokens in state-changing requests. Axios is used as the HTTP client, and it is configured to send cookies with every request. Additionally, an interceptor is added to extract the CSRF token from the cookie and include it in outgoing requests. This ensures that all protected routes are secured against CSRF attacks.