keycloak-angular 19.0.2 → 20.0.0

package/README.md

@@ -52,8 +52,9 @@ Note that `keycloak-js` is a peer dependency of `keycloak-angular`. This allows
 
 | Angular | keycloak-js | keycloak-angular |       Support       |
 | :-----: | :---------: | :--------------: | :-----------------: |
-|  19.x   |   18 - 26   |      19.x.x      | New Features / Bugs |
-|  18.x   |   18 - 26   |      16.x.x      |        Bugs         |
+|  20.x   |   18 - 26   |      20.x.x      | New Features / Bugs |
+|  19.x   |   18 - 26   |      19.x.x      |        Bugs         |
+|  18.x   |   18 - 26   |      16.x.x      |          -          |
 |  17.x   |   18 - 25   |      15.x.x      |          -          |
 |  16.x   |   18 - 25   |      14.x.x      |          -          |
 |  15.x   |   18 - 21   |      13.x.x      |          -          |
@@ -121,6 +122,41 @@ Create a file named `silent-check-sso.html` in the `public` or `assets` director
 
 If you want to know more about these options and various other capabilities of the Keycloak client is recommended to read the [JavaScript Adapter documentation](https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter).
 
+## Load the keycloak configuration using an external file
+
+To initialize the Keycloak application using a configuration file hosted externally, consider the following approach:
+
+```ts
+const initializeApp = async () => {
+  // Replace the URL with the actual path to your configuration file
+  const { config, initOptions } = await fetch('/config.json').then((res) => res?.json());
+
+  const appConfig: ApplicationConfig = {
+    providers: [
+      provideKeycloakAngular(config, {
+        ...initOptions,
+        silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
+        redirectUri: window.location.origin + '/'
+      }),
+      provideZoneChangeDetection({ eventCoalescing: true }),
+      provideRouter(routes),
+      provideHttpClient(withInterceptors([includeBearerTokenInterceptor]))
+    ]
+  };
+
+  await bootstrapApplication(AppComponent, appConfig);
+};
+
+initializeApp().catch((error) => console.error(`Failed to initialize the application. ${error.message || error}`));
+```
+
+**Notes**:
+
+- This approach uses fetch to load the Keycloak configuration (config.json) before bootstrapping the Angular application.
+- Make sure that config.json is accessible at runtime and contains the correct structure for Keycloak configuration and initOptions.
+
+For a working example, refer to the [Fetch Config Example Project](projects/examples/fetch_config/README.md).
+
 > **Note About NgModules:**
 > Since Keycloak-Angular v19, the KeycloakAngularModule, KeycloakService, KeycloakBearerInterceptor and KeycloakAuthGuard are deprecated.
 > If your application relies on NgModules, the library still has support for it. See more information on how to configure a [NgModule the application](https://github.com/mauriciovigolo/keycloak-angular/docs/ngmodule.md).
@@ -243,6 +279,7 @@ import {
   provideKeycloak,
   createInterceptorCondition,
   IncludeBearerTokenCondition,
+  includeBearerTokenInterceptor,
   INCLUDE_BEARER_TOKEN_INTERCEPTOR_CONFIG
 } from 'keycloak-angular';
 

package/fesm2022/keycloak-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, NgModule, signal, InjectionToken, inject, effect, Directive, Input, computed, PLATFORM_ID, provideAppInitializer, EnvironmentInjector, runInInjectionContext, makeEnvironmentProviders } from '@angular/core';
+import { Injectable, inject, NgModule, signal, InjectionToken, TemplateRef, ViewContainerRef, effect, Input, Directive, NgZone, computed, PLATFORM_ID, provideAppInitializer, EnvironmentInjector, runInInjectionContext, makeEnvironmentProviders } from '@angular/core';
 import { HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { Subject, from, combineLatest, of, fromEvent, mergeMap as mergeMap$1 } from 'rxjs';
 import { map, mergeMap, debounceTime, takeUntil } from 'rxjs/operators';
@@ -21,7 +21,7 @@ import { CommonModule, isPlatformBrowser } from '@angular/common';
  * will be removed in future versions.
  * Use the new `KEYCLOAK_EVENT_SIGNAL` injection token to listen for the keycloak
  * events.
- * More info: https://github.com/mauriciovigolo/keycloak-angular/docs/migration-guides/v19.md
+ * More info: https://github.com/mauriciovigolo/keycloak-angular/blob/main/docs/migration-guides/v19.md
  */
 var KeycloakEventTypeLegacy;
 (function (KeycloakEventTypeLegacy) {
@@ -77,7 +77,7 @@ var KeycloakEventTypeLegacy;
  *
  * @deprecated Class based guards are deprecated in Keycloak Angular and will be removed in future versions.
  * Use the new `createAuthGuard` function to create a Guard for your application.
- * More info: https://github.com/mauriciovigolo/keycloak-angular/docs/migration-guides/v19.md
+ * More info: https://github.com/mauriciovigolo/keycloak-angular/blob/main/docs/migration-guides/v19.md
  */
 class KeycloakAuthGuard {
     constructor(router, keycloakAngular) {
@@ -119,7 +119,7 @@ class KeycloakAuthGuard {
  *
  * @deprecated This service is deprecated and will be removed in future versions.
  * Use the new `provideKeycloak` function to load Keycloak in an Angular application.
- * More info: https://github.com/mauriciovigolo/keycloak-angular/docs/migration-guides/v19.md
+ * More info: https://github.com/mauriciovigolo/keycloak-angular/blob/main/docs/migration-guides/v19.md
  */
 class KeycloakService {
     constructor() {
@@ -538,10 +538,10 @@ class KeycloakService {
     get keycloakEvents$() {
         return this._keycloakEvents$;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: KeycloakService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: KeycloakService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: KeycloakService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: KeycloakService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: KeycloakService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: KeycloakService, decorators: [{
             type: Injectable
         }] });
 
@@ -560,11 +560,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
  *
  * @deprecated KeycloakBearerInterceptor is deprecated and will be removed in future versions.
  * Use the new functional interceptor such as `includeBearerTokenInterceptor`.
- * More info: https://github.com/mauriciovigolo/keycloak-angular/docs/migration-guides/v19.md
+ * More info: https://github.com/mauriciovigolo/keycloak-angular/blob/main/docs/migration-guides/v19.md
  */
 class KeycloakBearerInterceptor {
-    constructor(keycloak) {
-        this.keycloak = keycloak;
+    constructor() {
+        this.keycloak = inject(KeycloakService);
     }
     /**
      * Calls to update the keycloak token if the request should update the token.
@@ -623,12 +623,12 @@ class KeycloakBearerInterceptor {
             return next.handle(kcReq);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: KeycloakBearerInterceptor, deps: [{ token: KeycloakService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: KeycloakBearerInterceptor }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: KeycloakBearerInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: KeycloakBearerInterceptor }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: KeycloakBearerInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: KeycloakBearerInterceptor, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: KeycloakService }] });
+        }] });
 
 /**
  * @license
@@ -640,12 +640,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 /**
  * @deprecated NgModules are deprecated in Keycloak Angular and will be removed in future versions.
  * Use the new `provideKeycloak` function to load Keycloak in an Angular application.
- * More info: https://github.com/mauriciovigolo/keycloak-angular/docs/migration-guides/v19.md
+ * More info: https://github.com/mauriciovigolo/keycloak-angular/blob/main/docs/migration-guides/v19.md
  */
 class CoreModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: CoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: CoreModule, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: CoreModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: CoreModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CoreModule, providers: [
             KeycloakService,
             {
                 provide: HTTP_INTERCEPTORS,
@@ -654,7 +654,7 @@ class CoreModule {
             }
         ], imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: CoreModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CoreModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -679,14 +679,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
 /**
  * @deprecated NgModules are deprecated in Keycloak Angular and will be removed in future versions.
  * Use the new `provideKeycloak` function to load Keycloak in an Angular application.
- * More info: https://github.com/mauriciovigolo/keycloak-angular/docs/migration-guides/v19.md
+ * More info: https://github.com/mauriciovigolo/keycloak-angular/blob/main/docs/migration-guides/v19.md
  */
 class KeycloakAngularModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: KeycloakAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: KeycloakAngularModule, imports: [CoreModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: KeycloakAngularModule, imports: [CoreModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: KeycloakAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: KeycloakAngularModule, imports: [CoreModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: KeycloakAngularModule, imports: [CoreModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: KeycloakAngularModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: KeycloakAngularModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CoreModule]
@@ -903,10 +903,10 @@ const KEYCLOAK_EVENT_SIGNAL = new InjectionToken('Keycloak Events Signal');
  * ```
  */
 class HasRolesDirective {
-    constructor(templateRef, viewContainer, keycloak) {
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.keycloak = keycloak;
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.viewContainer = inject(ViewContainerRef);
+        this.keycloak = inject(Keycloak);
         /**
          * List of roles to validate against the resource or realm.
          */
@@ -946,15 +946,15 @@ class HasRolesDirective {
         const hasRealmRole = this.checkRealm ? this.roles.some((role) => this.keycloak.hasRealmRole(role)) : false;
         return hasResourceRole || hasRealmRole;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HasRolesDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: Keycloak }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: HasRolesDirective, isStandalone: true, selector: "[kaHasRoles]", inputs: { roles: ["kaHasRoles", "roles"], resource: ["kaHasRolesResource", "resource"], checkRealm: ["kaHasRolesCheckRealm", "checkRealm"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: HasRolesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: HasRolesDirective, isStandalone: true, selector: "[kaHasRoles]", inputs: { roles: ["kaHasRoles", "roles"], resource: ["kaHasRolesResource", "resource"], checkRealm: ["kaHasRolesCheckRealm", "checkRealm"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: HasRolesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: HasRolesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kaHasRoles]'
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: Keycloak }], propDecorators: { roles: [{
+        }], ctorParameters: () => [], propDecorators: { roles: [{
                 type: Input,
                 args: ['kaHasRoles']
             }], resource: [{
@@ -990,8 +990,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
  * if it is a browser context.
  */
 class UserActivityService {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
+    constructor() {
+        this.ngZone = inject(NgZone);
         /**
          * Signal to store the timestamp of the last user activity.
          * The timestamp is represented as the number of milliseconds since epoch.
@@ -1059,12 +1059,12 @@ class UserActivityService {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: UserActivityService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: UserActivityService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserActivityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserActivityService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: UserActivityService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserActivityService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.NgZone }] });
+        }] });
 
 /**
  * @license
@@ -1085,9 +1085,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
  * session timeout and inactivity handling.
  */
 class AutoRefreshTokenService {
-    constructor(keycloak, userActivity) {
-        this.keycloak = keycloak;
-        this.userActivity = userActivity;
+    constructor() {
+        this.keycloak = inject(Keycloak);
+        this.userActivity = inject(UserActivityService);
         this.options = this.defaultOptions;
         this.initialized = false;
         const keycloakSignal = inject(KEYCLOAK_EVENT_SIGNAL);
@@ -1132,12 +1132,12 @@ class AutoRefreshTokenService {
         this.initialized = true;
         this.userActivity.startMonitoring();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AutoRefreshTokenService, deps: [{ token: Keycloak }, { token: UserActivityService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AutoRefreshTokenService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AutoRefreshTokenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AutoRefreshTokenService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AutoRefreshTokenService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AutoRefreshTokenService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: Keycloak }, { type: UserActivityService }] });
+        }], ctorParameters: () => [] });
 
 /**
  * @license
@@ -1383,11 +1383,14 @@ const CUSTOM_BEARER_TOKEN_INTERCEPTOR_CONFIG = new InjectionToken('Include the b
 const customBearerTokenInterceptor = (req, next) => {
     const conditions = inject(CUSTOM_BEARER_TOKEN_INTERCEPTOR_CONFIG) ?? [];
     const keycloak = inject(Keycloak);
-    const matchingCondition = conditions.find(async (condition) => await condition.shouldAddToken(req, next, keycloak));
-    if (!matchingCondition) {
-        return next(req);
-    }
-    return from(conditionallyUpdateToken(req, keycloak, matchingCondition)).pipe(mergeMap$1(() => keycloak.authenticated ? addAuthorizationHeader(req, next, keycloak, matchingCondition) : next(req)));
+    return from(Promise.all(conditions.map(async (condition) => await condition.shouldAddToken(req, next, keycloak)))).pipe(mergeMap$1((evaluatedConditions) => {
+        const matchingConditionIndex = evaluatedConditions.findIndex(Boolean);
+        const matchingCondition = conditions[matchingConditionIndex];
+        if (!matchingCondition) {
+            return next(req);
+        }
+        return from(conditionallyUpdateToken(req, keycloak, matchingCondition)).pipe(mergeMap$1(() => keycloak.authenticated ? addAuthorizationHeader(req, next, keycloak, matchingCondition) : next(req)));
+    }));
 };
 
 /**