Get the latest tech news

Keycloak, Angular, and the BFF Pattern


17 minutes read In this article, we’ll use the BFF (Backend for Frontend) pattern to build a secure system comprising a web app, a Keycloak server, and a dedicated backend service that brokers authentication flows between them. Our goal? Design an application that never stores sensitive data in the browser.

Unlike a basic proxy, a BFF is tailored to the specific needs of each frontend client, handling client-specific logic, enhancing security by managing authentication flows, aggregating APIs from multiple backend services, and maintaining a clear separation of concerns. This is similar to HTTP redirects that send users to another web page to log in and then return them back to where they’ve started from./auth/keycloak also generates the needed code_verifier and code_challenge, which play a crucial role in PKCE. Sure, one could also use one of those many “ angular keycloak ” packages, but I think that SPAs and other public clients are not well-suited for handling anything related to authentication and secure management of sensitive data like passwords, tokens, and other credentials.

Get the Android app

Or read this on Hacker News

Read more on:

Photo of Keycloak

Keycloak

Photo of bff pattern

bff pattern

Related news:

News photo

Keycloak took 10 months to fix a 2FA bypass