Implementing OIDC with Authorization Code Flow on API Gateway using Keycloak as SSO provider

I'm planning to implement an architecture where:

The API Gateway interacts with multiple services and a Vue.js frontend application. The API Gateway creates its own sessions linking user requests to stored tokens. The frontend uses session cookies to communicate with the API Gateway. Authentication is handled through Keycloak as the SSO provider. The goal is to keep the frontend unaware of the actual token, while maintaining security and flexibility.

Source of inspiration: https://medium.com/@a.zagarella/microservices-architecture-a-real-business-world-scenario-c77c31a957fb

The article describes the use of Spring Cloud Gateway, but in my case it will be api gateway on golang.

Example of an authentication flow in this scenario

Example of a request for access to protected resources on a Resource Server:

What are some best practices for implementing this kind of setup? Are there any potential pitfalls I should be aware of?

This approach seems similar to what's described in the linked article, but I'd like to get more insights on how to implement it effectively.

Please provide guidance on:

How to securely store and manage tokens on the API Gateway Best practices for session management between frontend and API Gateway How to handle token refresh and expiration Any security considerations I should keep in mind I'm particularly interested in how to balance security, ease of use, and scalability in this architecture.

Thank you for your expertise!

This approach of storing tokens in the gateway (configured as an oauth2Client with oauth2Login) and replacing cookie-based authorization with Bearer-based one while routing requests to downstream resource servers (using the TokenRelay filter) is frequently referred to as "OAuth2 BFF" (Backend-For-Frontend).

I wrote an article for that on Baeldung. It contains all implementation details and a sample Vue application (along with Angular and React ones).

About scalability, as mentioned in the article, you should consider using Spring Session (share session data between gateway instances using Redis or similar).

Regarding tokens refreshing, the TokenRelay filter and Spring Security will handle this for you.

Once the BFF is correctly configured, the frontend uses just the "standard" session cookie and CSRF token it should be familiar with, and downstream services are standard resource servers. So, nothing complicated on either side. However, there is one pitfall in the case of Vue which does not handle the CSRF token transparently (like Angular does for instance). So, you'll have to write some code (a request interceptor?) to read the XSRF-TOKEN cookie value and set it as X-XSRF-TOKEN header for all POST, PUT, PATCH, and DELETE requests to your backend.