How to configure Keycloak for Angular 19+

Credit: ChatGPT

From Angular 19, changed a lot:

• Keycloak Angular will now adopt the same major version numbering as Angular, making it easier to identify the correct version to use.
• Functional Configuration: Simplify setup with provideKeycloak—no more KeycloakService or KeycloakAngularModule.
• Angular Signals: Reactive handling of Keycloak events for a cleaner, modern approach.
• Enhanced Interceptors: Add tokens with explicit configuration using includeBearerTokenInterceptor and customBearerTokenInterceptor.
• Role-Based Rendering: New *kaHasRoles directive for conditional rendering based on roles.
• Modular Features: Introduced withAutoRefreshToken for seamless token refresh and session management.
• Functional Route Guards: Create custom guards with createAuthGuard for streamlined route protection.

and some important breaking changes:

• Deprecated KeycloakService, KeycloakAngularModule, KeycloakAuthGuard, and keycloakEvents$.
• Bearer tokens are no longer added automatically to all HTTP requests — explicit configuration required.

Of couse, if you are dealing with previous versions of Angular and updating it to the Angular…