BFF POC – React + Spring Cloud Gateway + Keycloak

This project demonstrates the Backend-for-Frontend (BFF) pattern using:

• React as the UI
• Spring Boot + Spring Cloud Gateway as the BFF
• Keycloak as the Authorization Server
• Downstream services (Resource Servers)

The Gateway acts as an OAuth2 client, performs authentication with Keycloak, stores the session, and relays the access token to downstream services.

Browser (React UI)
        |
        v
Spring Cloud Gateway (BFF - OAuth2 Client)
        |
        v
Keycloak (Authorization Server)
        |
        v
Downstream Resource Services

Keycloak Configuration

Configure the client in Keycloak with the following values:

• Root URL: http://localhost:8585
• Home URL: /
• Valid Redirect URI: /login/oauth2/code/keycloak
• Valid Post-Logout Redirect URI: http://localhost:5173/

React UI (Frontend)

Runs on: http://localhost:5173

Communicates only with the Gateway Uses fetch with credentials: "include". This ensures session cookies are sent with requests.

Spring Cloud Gateway (BFF)

Runs on http://localhost:8585. Configured as an OAuth2 Client that handles:

• Redirect to Keycloak
• Token exchange
• Session management
• CSRF Protection
• Token relay to downstream services

The frontend never sees the access token.

Running the Application

1. Start Keycloak and provide all the necessary configurations, like realms, client, users, etc.
2. Start the gateway and resource server using mvn spring-boot:run
3. Start the frontend using npm run dev