@odx/auth 1.0.0-alpha.1 → 1.0.0-rc.1

package/fesm2020/odx-auth.mjs

@@ -1,10 +1,6 @@
-import { OKTA_AUTH, OktaAuthStateService, OktaCallbackComponent, OKTA_CONFIG, OktaAuthModule } from '@okta/okta-angular';
-export { OktaAuthGuard as AuthGuard } from '@okta/okta-angular';
-import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { inject, Injectable, EventEmitter, Directive, Output, HostListener, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, APP_INITIALIZER, NgModule } from '@angular/core';
-import * as i2 from '@odx/angular';
-import { CoreModule, WindowRef } from '@odx/angular';
+import { Injectable, inject, EventEmitter, Directive, Output, HostListener, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, makeEnvironmentProviders, APP_INITIALIZER, NgModule } from '@angular/core';
+import { WindowRef, CoreModule } from '@odx/angular';
 import * as i3 from '@odx/angular/components/area-header';
 import { AreaHeaderModule } from '@odx/angular/components/area-header';
 import * as i8 from '@odx/angular/components/dropdown';
@@ -12,58 +8,167 @@ import { DropdownModule } from '@odx/angular/components/dropdown';
 import * as i9 from '@odx/angular/components/header';
 import { HeaderModule } from '@odx/angular/components/header';
 import { LogoDirective } from '@odx/angular/components/logo';
-import { createModuleConfigTokens, Pure, buildUrl, provideModuleConfig } from '@odx/angular/utils';
-import { map, shareReplay } from 'rxjs';
+import { createModuleConfigTokens, Position, untilDestroyed, isString, buildUrl, provideModuleConfig } from '@odx/angular/utils';
+import { Router } from '@angular/router';
+import { OAuthService, OAuthErrorEvent, provideOAuthClient, OAuthModuleConfig, OAuthStorage } from 'angular-oauth2-oidc';
+import { BehaviorSubject, fromEvent, filter, startWith, share, combineLatest, switchMap, map, distinctUntilChanged, shareReplay, merge, tap, take } from 'rxjs';
 import * as i1 from '@odx/angular/components/loading-spinner';
 import { LoadingSpinnerDirective } from '@odx/angular/components/loading-spinner';
 import * as i1$1 from '@angular/common';
+import { NgIf } from '@angular/common';
+import * as i2 from '@ngrx/component';
 import * as i4 from '@odx/angular/components/avatar';
 import * as i5 from '@odx/angular/components/action-group';
 import * as i6 from '@odx/angular/components/button';
 import * as i7 from '@odx/angular/components/icon';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { Router } from '@angular/router';
-import { OktaAuth } from '@okta/okta-auth-js';
 
-const DEFAULT_AUTH_SCOPES = ['openid', 'profile'];
+class AuthErrorHandler {
+}
+AuthErrorHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AuthErrorHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthErrorHandler });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthErrorHandler, decorators: [{
+            type: Injectable
+        }] });
+class NoopAuthErrorHandler extends AuthErrorHandler {
+    handleError(error) {
+        throw error;
+    }
+}
+NoopAuthErrorHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NoopAuthErrorHandler, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+NoopAuthErrorHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NoopAuthErrorHandler });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NoopAuthErrorHandler, decorators: [{
+            type: Injectable
+        }] });
+
+const DEFAULT_AUTH_SCOPES = ['openid', 'profile', 'email', 'offline_access'];
+const DEFAULT_ISSUERS = {
+    dev: 'https://dev.login.draeger.com/oauth2/default',
+    stage: 'https://test.login.draeger.com/oauth2/default',
+    prod: 'https://login.draeger.com/oauth2/default',
+};
 const { AuthDefaultModuleConfig, AuthModuleConfig, injectAuthModuleConfig } = createModuleConfigTokens('Auth', '@odx/auth', {
     environment: 'prod',
     redirectPath: 'login/callback',
-    disallowedOrigins: [],
+    allowedUrls: [],
+    timeoutFactor: 0.75,
+    maxOfflineTime: 24 * 60 * 60,
+    loadUserProfile: false,
 });
 
