keycloak-angular

In version 19, Keycloak events transitioned from an RxJS Subject to Angular Signals. This provides a more declarative way to handle client events without manual subscription management.

Key Changes

• Angular Signals: Events are now exposed as Signals.
• Early Initialization: Events are instantiated at the start of the application lifecycle, even before the Keycloak client is initialized.
• Injection Token: Use the KEYCLOAK_EVENT_SIGNAL injection token to access events.

Implementation Steps

1. Inject KEYCLOAK_EVENT_SIGNAL using Angular's inject() function.
2. Use an effect() to react to changes in the signal.
3. Use the typeEventArgs<T>() utility to provide strong typing for event arguments.

Example

import { Component, effect, inject } from '@angular/core';
import { KEYCLOAK_EVENT_SIGNAL, KeycloakEventType, typeEventArgs, type ReadyArgs } from 'keycloak-angular';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent {
  authenticated = false;
  private readonly keycloakSignal = inject(KEYCLOAK_EVENT_SIGNAL);

  constructor() {
    effect(() => {
      const keycloakEvent = this.keycloakSignal();

      if (keycloakEvent.type === KeycloakEventType.Ready) {
        // Use typeEventArgs to cast arguments to the correct type
        this.authenticated = typeEventArgs<ReadyArgs>(keycloakEvent.args);
      }

      if (keycloakEvent.type === KeycloakEventType.AuthLogout) {
        this.authenticated = false;
      }
    });
  }
}

To integrate Keycloak into an Angular application using NgModule, you must initialize the KeycloakService during the application bootstrap process using an APP_INITIALIZER provider. This ensures Keycloak is ready before the app starts.

Note: This implementation is deprecated. It is recommended to migrate to the provideKeycloak function for modern Angular applications. However, for existing NgModule-based apps, follow this pattern:

1. Import KeycloakAngularModule in your AppModule.
2. Create an initialization factory function that calls keycloak.init().
3. Provide the factory using APP_INITIALIZER with KeycloakService as a dependency.

To enable silent SSO (which avoids full page redirects by using a hidden iframe), you must also serve a static HTML file at the path specified in silentCheckSsoRedirectUri.

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: 'http://localhost:8080',
        realm: 'your-realm',
        clientId: 'your-client-id'
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri: window.location.origin + '/assets/silent-check-sso.html'
      }
    });
}

@NgModule({
  declarations: [AppComponent],
  imports: [AppRoutingModule, BrowserModule, KeycloakAngularModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}