ngx-oauth 5.0.0 → 7.0.0

package/fesm2022/ngx-oauth.mjs

@@ -0,0 +1,731 @@
+import * as i3 from '@angular/common/http';
+import { HttpHeaders, HttpClient, HttpBackend, HttpParams } from '@angular/common/http';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, Component, ViewEncapsulation, Input, Output, ContentChild, HostListener } from '@angular/core';
+import { BehaviorSubject, distinctUntilChanged, of, switchMap, ReplaySubject, noop, from, throwError, firstValueFrom, take } from 'rxjs';
+import { shareReplay, map, catchError, filter, tap, switchMap as switchMap$1, delay, concatMap } from 'rxjs/operators';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+const HEADER_APPLICATION = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' });
+var OAuthType;
+(function (OAuthType) {
+    OAuthType["RESOURCE"] = "password";
+    OAuthType["AUTHORIZATION_CODE"] = "code";
+    OAuthType["IMPLICIT"] = "token";
+    OAuthType["CLIENT_CREDENTIAL"] = "client_credentials";
+})(OAuthType || (OAuthType = {}));
+var OAuthStatus;
+(function (OAuthStatus) {
+    OAuthStatus["NOT_AUTHORIZED"] = "NOT_AUTHORIZED";
+    OAuthStatus["AUTHORIZED"] = "AUTHORIZED";
+    OAuthStatus["DENIED"] = "DENIED";
+})(OAuthStatus || (OAuthStatus = {}));
+
+const OAUTH_CONFIG = new InjectionToken('OAuthConfig');
+class OAuthConfig {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthConfig, providedIn: 'root', useFactory: () => inject(OAUTH_CONFIG).reduce((p, c) => ({ ...p, ...c }), defaultOAuthConfig) }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthConfig, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: () => inject(OAUTH_CONFIG).reduce((p, c) => ({ ...p, ...c }), defaultOAuthConfig)
+                }]
+        }] });
+const provideOAuthConfig = (config = {}) => ({
+    provide: OAUTH_CONFIG,
+    useValue: config,
+    multi: true
+});
+const provideOAuthConfigFactory = (factory, deps) => ({
+    provide: OAUTH_CONFIG,
+    useFactory: factory,
+    deps: deps,
+    multi: true
+});
+const defaultOAuthConfig = {
+    storage: globalThis.localStorage,
+    location: globalThis.location,
+    storageKey: 'token',
+    ignorePaths: []
+};
+
+class OAuthHttpClient extends HttpClient {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthHttpClient, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthHttpClient, providedIn: 'root', useFactory: () => new HttpClient(inject(HttpBackend)) }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthHttpClient, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: () => new HttpClient(inject(HttpBackend)),
+                }]
+        }] });
+
+const isExpiredToken = (token) => token && token.expires && Date.now() > token.expires || false;
+class OAuthTokenService {
+    #token$;
+    constructor(authConfig, http) {
+        this.authConfig = authConfig;
+        this.http = http;
+        this.#token$ = new BehaviorSubject(this.saved);
+        this.token$ = this.#token$.pipe(distinctUntilChanged((p, c) => JSON.stringify(p || null) === JSON.stringify(c || null)), shareReplay(1), switchMap(token => !isExpiredToken(token) && of(token) || this.refreshToken(token)));
+        this.type$ = this.token$.pipe(map(token => token?.type), shareReplay(1));
+        this.accessToken$ = this.token$.pipe(map(token => token?.access_token), shareReplay(1));
+    }
+    get token() {
+        return this.#token$.value;
+    }
+    set token(token) {
+        const expiresIn = Number(token.expires_in) || 0;
+        const result = {
+            ...token,
+            ...expiresIn && { expires: Date.now() + expiresIn * 1000 } || {}
+        };
+        this.saved = result;
+        this.#token$.next(result);
+    }
+    get saved() {
+        const { storageKey, storage } = this.authConfig;
+        return storageKey && storage && storage[storageKey] && JSON.parse(storage[storageKey]) || {};
+    }
+    set saved(token) {
+        const { storageKey, storage } = this.authConfig;
+        if (storage && storageKey) {
+            if (token) {
+                storage[storageKey] = JSON.stringify(token);
+            }
+            else {
+                delete storage[storageKey];
+            }
+        }
+    }
+    refreshToken(token) {
+        const { tokenPath, clientId, clientSecret, scope } = this.authConfig.config;
+        const { refresh_token } = token || {};
+        return tokenPath && refresh_token && this.http.post(tokenPath, new HttpParams({
+            fromObject: {
+                client_id: clientId,
+                ...clientSecret && { client_secret: clientSecret } || {},
+                grant_type: 'refresh_token',
+                refresh_token,
+                ...scope && { scope } || {},
+            }
+        }), {
+            headers: HEADER_APPLICATION
+        }).pipe(catchError(() => {
+            this.token = {};
+            return of(this.token);
+        }), map(token => {
+            this.token = {
+                ...this.token,
+                ...token
+            };
+            return this.token;
+        })) || of(token);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthTokenService, deps: [{ token: OAuthConfig }, { token: OAuthHttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthTokenService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthTokenService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: OAuthConfig }, { type: OAuthHttpClient }] });
+
+const arrToString = (buf) => buf.reduce((s, b) => s + String.fromCharCode(b), '');
+const base64url = (str) => btoa(str)
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '');
+const randomString = (length = 48) => {
+    const buff = arrToString(crypto.getRandomValues(new Uint8Array(length * 2)));
+    return base64url(buff).substring(0, length);
+};
+const pkce = async (value) => {
+    const buff = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(value));
+    return base64url(arrToString(new Uint8Array(buff)));
+};
+const parseOauthUri = (hash) => {
+    const regex = /([^&=]+)=([^&]*)/g;
+    const params = {};
+    let m;
+    // tslint:disable-next-line:no-conditional-assignment
+    while ((m = regex.exec(hash)) !== null) {
+        params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
+    }
+    return Object.keys(params).length && params || {};
+};
+const jwt = (token) => JSON.parse(atob(token.split('.')[1]));
+class OAuthService {
+    get storageKey() {
+        return this.authConfig.storageKey;
+    }
+    set storageKey(storageKey) {
+        if (storageKey) {
+            this.authConfig.storageKey = storageKey;
+            this.tokenService.token = this.tokenService.saved;
+        }
+    }
+    get token() {
+        return this.tokenService.token;
+    }
+    set token(token) {
+        this.tokenService.token = token;
+    }
+    get config() {
+        return this.authConfig.config;
+    }
+    set config(config) {
+        if (config) {
+            this.authConfig.config = {
+                ...this.authConfig.config,
+                ...config
+            };
+        }
+    }
+    constructor(authConfig, tokenService, http, locationService) {
+        this.authConfig = authConfig;
+        this.tokenService = tokenService;
+        this.http = http;
+        this.locationService = locationService;
+        this.state$ = new ReplaySubject(1);
+        this.config$ = of(this.config).pipe(filter(Boolean), filter(config => !!config?.clientId), map(config => config), switchMap$1(config => !config.issuerPath && of(config) || this.http.get(`${config.issuerPath}/.well-known/openid-configuration`).pipe(tap(v => this.config = {
+            ...v.authorization_endpoint && { authorizePath: v.authorization_endpoint } || {},
+            ...v.token_endpoint && { tokenPath: v.token_endpoint } || {},
+            ...v.revocation_endpoint && { revokePath: v.revocation_endpoint } || {},
+            ...v.code_challenge_methods_supported && { pkce: v.code_challenge_methods_supported.indexOf('S256') > -1 } || {},
+            ...v.userinfo_endpoint && { userPath: v.userinfo_endpoint } || {},
+            ...v.introspection_endpoint && { introspectionPath: v.introspection_endpoint } || {},
+            ...v.end_session_endpoint && { logoutPath: v.end_session_endpoint } || {},
+            ...{ scope: config.scope || 'openid' }
+        }), map(() => this.config))), shareReplay(1));
+        this.token$ = this.config$.pipe(tap(config => {
+            const { hash, search, origin, pathname } = this.authConfig.location || {};
+            const isImplicitRedirect = hash && /(access_token=)|(error=)/.test(hash);
+            const isAuthCodeRedirect = search && /(code=)|(error=)/.test(search) || hash && /(code=)|(error=)/.test(hash);
+            if (isImplicitRedirect) {
+                const parameters = parseOauthUri(hash.substring(1));
+                this.token = {
+                    ...parameters,
+                    type: OAuthType.IMPLICIT,
+                };
+                this.checkResponse(this.token, parameters);
+            }
+            else if (isAuthCodeRedirect) {
+                const parameters = parseOauthUri(search && search.substring(1) || hash && hash.substring(1) || '');
+                if (!this.checkResponse(this.token, parameters)) {
+                    this.token = parameters;
+                }
+                else {
+                    const newParametersString = this.getCleanedUnSearchParameters();
+                    const { clientId, clientSecret, tokenPath, scope } = config;
+                    const { codeVerifier } = this.token || {}; //should be set by authorizationUrl construction
+                    this.http.post(tokenPath, new HttpParams({
+                        fromObject: {
+                            code: parameters?.['code'],
+                            client_id: clientId,
+                            ...clientSecret && { client_secret: clientSecret } || {},
+                            redirect_uri: `${origin}${pathname}`,
+                            grant_type: 'authorization_code',
+                            ...scope && { scope } || {},
+                            ...codeVerifier && { code_verifier: codeVerifier } || {}
+                        }
+                    }), { headers: HEADER_APPLICATION }).pipe().subscribe(token => {
+                        this.token = {
+                            ...token,
+                            type: OAuthType.AUTHORIZATION_CODE
+                        };
+                        this.locationService.replaceState(`${pathname}${newParametersString}`);
+                    });
+                }
+            }
+        }), switchMap$1(() => this.tokenService.token$), shareReplay(1));
+        this.status$ = this.token$.pipe(map(token => token.access_token && OAuthStatus.AUTHORIZED || token.error && OAuthStatus.DENIED || OAuthStatus.NOT_AUTHORIZED), shareReplay(1));
+        this.userInfo$ = this.status$.pipe(filter(s => s === OAuthStatus.AUTHORIZED), map(() => this.config.userPath), filter(Boolean), switchMap$1(path => this.getUserInfo(path)), shareReplay(1));
+        this.type$ = this.tokenService.type$;
+        this.ignorePaths = this.authConfig.ignorePaths || [];
+    }
+    async login(parameters) {
+        if (!!parameters && parameters.password) {
+            await this.resourceLogin(parameters);
+        }
+        else if (!!parameters && parameters.redirectUri && parameters.responseType) {
+            await this.toAuthorizationUrl(parameters);
+        }
+        else {
+            await this.clientCredentialLogin();
+        }
+    }
+    logout(useLogoutUrl) {
+        this.revoke();
+        this.token = {};
+        const { logoutPath, logoutRedirectUri } = this.authConfig.config;
+        if (useLogoutUrl && logoutPath) {
+            const { origin, pathname } = this.authConfig.location || {};
+            const currentPath = `${origin}${pathname}`;
+            this.authConfig.location?.replace(`${logoutPath}?post_logout_redirect_uri=${logoutRedirectUri || currentPath}`);
+        }
+    }
+    getUserInfo(path) {
+        const { userPath } = this.config;
+        return this.http.get(path || userPath);
+    }
+    revoke() {
+        const { revokePath, clientId, clientSecret } = this.authConfig.config;
+        if (revokePath) {
+            const { access_token, refresh_token } = this.token || {};
+            const toRevoke = [];
+            if (access_token) {
+                toRevoke.push({
+                    ...clientId && { client_id: clientId } || {},
+                    ...clientSecret && { client_secret: clientSecret } || {},
+                    token: access_token,
+                    token_type_hint: 'access_token'
+                });
+            }
+            if (refresh_token) {
+                toRevoke.push({
+                    ...clientId && { client_id: clientId } || {},
+                    ...clientSecret && { client_secret: clientSecret } || {},
+                    token: refresh_token,
+                    token_type_hint: 'refresh_token'
+                });
+            }
+            from(toRevoke).pipe(concatMap(o => of(o).pipe(delay(300))), // space request to avoid cancellation
+            switchMap$1(o => this.http.post(revokePath, new HttpParams({ fromObject: o })))).subscribe(noop);
+        }
+    }
+    clientCredentialLogin() {
+        const { clientId, clientSecret, tokenPath, scope } = this.authConfig.config;
+        return firstValueFrom(this.http.post(tokenPath, new HttpParams({
+            fromObject: {
+                client_id: clientId,
+                client_secret: clientSecret,
+                grant_type: OAuthType.CLIENT_CREDENTIAL,
+                ...scope ? { scope } : {},
+            }
+        }), { headers: HEADER_APPLICATION }).pipe(catchError((err) => {
+            this.token = err;
+            return throwError(() => err);
+        }), tap(params => {
+            this.token = {
+                ...params,
+                type: OAuthType.CLIENT_CREDENTIAL,
+            };
+        })));
+    }
+    resourceLogin(parameters) {
+        const { clientId, clientSecret, tokenPath, scope } = this.authConfig.config;
+        const { username, password } = parameters;
+        return firstValueFrom(this.http.post(tokenPath, new HttpParams({
+            fromObject: {
+                client_id: clientId,
+                ...clientSecret && { client_secret: clientSecret } || {},
+                grant_type: OAuthType.RESOURCE,
+                ...scope && { scope } || {},
+                username,
+                password
+            }
+        }), { headers: HEADER_APPLICATION }).pipe(catchError(err => {
+            this.token = err;
+            return throwError(() => err);
+        }), tap(params => {
+            this.token = {
+                ...params,
+                type: OAuthType.RESOURCE,
+            };
+        })));
+    }
+    async toAuthorizationUrl(parameters) {
+        const { config, location } = this.authConfig;
+        let authorizationUrl = `${config.authorizePath}`;
+        authorizationUrl += config.authorizePath.includes('?') && '&' || '?';
+        authorizationUrl += `client_id=${config.clientId}`;
+        authorizationUrl += `&redirect_uri=${encodeURIComponent(parameters.redirectUri)}`;
+        authorizationUrl += `&response_type=${parameters.responseType}`;
+        authorizationUrl += `&scope=${encodeURIComponent(config.scope || '')}`;
+        authorizationUrl += `&state=${encodeURIComponent(parameters.state || '')}`;
+        return location?.replace(`${authorizationUrl}${this.generateNonce(config)}${await this.generateCodeChallenge(config)}`);
+    }
+    async generateCodeChallenge(config) {
+        if (config.pkce) {
+            const codeVerifier = randomString();
+            this.token = { ...this.token, codeVerifier };
+            return `&code_challenge=${await pkce(codeVerifier)}&code_challenge_method=S256`;
+        }
+        return '';
+    }
+    generateNonce(config) {
+        if (config && config.scope && config.scope.indexOf('openid') > -1) {
+            const nonce = randomString(10);
+            this.token = { ...this.token, nonce };
+            return `&nonce=${nonce}`;
+        }
+        return '';
+    }
+    checkResponse(token, parameters) {
+        this.emitState(parameters);
+        this.cleanLocationHash();
+        if (!parameters || parameters['error']) {
+            return false;
+        }
+        if (token && token.nonce && parameters['access_token']) {
+            const jwtToken = jwt(parameters['access_token']);
+            return token.nonce === jwtToken.nonce;
+        }
+        return parameters['access_token'] || parameters['code'];
+    }
+    getCleanedUnSearchParameters() {
+        const { search } = this.authConfig.location || {};
+        let searchString = search && search.substring(1) || '';
+        const hashKeys = ['code', 'state', 'error', 'error_description', 'session_state', 'scope', 'authuser', 'prompt', 'iss'];
+        hashKeys.forEach(hashKey => {
+            const re = new RegExp('&' + hashKey + '(=[^&]*)?|^' + hashKey + '(=[^&]*)?&?');
+            searchString = searchString.replace(re, '');
+        });
+        return searchString.length && `?${searchString}` || '';
+    }
+    cleanLocationHash() {
+        if (this.authConfig.location) {
+            const { hash } = this.authConfig.location;
+            let curHash = hash && hash.substring(1) || '';
+            const hashKeys = [
+                'access_token',
+                'token_type',
+                'expires_in',
+                'scope',
+                'state',
+                'error',
+                'error_description',
+                'session_state',
+                'nonce',
+                'id_token',
+                'code',
+                'iss'
+            ];
+            hashKeys.forEach(hashKey => {
+                const re = new RegExp('&' + hashKey + '(=[^&]*)?|^' + hashKey + '(=[^&]*)?&?');
+                curHash = curHash.replace(re, '');
+            });
+            this.authConfig.location.hash = curHash;
+        }
+    }
+    emitState(parameters) {
+        const { state } = parameters || {};
+        state && this.state$.next(state);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthService, deps: [{ token: OAuthConfig }, { token: OAuthTokenService }, { token: i3.HttpClient }, { token: i2.Location }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: OAuthConfig }, { type: OAuthTokenService }, { type: i3.HttpClient }, { type: i2.Location }] });
+
+const OAuthInterceptor = (req, next) => {
+    const authConfig = inject(OAuthConfig);
+    const tokenService = inject(OAuthTokenService);
+    const isPathExcepted = (req) => {
+        const { ignorePaths } = authConfig || {};
+        if (ignorePaths) {
+            for (const ignorePath of ignorePaths) {
+                try {
+                    if (req.url.match(ignorePath)) {
+                        return true;
+                    }
+                }
+                catch (err) {
+                }
+            }
+        }
+        return false;
+    };
+    return isPathExcepted(req) && next(req) || tokenService.token$.pipe(take(1), map(token => {
+        if (token?.access_token) {
+            req = req.clone({
+                setHeaders: {
+                    Authorization: `${token.token_type} ${token.access_token}`
+                }
+            });
+        }
+        return req;
+    }), switchMap(req => next(req)), catchError((err) => {
+        if (err.status === 401) {
+            tokenService.token = {
+                error: `${err.status}`,
+                error_description: err.message
+            };
+        }
+        return throwError(() => err);
+    }));
+};
+
+class OAuthLoginComponent {
+    #redirectUri;
+    #responseType;
+    #i18n;
+    get i18n() {
+        return this.#i18n;
+    }
+    set i18n(i18n) {
+        this.#i18n = {
+            ...this.#i18n,
+            ...i18n
+        };
+    }
+    get redirectUri() {
+        return this.#redirectUri || `${globalThis.location?.origin}${this.locationService.path(true) || '/'}`;
+    }
+    set redirectUri(redirectUri) {
+        if (redirectUri) {
+            this.#redirectUri = redirectUri;
+        }
+    }
+    set responseType(responseType) {
+        if (this.responseType) {
+            this.#responseType = responseType;
+        }
+    }
+    get responseType() {
+        return this.#responseType || this.type;
+    }
+    constructor(oauthService, locationService) {
+        this.oauthService = oauthService;
+        this.locationService = locationService;
+        this.#i18n = {
+            username: 'Username',
+            password: 'Password',
+            submit: 'Sign in',
+            notAuthorized: 'Sign in',
+            authorized: 'Welcome',
+            denied: 'Access Denied. Try again!'
+        };
+        this.type = OAuthType.RESOURCE;
+        this.useLogoutUrl = false;
+        this.state = '';
+        this.stateChange = this.oauthService.state$.asObservable();
+        this.loginTemplate = null;
+        this.username = '';
+        this.password = '';
+        this.OAuthStatus = OAuthStatus;
+        this.OAuthType = OAuthType;
+        this.collapse = false;
+        this.status$ = this.oauthService.status$.pipe(tap(s => {
+            if (s === OAuthStatus.AUTHORIZED && this.profileName$) {
+                this.profileName$.pipe(take(1)).subscribe(n => this.profileName = n);
+            }
+            else {
+                const { token } = this.oauthService;
+                const userInfo = token && token.id_token && JSON.parse(atob(token.id_token.split('.')[1])) || {};
+                this.profileName = userInfo.name || userInfo.username || userInfo.email || userInfo.sub || '';
+            }
+        }));
+        this.loginFunction = (p) => this.login(p);
+        this.logoutFunction = () => this.logout();
+    }
+    logout() {
+        this.oauthService.logout(this.useLogoutUrl);
+    }
+    login(parameters) {
+        this.collapse = false;
+        return this.oauthService.login(parameters);
+    }
+    toggleCollapse() {
+        this.collapse = !this.collapse;
+    }
+    keyboardEvent() {
+        this.collapse = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthLoginComponent, deps: [{ token: OAuthService }, { token: i2.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: OAuthLoginComponent, isStandalone: true, selector: "oauth-login", inputs: { type: "type", i18n: "i18n", redirectUri: "redirectUri", responseType: "responseType", useLogoutUrl: "useLogoutUrl", state: "state", profileName$: "profileName$" }, outputs: { stateChange: "stateChange" }, host: { listeners: { "window:keydown.escape": "keyboardEvent()" } }, queries: [{ propertyName: "loginTemplate", first: true, predicate: ["login"], descendants: true }], ngImport: i0, template: `
+@if (loginTemplate) {
+  <ng-container
+    [ngTemplateOutlet]="loginTemplate"
+    [ngTemplateOutletContext]="{login: loginFunction, logout: logoutFunction, status: status$ | async}">
+  </ng-container>
+} @else {
+  @if (status$ | async; as status) {
+    @if (type === OAuthType.RESOURCE) {
+      <div class="oauth dropdown text-end {{collapse ? 'show': ''}}">
+        <button class="btn btn-link p-0 dropdown-toggle"
+          (click)="status === OAuthStatus.AUTHORIZED ? logout() : toggleCollapse()">
+          <ng-container *ngTemplateOutlet="message"></ng-container>
+        </button>
+        <div class="dropdown-menu mr-3 {{collapse ? 'show': ''}}">
+          @if (status === OAuthStatus.NOT_AUTHORIZED || status === OAuthStatus.DENIED) {
+            <form class="p-3"
+              #form="ngForm"
+              (submit)="login({username: username, password: password})">
+              <div class="mb-3">
+                <input type="text"
+                  class="form-control"
+                  name="username"
+                  required
+                  [(ngModel)]="username"
+                  [placeholder]="i18n.username">
+                </div>
+                <div class="mb-3">
+                  <input type="password"
+                    class="form-control"
+                    name="password"
+                    required
+                    [(ngModel)]="password"
+                    [placeholder]="i18n.password">
+                  </div>
+                  <div class="text-end">
+                    <button type="submit"
+                      class="btn btn-primary"
+                    [disabled]="form.invalid">{{i18n.submit}}</button>
+                  </div>
+                </form>
+              }
+            </div>
+          </div>
+        } @else {
+          <a role="button"
+            class="oauth"
+            (click)="status === OAuthStatus.AUTHORIZED ? logout() : login({responseType: responseType,  redirectUri: redirectUri, state:state})">
+            <ng-container *ngTemplateOutlet="message"></ng-container>
+          </a>
+        }
+        <ng-template #message>
+          @if (status === OAuthStatus.NOT_AUTHORIZED) {
+            <span class="not-authorized"
+            [innerHTML]="i18n.notAuthorized"></span>
+          }
+          @if (status === OAuthStatus.AUTHORIZED) {
+            <span class="authorized"
+              >
+              <span class="welcome" [innerHTML]="i18n.authorized + '&nbsp;'"></span>
+              <strong class="profile-name"
+              [innerHTML]="profileName"></strong>
+            </span>
+          }
+          @if (status === OAuthStatus.DENIED) {
+            <span class="denied"
+            [innerHTML]="i18n.denied"></span>
+          }
+        </ng-template>
+      }
+    }
+    `, isInline: true, styles: [".oauth .dropdown-menu{left:auto;right:0;box-shadow:0 5px 10px #0003;min-width:250px}.oauth .dropdown-menu:before{content:\"\";display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:#0003;position:absolute;top:-7px;left:auto;right:15px}.oauth .dropdown-menu:after{content:\"\";display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #ffffff;position:absolute;top:-6px;left:auto;right:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OAuthLoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oauth-login', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule
+                    ], template: `
+@if (loginTemplate) {
+  <ng-container
+    [ngTemplateOutlet]="loginTemplate"
+    [ngTemplateOutletContext]="{login: loginFunction, logout: logoutFunction, status: status$ | async}">
+  </ng-container>
+} @else {
+  @if (status$ | async; as status) {
+    @if (type === OAuthType.RESOURCE) {
+      <div class="oauth dropdown text-end {{collapse ? 'show': ''}}">
+        <button class="btn btn-link p-0 dropdown-toggle"
+          (click)="status === OAuthStatus.AUTHORIZED ? logout() : toggleCollapse()">
+          <ng-container *ngTemplateOutlet="message"></ng-container>
+        </button>
+        <div class="dropdown-menu mr-3 {{collapse ? 'show': ''}}">
+          @if (status === OAuthStatus.NOT_AUTHORIZED || status === OAuthStatus.DENIED) {
+            <form class="p-3"
+              #form="ngForm"
+              (submit)="login({username: username, password: password})">
+              <div class="mb-3">
+                <input type="text"
+                  class="form-control"
+                  name="username"
+                  required
+                  [(ngModel)]="username"
+                  [placeholder]="i18n.username">
+                </div>
+                <div class="mb-3">
+                  <input type="password"
+                    class="form-control"
+                    name="password"
+                    required
+                    [(ngModel)]="password"
+                    [placeholder]="i18n.password">
+                  </div>
+                  <div class="text-end">
+                    <button type="submit"
+                      class="btn btn-primary"
+                    [disabled]="form.invalid">{{i18n.submit}}</button>
+                  </div>
+                </form>
+              }
+            </div>
+          </div>
+        } @else {
+          <a role="button"
+            class="oauth"
+            (click)="status === OAuthStatus.AUTHORIZED ? logout() : login({responseType: responseType,  redirectUri: redirectUri, state:state})">
+            <ng-container *ngTemplateOutlet="message"></ng-container>
+          </a>
+        }
+        <ng-template #message>
+          @if (status === OAuthStatus.NOT_AUTHORIZED) {
+            <span class="not-authorized"
+            [innerHTML]="i18n.notAuthorized"></span>
+          }
+          @if (status === OAuthStatus.AUTHORIZED) {
+            <span class="authorized"
+              >
+              <span class="welcome" [innerHTML]="i18n.authorized + '&nbsp;'"></span>
+              <strong class="profile-name"
+              [innerHTML]="profileName"></strong>
+            </span>
+          }
+          @if (status === OAuthStatus.DENIED) {
+            <span class="denied"
+            [innerHTML]="i18n.denied"></span>
+          }
+        </ng-template>
+      }
+    }
+    `, encapsulation: ViewEncapsulation.None, styles: [".oauth .dropdown-menu{left:auto;right:0;box-shadow:0 5px 10px #0003;min-width:250px}.oauth .dropdown-menu:before{content:\"\";display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:#0003;position:absolute;top:-7px;left:auto;right:15px}.oauth .dropdown-menu:after{content:\"\";display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #ffffff;position:absolute;top:-6px;left:auto;right:16px}\n"] }]
+        }], ctorParameters: () => [{ type: OAuthService }, { type: i2.Location }], propDecorators: { type: [{
+                type: Input
+            }], i18n: [{
+                type: Input
+            }], redirectUri: [{
+                type: Input
+            }], responseType: [{
+                type: Input
+            }], useLogoutUrl: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], stateChange: [{
+                type: Output
+            }], profileName$: [{
+                type: Input
+            }], loginTemplate: [{
+                type: ContentChild,
+                args: ['login', { static: false }]
+            }], keyboardEvent: [{
+                type: HostListener,
+                args: ['window:keydown.escape']
+            }] } });
+
+/*
+ * Public API Surface of ngx-oauth
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HEADER_APPLICATION, OAUTH_CONFIG, OAuthConfig, OAuthHttpClient, OAuthInterceptor, OAuthLoginComponent, OAuthService, OAuthStatus, OAuthTokenService, OAuthType, defaultOAuthConfig, provideOAuthConfig, provideOAuthConfigFactory };
+//# sourceMappingURL=ngx-oauth.mjs.map