+function createInititals(value) {
+    if (!value)
+        return '';
+    const parts = value.trim().split(' ');
+    return parts.reduce((initials, curr, index) => {
+        if (index === 0 || index === parts.length - 1) {
+            initials = `${initials}${curr.charAt(0).toUpperCase()}`;
+        }
+        return initials;
+    }, '');
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function parseIdentityClaims(identityClaims) {
+    return {
+        ...identityClaims,
+        email: identityClaims?.email ?? identityClaims.email_address ?? identityClaims.emails?.[0],
+        initials: createInititals(identityClaims.name),
+    };
+}
+
 class AuthService {
     constructor() {
-        this.auth = inject(OKTA_AUTH);
-        this.authState = inject(OktaAuthStateService);
-        this.isAuthenticated$ = this.authState.authState$.pipe(map(({ isAuthenticated }) => !!isAuthenticated), shareReplay({ refCount: true }));
-        this.user$ = this.authState.authState$.pipe(map(({ idToken }) => idToken?.claims ?? null), shareReplay({ refCount: true }));
+        this.authConfig = injectAuthModuleConfig();
+        this.errorHandler = inject(AuthErrorHandler);
+        this.oauthService = inject(OAuthService);
+        this.router = inject(Router);
+        this.windowRef = inject(WindowRef);
+        this.isInitialized$$ = new BehaviorSubject(false);
+        this.onAccessTokenUpdate$ = fromEvent(this.windowRef.nativeWindow, 'storage').pipe(filter(({ key }) => key === 'access_token' || key === null), startWith(null), share());
+        this.onAuthStateChange$ = combineLatest([this.oauthService.events.pipe(startWith(null)), this.windowRef.isOnline$, this.onAccessTokenUpdate$]);
+        this.isAuthenticated$ = this.isInitialized$$.pipe(filter(Boolean), switchMap(() => this.onAuthStateChange$), map(() => this.isAuthenticated()), distinctUntilChanged(), shareReplay({ refCount: true }));
+        this.identityClaims$ = this.isAuthenticated$.pipe(map(() => this.getIdentityClaims()), shareReplay({ refCount: true }));
+        this.errors$ = this.oauthService.events.pipe(filter((event) => event instanceof OAuthErrorEvent), share());
+        this.subscription = merge(this.errors$.pipe(tap((error) => {
+            this.errorHandler.handleError(error);
+        })), this.windowRef.isOnline$.pipe(tap((isOnline) => {
+            if (isOnline) {
+                this.oauthService.setupAutomaticSilentRefresh();
+            }
+            else {
+                this.oauthService.stopAutomaticRefresh();
+            }
+        }))).subscribe();
     }
-    async signIn() {
-        await this.auth.signInWithRedirect();
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
-    async signOut() {
-        await this.auth.signOut();
+    async initialize(config) {
+        this.oauthService.configure(config);
+        try {
+            await this.oauthService.loadDiscoveryDocument(this.authConfig.discoveryUrl);
+            await this.oauthService.tryLoginCodeFlow();
+            if (this.getRefreshToken() && !this.isAuthenticated()) {
+                await this.oauthService.refreshToken();
+            }
+            this.isInitialized$$.next(true);
+            if (this.authConfig.loadUserProfile && this.oauthService.hasValidAccessToken()) {
+                await this.loadUserProfile();
+            }
+        }
+        catch {
+            // ignore errors
+        }
+        if (this.oauthService.hasValidAccessToken()) {
+            await this.routeToRequestedUrl();
+        }
+    }
+    signIn(url) {
+        this.oauthService.initCodeFlow(url);
+    }
+    signOut() {
+        this.oauthService.logOut(!this.getAccessToken());
+    }
+    async loadUserProfile() {
+        await this.oauthService.loadUserProfile();
     }
     getAccessToken() {
-        return this.auth.getAccessToken() ?? null;
+        return this.oauthService.getAccessToken() ?? null;
     }
     getRefreshToken() {
-        return this.auth.getRefreshToken() ?? null;
+        return this.oauthService.getRefreshToken() ?? null;
+    }
+    getIdToken() {
+        return this.oauthService.getIdToken() ?? null;
+    }
+    getIdentityClaims() {
+        return this.getIdToken() ? parseIdentityClaims(this.oauthService.getIdentityClaims()) : null;
+    }
+    isAuthenticated() {
+        if (this.windowRef.isOnline()) {
+            return this.oauthService.hasValidAccessToken() && this.oauthService.hasValidIdToken();
+        }
+        return this.hasValidOfflineToken();
+    }
+    isAuthorized(authorizedHandler) {
+        return this.isAuthenticated() && (authorizedHandler?.(this.getIdentityClaims(), this) ?? true);
     }
-    getAuthHeader() {
-        return { Authorization: `Bearer ${this.getAccessToken()}` };
+    async routeToRequestedUrl() {
+        if (this.oauthService.state) {
+            await this.router.navigateByUrl(decodeURIComponent(this.oauthService.state));
+        }
     }
-    hasAnyGroups$(groups) {
-        return this.authState.hasAnyGroups(groups);
+    hasValidOfflineToken() {
+        const issuedAt = this.getIdentityClaims()?.iat ?? 0;
+        return Date.now() - issuedAt * 1000 <= this.authConfig.maxOfflineTime * 1000;
     }
 }
-AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AuthService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AuthService, decorators: [{
+AuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: function () { return []; } });
 
 class SignInDirective {
     constructor() {
@@ -72,18 +177,18 @@ class SignInDirective {
         // eslint-disable-next-line @angular-eslint/no-output-rename
         this.afterSignIn = new EventEmitter();
     }
-    ngOnInit() {
+    ngAfterViewInit() {
         this.loadingSpinnerDirective.autoColor = true;
     }
     async signIn() {
         this.loadingSpinnerDirective.isLoading = true;
-        await this.authService.signIn();
+        this.authService.signIn();
         this.afterSignIn.emit();
     }
 }
-SignInDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SignInDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SignInDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: SignInDirective, isStandalone: true, selector: "[odxButton][odxAuthSignIn]", outputs: { afterSignIn: "odxAuthSignIn" }, host: { listeners: { "click": "signIn()" } }, hostDirectives: [{ directive: i1.LoadingSpinnerDirective }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SignInDirective, decorators: [{
+SignInDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SignInDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SignInDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SignInDirective, isStandalone: true, selector: "[odxButton][odxAuthSignIn]", outputs: { afterSignIn: "odxAuthSignIn" }, host: { listeners: { "click": "signIn()" } }, hostDirectives: [{ directive: i1.LoadingSpinnerDirective }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SignInDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -105,18 +210,18 @@ class SignOutDirective {
         // eslint-disable-next-line @angular-eslint/no-output-rename
         this.afterSignOut = new EventEmitter();
     }
-    ngOnInit() {
+    ngAfterViewInit() {
         this.loadingSpinnerDirective.autoColor = true;
     }
     async signIn() {
         this.loadingSpinnerDirective.isLoading = true;
-        await this.authService.signOut();
+        this.authService.signOut();
         this.afterSignOut.emit();
     }
 }
-SignOutDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SignOutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SignOutDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: SignOutDirective, isStandalone: true, selector: "[odxButton][odxAuthSignOut]", outputs: { afterSignOut: "odxAuthSignOut" }, host: { listeners: { "click": "signIn()" } }, hostDirectives: [{ directive: i1.LoadingSpinnerDirective }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SignOutDirective, decorators: [{
+SignOutDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SignOutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SignOutDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SignOutDirective, isStandalone: true, selector: "[odxButton][odxAuthSignOut]", outputs: { afterSignOut: "odxAuthSignOut" }, host: { listeners: { "click": "signIn()" } }, hostDirectives: [{ directive: i1.LoadingSpinnerDirective }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SignOutDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -131,137 +236,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 args: ['click']
             }] } });
 
-function getUserInitials(user) {
-    if (!user?.name)
-        return '';
-    const names = user.name.trim().split(' ');
-    return names.reduce((initials, curr, index) => {
-        if (index === 0 || index === names.length - 1) {
-            initials = `${initials}${curr.charAt(0).toUpperCase()}`;
-        }
-        return initials;
-    }, '');
-}
-
-function resolveIssuer(environment, issuerOverride) {
-    if (issuerOverride)
-        return issuerOverride;
-    switch (environment) {
-        case 'dev':
-            return 'https://dev.login.draeger.com/oauth2/default';
-        case 'stage':
-            return 'https://test.login.draeger.com/oauth2/default';
-        default:
-            return 'https://login.draeger.com/oauth2/default';
-    }
-}
-
 class AuthComponent {
     constructor() {
-        this.config = injectAuthModuleConfig();
         this.authService = inject(AuthService);
+        this.dropdownOptions = {
+            position: Position.BOTTOM_END,
+            enableFallback: false,
+            containerClass: 'odx-auth-user-profile',
+        };
         this.signInButtonText = 'Sign in';
         this.signOutButtonText = 'Sign out';
     }
-    getInitials(user) {
-        return getUserInitials(user);
-    }
 }
-AuthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AuthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: AuthComponent, isStandalone: true, selector: "odx-auth", inputs: { signInButtonText: "signInButtonText", signOutButtonText: "signOutButtonText" }, ngImport: i0, template: "<odx-action-group *odxLet=\"authService.user$ | async as user\">\n  <ng-template [ngIf]=\"authService.isAuthenticated$ | async\" [ngIfElse]=\"notAuthenticated\">\n    <button odxButton odxHeaderAvatar [odxDropdown]=\"userProfileMenu\">\n      <odx-avatar>\n        {{ getInitials(user) }}\n      </odx-avatar>\n    </button>\n  </ng-template>\n  <ng-template #notAuthenticated>\n    <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"primary\">\n      <odx-icon name=\"user\" alignLeft></odx-icon>\n      {{ signInButtonText }}\n    </button>\n  </ng-template>\n  <ng-template #userProfileMenu>\n    <odx-area-header class=\"odx-padding-x-12\" size=\"small\">\n      <odx-avatar>\n        {{ getInitials(user) }}\n      </odx-avatar>\n      <h2 class=\"odx-title\">{{ user?.name }}</h2>\n      <h5 class=\"odx-subtitle\">{{ user?.email_address }}</h5>\n    </odx-area-header>\n    <ng-content></ng-content>\n    <div class=\"odx-margin-top-12\" odxLayout=\"flex vertical-center\">\n      <odx-logo odxLayout=\"auto\" class=\"odx-margin-left-12 odx-margin-right-auto\"></odx-logo>\n      <button odxButton odxAuthSignOut variant=\"ghost\">\n        {{ signOutButtonText }}\n        <odx-icon name=\"arrow-right\" alignRight></odx-icon>\n      </button>\n    </div>\n  </ng-template>\n</odx-action-group>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: i2.LetDirective, selector: "ng-template[odxLet]", inputs: ["odxLet"] }, { kind: "ngmodule", type: AreaHeaderModule }, { kind: "component", type: i3.AreaHeaderComponent, selector: "odx-area-header", inputs: ["size"] }, { kind: "component", type: i4.AvatarComponent, selector: "odx-avatar", inputs: ["size", "variant"] }, { kind: "component", type: i5.ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: i7.IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: i8.DropdownDirective, selector: "[odxDropdown]", inputs: ["odxDropdown", "odxDropdownDisabled", "odxDropdownShowLoader", "odxDropdownOptions", "odxDropdownReferenceElement", "odxDropdownTriggerElement", "odxDropdownHost", "odxDropdownOpenTrigger", "odxDropdownCloseTrigger"], outputs: ["odxDropdownBeforeOpen", "odxDropdownAfterOpen", "odxDropdownBeforeClose", "odxDropdownAfterClose"], exportAs: ["odxDropdown"] }, { kind: "ngmodule", type: HeaderModule }, { kind: "directive", type: i9.HeaderAvatarDirective, selector: "button[odxButton][odxHeaderAvatar]" }, { kind: "directive", type: LogoDirective, selector: "odx-logo", inputs: ["size", "variant"] }, { kind: "directive", type: SignInDirective, selector: "[odxButton][odxAuthSignIn]", outputs: ["odxAuthSignIn"] }, { kind: "directive", type: SignOutDirective, selector: "[odxButton][odxAuthSignOut]", outputs: ["odxAuthSignOut"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-__decorate([
-    Pure,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", String)
-], AuthComponent.prototype, "getInitials", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AuthComponent, decorators: [{
+AuthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AuthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: AuthComponent, isStandalone: true, selector: "odx-auth", inputs: { signInButtonText: "signInButtonText", signOutButtonText: "signOutButtonText" }, ngImport: i0, template: "<odx-action-group *ngrxLet=\"{ idClaims: authService.identityClaims$, isAuthenticated: authService.isAuthenticated$ } as vm\">\n  <ng-template [ngIf]=\"vm.isAuthenticated\" [ngIfElse]=\"notAuthenticated\">\n    <button odxButton odxHeaderAvatar [odxDropdown]=\"userProfileMenu\" [odxDropdownOptions]=\"dropdownOptions\" data-testid=\"odx-auth-user-profile-button\">\n      <ng-template [ngTemplateOutlet]=\"userAvatar\"></ng-template>\n    </button>\n    <ng-template #userProfileMenu>\n      <odx-area-header class=\"odx-padding-x-12\" size=\"small\">\n        <ng-template [ngTemplateOutlet]=\"userAvatar\" ngProjectAs=\"odx-avatar\"></ng-template>\n        {{ vm.idClaims?.name }}\n        <odx-area-header-subtitle>\n          {{ vm.idClaims?.email }}\n        </odx-area-header-subtitle>\n      </odx-area-header>\n      <ng-content></ng-content>\n      <div class=\"odx-margin-top-12\" odxLayout=\"flex vertical-center\">\n        <odx-logo odxLayout=\"auto\" class=\"odx-margin-left-12 odx-margin-right-auto\"></odx-logo>\n        <button odxButton odxAuthSignOut variant=\"ghost\" data-testid=\"odx-auth-sign-out-button\">\n          {{ signOutButtonText }}\n          <odx-icon name=\"arrow-right\" alignRight></odx-icon>\n        </button>\n      </div>\n    </ng-template>\n  </ng-template>\n  <ng-template #notAuthenticated>\n    <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"primary\" data-testid=\"odx-auth-sign-in-button\">\n      <odx-icon name=\"user\" alignLeft></odx-icon>\n      {{ signInButtonText }}\n    </button>\n  </ng-template>\n  <ng-template #userAvatar>\n    <odx-avatar class=\"odx-auth-user-avatar\">\n      {{ vm.idClaims?.initials ?? '' }}\n    </odx-avatar>\n  </ng-template>\n</odx-action-group>\n", styles: [".odx-auth-user-profile .odx-dropdown__inner>.odx-area-header{max-width:max(360px,25vw);min-width:296px}\n"], dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: AreaHeaderModule }, { kind: "component", type: i3.AreaHeaderComponent, selector: "odx-area-header", inputs: ["size"] }, { kind: "directive", type: i3.AreaHeaderSubtitleDirective, selector: "odx-area-header-subtitle" }, { kind: "component", type: i4.AvatarComponent, selector: "odx-avatar", inputs: ["size", "variant"] }, { kind: "component", type: i5.ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: i7.IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: i8.DropdownDirective, selector: "[odxDropdown]", inputs: ["odxDropdown", "odxDropdownDisabled", "odxDropdownShowLoader", "odxDropdownOptions", "odxDropdownReferenceElement", "odxDropdownTriggerElement", "odxDropdownHost", "odxDropdownOpenTrigger", "odxDropdownCloseTrigger"], outputs: ["odxDropdownBeforeOpen", "odxDropdownAfterOpen", "odxDropdownBeforeClose", "odxDropdownAfterClose"], exportAs: ["odxDropdown"] }, { kind: "ngmodule", type: HeaderModule }, { kind: "directive", type: i9.HeaderAvatarDirective, selector: "button[odxButton][odxHeaderAvatar]" }, { kind: "directive", type: LogoDirective, selector: "odx-logo", inputs: ["size", "variant"] }, { kind: "directive", type: SignInDirective, selector: "[odxButton][odxAuthSignIn]", outputs: ["odxAuthSignIn"] }, { kind: "directive", type: SignOutDirective, selector: "[odxButton][odxAuthSignOut]", outputs: ["odxAuthSignOut"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'odx-auth', imports: [CoreModule, AreaHeaderModule, DropdownModule, HeaderModule, LogoDirective, SignInDirective, SignOutDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<odx-action-group *odxLet=\"authService.user$ | async as user\">\n  <ng-template [ngIf]=\"authService.isAuthenticated$ | async\" [ngIfElse]=\"notAuthenticated\">\n    <button odxButton odxHeaderAvatar [odxDropdown]=\"userProfileMenu\">\n      <odx-avatar>\n        {{ getInitials(user) }}\n      </odx-avatar>\n    </button>\n  </ng-template>\n  <ng-template #notAuthenticated>\n    <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"primary\">\n      <odx-icon name=\"user\" alignLeft></odx-icon>\n      {{ signInButtonText }}\n    </button>\n  </ng-template>\n  <ng-template #userProfileMenu>\n    <odx-area-header class=\"odx-padding-x-12\" size=\"small\">\n      <odx-avatar>\n        {{ getInitials(user) }}\n      </odx-avatar>\n      <h2 class=\"odx-title\">{{ user?.name }}</h2>\n      <h5 class=\"odx-subtitle\">{{ user?.email_address }}</h5>\n    </odx-area-header>\n    <ng-content></ng-content>\n    <div class=\"odx-margin-top-12\" odxLayout=\"flex vertical-center\">\n      <odx-logo odxLayout=\"auto\" class=\"odx-margin-left-12 odx-margin-right-auto\"></odx-logo>\n      <button odxButton odxAuthSignOut variant=\"ghost\">\n        {{ signOutButtonText }}\n        <odx-icon name=\"arrow-right\" alignRight></odx-icon>\n      </button>\n    </div>\n  </ng-template>\n</odx-action-group>\n" }]
+            args: [{ standalone: true, selector: 'odx-auth', imports: [CoreModule, AreaHeaderModule, DropdownModule, HeaderModule, LogoDirective, SignInDirective, SignOutDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<odx-action-group *ngrxLet=\"{ idClaims: authService.identityClaims$, isAuthenticated: authService.isAuthenticated$ } as vm\">\n  <ng-template [ngIf]=\"vm.isAuthenticated\" [ngIfElse]=\"notAuthenticated\">\n    <button odxButton odxHeaderAvatar [odxDropdown]=\"userProfileMenu\" [odxDropdownOptions]=\"dropdownOptions\" data-testid=\"odx-auth-user-profile-button\">\n      <ng-template [ngTemplateOutlet]=\"userAvatar\"></ng-template>\n    </button>\n    <ng-template #userProfileMenu>\n      <odx-area-header class=\"odx-padding-x-12\" size=\"small\">\n        <ng-template [ngTemplateOutlet]=\"userAvatar\" ngProjectAs=\"odx-avatar\"></ng-template>\n        {{ vm.idClaims?.name }}\n        <odx-area-header-subtitle>\n          {{ vm.idClaims?.email }}\n        </odx-area-header-subtitle>\n      </odx-area-header>\n      <ng-content></ng-content>\n      <div class=\"odx-margin-top-12\" odxLayout=\"flex vertical-center\">\n        <odx-logo odxLayout=\"auto\" class=\"odx-margin-left-12 odx-margin-right-auto\"></odx-logo>\n        <button odxButton odxAuthSignOut variant=\"ghost\" data-testid=\"odx-auth-sign-out-button\">\n          {{ signOutButtonText }}\n          <odx-icon name=\"arrow-right\" alignRight></odx-icon>\n        </button>\n      </div>\n    </ng-template>\n  </ng-template>\n  <ng-template #notAuthenticated>\n    <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"primary\" data-testid=\"odx-auth-sign-in-button\">\n      <odx-icon name=\"user\" alignLeft></odx-icon>\n      {{ signInButtonText }}\n    </button>\n  </ng-template>\n  <ng-template #userAvatar>\n    <odx-avatar class=\"odx-auth-user-avatar\">\n      {{ vm.idClaims?.initials ?? '' }}\n    </odx-avatar>\n  </ng-template>\n</odx-action-group>\n", styles: [".odx-auth-user-profile .odx-dropdown__inner>.odx-area-header{max-width:max(360px,25vw);min-width:296px}\n"] }]
         }], propDecorators: { signInButtonText: [{
                 type: Input
             }], signOutButtonText: [{
                 type: Input
-            }], getInitials: [] } });
+            }] } });
 
-class AuthInterceptor {
+class AuthDirective {
     constructor() {
-        this.config = injectAuthModuleConfig();
         this.authService = inject(AuthService);
+        this.ngIfDirective = inject(NgIf, { host: true });
+        this.takeUntilDestroyed = untilDestroyed();
+        this.authorizationHandler = null;
     }
-    intercept(request, next) {
-        return next.handle(this.addAuthHeader(request));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    set elseTemplate(value) {
+        this.ngIfDirective.ngIfElse = value;
     }
-    addAuthHeader(request) {
-        if (!this.config.disallowedOrigins.find((origin) => !!request.url.match(origin))) {
-            return request.clone({ setHeaders: this.authService.getAuthHeader() });
-        }
-        return request;
+    ngAfterViewInit() {
+        this.authService.isAuthenticated$.pipe(this.takeUntilDestroyed()).subscribe(() => {
+            const handler = isString(this.authorizationHandler) ? null : this.authorizationHandler;
+            this.ngIfDirective.ngIf = this.authService.isAuthorized(handler);
+        });
     }
 }
-AuthInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AuthInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AuthInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AuthInterceptor });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AuthInterceptor, decorators: [{
-            type: Injectable
-        }] });
+AuthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AuthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: AuthDirective, isStandalone: true, selector: "ng-template[odxAuth]", inputs: { authorizationHandler: ["odxAuth", "authorizationHandler"], elseTemplate: ["odxAuthElse", "elseTemplate"] }, hostDirectives: [{ directive: i1$1.NgIf }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[odxAuth]',
+                    hostDirectives: [NgIf],
+                }]
+        }], propDecorators: { authorizationHandler: [{
+                type: Input,
+                args: ['odxAuth']
+            }], elseTemplate: [{
+                type: Input,
+                args: ['odxAuthElse']
+            }] } });
 
-function registerAuthCallbackRoute() {
-    const { redirectPath } = injectAuthModuleConfig();
-    const router = inject(Router);
-    return () => {
-        router.config.unshift({ path: redirectPath, component: OktaCallbackComponent });
+function authGuard(authorizedHandler) {
+    return (_, state) => {
+        const authService = inject(AuthService);
+        const router = inject(Router);
+        const isAuthorized = () => authorizedHandler?.(authService.getIdentityClaims(), router, authService);
+        return authService.isAuthenticated$.pipe(map((isAuthenticated) => {
+            if (!isAuthenticated) {
+                authService.signIn(state.url);
+            }
+            return isAuthorized() ?? isAuthenticated;
+        }), take(1));
+    };
+}
+
+function configureInterceptor() {
+    const { allowedUrls } = injectAuthModuleConfig();
+    return {
+        resourceServer: {
+            customUrlValidation: (url) => allowedUrls.some((allowedUrl) => !!url.match(allowedUrl)),
+            sendAccessToken: true,
+        },
     };
 }
 function initalizeAuthConfig() {
-    const { clientId, scopes, redirectPath, environment, postLogoutRedirectPath, issuerOverride } = injectAuthModuleConfig();
+    const { clientId, scopes, redirectPath, environment, postLogoutRedirectUrl, issuer, timeoutFactor, discoveryUrl } = injectAuthModuleConfig();
+    const authService = inject(AuthService);
     const origin = inject(WindowRef).getOrigin();
-    const postLogoutRedirectUri = postLogoutRedirectPath ? buildUrl(origin, postLogoutRedirectPath) : undefined;
+    const scope = Array.from(new Set(DEFAULT_AUTH_SCOPES.concat(scopes ?? []))).join(' ');
+    return () => authService.initialize({
+        clientId,
+        issuer: issuer ?? DEFAULT_ISSUERS[environment],
+        scope,
+        redirectUri: buildUrl(origin, redirectPath),
+        postLogoutRedirectUri: postLogoutRedirectUrl,
+        preserveRequestedRoute: true,
+        strictDiscoveryDocumentValidation: !discoveryUrl,
+        responseType: 'code',
+        showDebugInformation: environment === 'dev',
+        timeoutFactor,
+    });
+}
+function provideAuthErrorHandler(errorHandler) {
     return {
-        oktaAuth: new OktaAuth({
-            issuer: resolveIssuer(environment, issuerOverride),
-            clientId,
-            redirectUri: buildUrl(origin, redirectPath),
-            scopes: Array.from(new Set(DEFAULT_AUTH_SCOPES.concat(scopes ?? []))),
-            pkce: true,
-            devMode: environment === 'dev',
-            postLogoutRedirectUri,
-        }),
+        provide: AuthErrorHandler,
+        useClass: errorHandler,
     };
 }
-var authProviders = [
-    {
-        provide: APP_INITIALIZER,
-        useFactory: registerAuthCallbackRoute,
-        multi: true,
-    },
-    {
-        provide: OKTA_CONFIG,
-        useFactory: initalizeAuthConfig,
-    },
-    {
-        provide: HTTP_INTERCEPTORS,
-        useClass: AuthInterceptor,
-        multi: true,
-    },
-];
+function provideAuth(config) {
+    return makeEnvironmentProviders([
+        provideModuleConfig(AuthModuleConfig, config),
+        provideOAuthClient(),
+        provideAuthErrorHandler(NoopAuthErrorHandler),
+        {
+            provide: OAuthModuleConfig,
+            useFactory: configureInterceptor,
+        },
+        {
+            provide: APP_INITIALIZER,
+            useFactory: initalizeAuthConfig,
+            multi: true,
+        },
+        {
+            provide: OAuthStorage,
+            useFactory: () => inject(WindowRef).nativeWindow.localStorage,
+        },
+    ]);
+}
 
-const modules = [AuthComponent, SignInDirective, SignOutDirective];
+const modules = [AuthComponent, AuthDirective, SignInDirective, SignOutDirective];
 class AuthModule {
     static forRoot(config) {
         return {
             ngModule: AuthModule,
-            providers: [provideModuleConfig(AuthModuleConfig, config), ...authProviders],
+            providers: [provideAuth(config)],
         };
     }
 }
-AuthModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AuthModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: AuthModule, imports: [AuthComponent, SignInDirective, SignOutDirective], exports: [OktaAuthModule, AuthComponent, SignInDirective, SignOutDirective] });
-AuthModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AuthModule, imports: [AuthComponent, OktaAuthModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AuthModule, decorators: [{
+AuthModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AuthModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: AuthModule, imports: [AuthComponent, AuthDirective, SignInDirective, SignOutDirective], exports: [AuthComponent, AuthDirective, SignInDirective, SignOutDirective] });
+AuthModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthModule, imports: [AuthComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: AuthModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...modules],
-                    exports: [OktaAuthModule, ...modules],
+                    exports: [...modules],
                 }]
         }] });
 
@@ -269,5 +386,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthComponent, AuthDefaultModuleConfig, AuthInterceptor, AuthModule, AuthModuleConfig, AuthService, DEFAULT_AUTH_SCOPES, SignInDirective, SignOutDirective, getUserInitials, initalizeAuthConfig, injectAuthModuleConfig, registerAuthCallbackRoute, resolveIssuer };
+export { AuthComponent, AuthDefaultModuleConfig, AuthDirective, AuthErrorHandler, AuthModule, AuthModuleConfig, AuthService, DEFAULT_AUTH_SCOPES, DEFAULT_ISSUERS, NoopAuthErrorHandler, SignInDirective, SignOutDirective, authGuard, configureInterceptor, createInititals, initalizeAuthConfig, injectAuthModuleConfig, parseIdentityClaims, provideAuth, provideAuthErrorHandler };
 //# sourceMappingURL=odx-auth.mjs.map