ngx-oauth 3.0.2 → 4.2.0

package/fesm2020/ngx-oauth.mjs

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Inject, EventEmitter, Component, ViewEncapsulation, Input, Output, ContentChild, HostListener, PLATFORM_ID, Optional, NgModule } from '@angular/core';
-import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpParams, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { filter, map, switchMap, shareReplay, tap, catchError, concatMap, delay } from 'rxjs/operators';
-import { ReplaySubject, of, EMPTY, from, noop, firstValueFrom, throwError, Subscription, take } from 'rxjs';
+import { InjectionToken, inject, Injectable, Inject, Component, ViewEncapsulation, Input, Output, ContentChild, HostListener, PLATFORM_ID, Optional, NgModule } from '@angular/core';
+import * as i3 from '@angular/common/http';
+import { HttpHeaders, HttpParams, HttpClient, HttpBackend, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { shareReplay, map, catchError, filter, switchMap as switchMap$1, tap, concatMap, delay } from 'rxjs/operators';
+import { BehaviorSubject, distinctUntilChanged, switchMap, of, ReplaySubject, from, noop, firstValueFrom, throwError, take, Subscription } from 'rxjs';
+import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
@@ -16,11 +17,13 @@ const LOCATION = new InjectionToken('Location');
 const STORAGE = new InjectionToken('Storage');
 const OAUTH_CONFIG = new InjectionToken('OAuthConfig');
 const OAUTH_TOKEN = new InjectionToken('OAuthToken');
+const HEADER_APPLICATION = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' });
+const OAUTH_HTTP_CLIENT = new InjectionToken('OAuthHttpClient');
 class OAuthConfig {
 }
-OAuthConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-OAuthConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthConfig, providedIn: 'root', useFactory: () => inject(OAUTH_CONFIG).reduce((p, c) => ({ ...p, ...c }), {}) });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthConfig, decorators: [{
+OAuthConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OAuthConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthConfig, providedIn: 'root', useFactory: () => inject(OAUTH_CONFIG).reduce((p, c) => ({ ...p, ...c }), {}) });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthConfig, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -52,6 +55,80 @@ var OAuthStatus;
     OAuthStatus["DENIED"] = "DENIED";
 })(OAuthStatus || (OAuthStatus = {}));
 
+var _TokenService_token$;
+const isExpiredToken = (token) => token && token.expires && Date.now() > token.expires || false;
+class TokenService {
+    constructor(authConfig, http, zone) {
+        this.authConfig = authConfig;
+        this.http = http;
+        this.zone = zone;
+        _TokenService_token$.set(this, new BehaviorSubject(this.saved));
+        this.token$ = __classPrivateFieldGet(this, _TokenService_token$, "f").pipe(distinctUntilChanged((p, c) => JSON.stringify(p || null) === JSON.stringify(c || null)), switchMap(token => !isExpiredToken(token) && of(token) || this.refreshToken(token)), shareReplay(1));
+        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 __classPrivateFieldGet(this, _TokenService_token$, "f").value;
+    }
+    set token(token) {
+        const expiresIn = Number(token.expires_in) || 0;
+        const result = {
+            ...token,
+            ...expiresIn && { expires: Date.now() + expiresIn * 1000 } || {}
+        };
+        this.saved = result;
+        __classPrivateFieldGet(this, _TokenService_token$, "f").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);
+    }
+}
+_TokenService_token$ = new WeakMap();
+TokenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TokenService, deps: [{ token: OAuthConfig }, { token: OAUTH_HTTP_CLIENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+TokenService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TokenService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TokenService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: OAuthConfig }, { type: i3.HttpClient, decorators: [{
+                    type: Inject,
+                    args: [OAUTH_HTTP_CLIENT]
+                }] }, { type: i0.NgZone }]; } });
+
 const arrToString = (buf) => buf.reduce((s, b) => s + String.fromCharCode(b), '');
 const base64url = (str) => btoa(str)
     .replace(/\+/g, '-')
@@ -65,7 +142,6 @@ const pkce = async (value) => {
     const buff = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(value));
     return base64url(arrToString(new Uint8Array(buff)));
 };
-const REQUEST_HEADER = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' });
 const parseOauthUri = (hash) => {
     const regex = /([^&=]+)=([^&]*)/g;
     const params = {};
@@ -74,81 +150,48 @@ const parseOauthUri = (hash) => {
     while ((m = regex.exec(hash)) !== null) {
         params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
     }
-    if (Object.keys(params).length) {
-        return params;
-    }
-    return null;
+    return Object.keys(params).length && params || {};
 };
 const jwt = (token) => JSON.parse(atob(token.split('.')[1]));
 class OAuthService {
-    constructor(http, zone, authConfig, location, locationService) {
-        this.http = http;
-        this.zone = zone;
+    constructor(authConfig, tokenService, http, location, locationService) {
         this.authConfig = authConfig;
+        this.tokenService = tokenService;
+        this.http = http;
         this.location = location;
         this.locationService = locationService;
-        this._token = null;
-        this._status = OAuthStatus.NOT_AUTHORIZED;
         this.state$ = new ReplaySubject(1);
-        this.status$ = new ReplaySubject(1);
-        this.userInfo$ = this.status$.pipe(filter(s => s === OAuthStatus.AUTHORIZED), map(() => {
-            const { config } = this.authConfig;
-            return config.userPath;
-        }), filter(p => !!p), switchMap(path => this.http.get(path)), shareReplay());
-        setTimeout(() => this.init()); // decouple for http interceptor
-    }
-    /**
-     * Get the oauth config for initialize. If OpenId with issuerPath is configured then configure from server openid configuration.
-     * @protected
-     */
-    get config$() {
-        let { config } = this.authConfig;
-        if (config && config.clientId) {
-            const { issuerPath, scope } = config;
-            if (issuerPath) {
-                return this.http.get(`${issuerPath}/.well-known/openid-configuration`).pipe(tap(v => this.type && this.set(this.type, {
-                    ...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 && {} || { scope: 'openid' }
-                })), map(() => this.authConfig.config));
-            }
-            return of(config);
-        }
-        console.warn('clientId is missing in oauth config');
-        return EMPTY;
-    }
-    /**
-     * Init. Will check the url implicit or authorization flow or existing saved token.
-     * @protected
-     */
-    init() {
-        const { hash, search, origin, pathname } = this.location;
-        const isImplicitRedirect = hash && /(access_token=)|(error=)/.test(hash);
-        const isAuthCodeRedirect = search && /(code=)|(error=)/.test(search);
-        const { storageKey } = this.authConfig;
-        const savedToken = storageKey && this.authConfig.storage && this.authConfig.storage[storageKey] &&
-            JSON.parse(this.authConfig.storage[storageKey]);
-        this.config$.subscribe(config => {
+        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.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.substr(1));
-                this.token = parameters;
-                this.status = this.checkResponse(savedToken, parameters) && OAuthStatus.AUTHORIZED || OAuthStatus.DENIED;
+                const parameters = parseOauthUri(hash.substring(1));
+                this.token = {
+                    ...parameters,
+                    type: OAuthType.IMPLICIT,
+                };
+                this.checkResponse(this.token, parameters);
             }
             else if (isAuthCodeRedirect) {
-                const parameters = parseOauthUri(search.substr(1));
-                if (!this.checkResponse(savedToken, parameters)) {
+                const parameters = parseOauthUri(search && search.substring(1) || hash && hash.substring(1));
+                if (!this.checkResponse(this.token, parameters)) {
                     this.token = parameters;
-                    this.status = OAuthStatus.DENIED;
                 }
                 else {
                     const newParametersString = this.getCleanedUnSearchParameters();
                     const { clientId, clientSecret, tokenPath, scope } = config;
-                    const codeVerifier = savedToken && savedToken.codeVerifier;
+                    const { codeVerifier } = this.token || {}; //should be set by authorizationUrl construction
                     this.http.post(tokenPath, new HttpParams({
                         fromObject: {
                             code: parameters?.['code'],
@@ -159,56 +202,55 @@ class OAuthService {
                             ...scope && { scope } || {},
                             ...codeVerifier && { code_verifier: codeVerifier } || {}
                         }
-                    }), { headers: REQUEST_HEADER }).pipe(catchError((err) => {
-                        this.token = err;
-                        this.status = OAuthStatus.DENIED;
-                        this.locationService.replaceState(`${pathname}${newParametersString}`);
-                        return EMPTY;
-                    })).subscribe(token => {
-                        this.token = token;
-                        this.status = OAuthStatus.AUTHORIZED;
+                    }), { headers: HEADER_APPLICATION }).pipe().subscribe(token => {
+                        this.token = {
+                            ...token,
+                            type: OAuthType.AUTHORIZATION_CODE
+                        };
                         this.locationService.replaceState(`${pathname}${newParametersString}`);
                     });
                 }
             }
-            else if (savedToken) {
-                this._token = savedToken;
-                const { access_token, refresh_token, error } = savedToken;
-                if (access_token) {
-                    if (refresh_token) { // force refresh since might be a manual page refresh
-                        this.refreshToken();
-                    }
-                    else {
-                        this.status = OAuthStatus.AUTHORIZED;
-                    }
-                }
-                else {
-                    this.status = error && OAuthStatus.DENIED || OAuthStatus.NOT_AUTHORIZED;
-                }
-            }
-            else {
-                this.status = OAuthStatus.NOT_AUTHORIZED;
-            }
-        });
+        }), 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(() => {
+            const { config } = this.authConfig;
+            return config.userPath;
+        }), filter(Boolean), switchMap$1(path => this.http.get(path)), shareReplay(1));
+        this.type$ = this.tokenService.type$;
+        this.ignorePaths = this.authConfig.ignorePaths || [];
+    }
+    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
+            };
+        }
     }
     async login(parameters) {
-        if (this.isResourceType(parameters)) {
+        if (!!parameters && parameters.password) {
             await this.resourceLogin(parameters);
         }
-        else if (this.isAuthorizationCodeType(parameters)) {
-            await this.authorizationCodeLogin(parameters);
-        }
-        else if (this.isImplicitType(parameters)) {
-            await this.implicitLogin(parameters);
+        else if (!!parameters && parameters.redirectUri && parameters.responseType) {
+            await this.toAuthorizationUrl(parameters);
         }
-        else if (this.isClientCredentialType()) {
+        else {
             await this.clientCredentialLogin();
         }
     }
     logout(useLogoutUrl) {
         this.revoke();
-        this.token = null;
-        this.status = OAuthStatus.NOT_AUTHORIZED;
+        this.token = {};
         const { logoutPath, logoutRedirectUri } = this.authConfig.config;
         if (useLogoutUrl && logoutPath) {
             const { origin, pathname } = this.location;
@@ -219,7 +261,7 @@ class OAuthService {
     revoke() {
         const { revokePath, clientId, clientSecret } = this.authConfig.config;
         if (revokePath) {
-            const { access_token, refresh_token } = this.token;
+            const { access_token, refresh_token } = this.token || {};
             const toRevoke = [];
             if (access_token) {
                 toRevoke.push({
@@ -238,53 +280,32 @@ class OAuthService {
                 });
             }
             from(toRevoke).pipe(concatMap(o => of(o).pipe(delay(300))), // space request to avoid cancellation
-            switchMap(o => this.http.post(revokePath, new HttpParams({ fromObject: o })))).subscribe(noop);
+            switchMap$1(o => this.http.post(revokePath, new HttpParams({ fromObject: o })))).subscribe(noop);
         }
     }
-    get status() {
-        return this._status;
-    }
-    set status(status) {
-        this._status = status;
-        this.status$.next(status);
-    }
-    set(type, config) {
-        this.authConfig.type = type;
-        if (config) {
-            this.authConfig.config = {
-                ...this.authConfig.config,
-                ...config
-            };
-        }
-    }
-    get type() {
-        return this.authConfig.type;
-    }
-    get ignorePaths() {
-        return this.authConfig.ignorePaths || [];
-    }
-    async clientCredentialLogin() {
+    clientCredentialLogin() {
         const { clientId, clientSecret, tokenPath, scope } = this.authConfig.config;
-        await firstValueFrom(this.http.post(tokenPath, new HttpParams({
+        return firstValueFrom(this.http.post(tokenPath, new HttpParams({
             fromObject: {
                 client_id: clientId,
                 client_secret: clientSecret,
                 grant_type: OAuthType.CLIENT_CREDENTIAL,
                 ...scope ? { scope } : {},
             }
-        }), { headers: REQUEST_HEADER }).pipe(catchError((err) => {
+        }), { headers: HEADER_APPLICATION }).pipe(catchError((err) => {
             this.token = err;
-            this.status = OAuthStatus.DENIED;
-            return EMPTY;
+            return throwError(() => err);
         }), tap(params => {
-            this.token = params;
-            this.status = OAuthStatus.AUTHORIZED;
+            this.token = {
+                ...params,
+                type: OAuthType.CLIENT_CREDENTIAL,
+            };
         })));
     }
-    async resourceLogin(parameters) {
+    resourceLogin(parameters) {
         const { clientId, clientSecret, tokenPath, scope } = this.authConfig.config;
         const { username, password } = parameters;
-        await firstValueFrom(this.http.post(tokenPath, new HttpParams({
+        return firstValueFrom(this.http.post(tokenPath, new HttpParams({
             fromObject: {
                 client_id: clientId,
                 ...clientSecret && { client_secret: clientSecret } || {},
@@ -293,45 +314,26 @@ class OAuthService {
                 username,
                 password
             }
-        }), { headers: REQUEST_HEADER }).pipe(catchError(err => {
+        }), { headers: HEADER_APPLICATION }).pipe(catchError(err => {
             this.token = err;
-            this.status = OAuthStatus.DENIED;
-            return EMPTY;
+            return throwError(() => err);
         }), tap(params => {
-            this.token = params;
-            this.status = OAuthStatus.AUTHORIZED;
+            this.token = {
+                ...params,
+                type: OAuthType.RESOURCE,
+            };
         })));
     }
-    async implicitLogin(parameters) {
-        const authUrl = await this.toAuthorizationUrl(parameters, OAuthType.IMPLICIT);
-        this.location.replace(authUrl);
-    }
-    async authorizationCodeLogin(parameters) {
-        const authUrl = await this.toAuthorizationUrl(parameters, OAuthType.AUTHORIZATION_CODE);
-        this.location.replace(authUrl);
-    }
-    isClientCredentialType() {
-        return this.authConfig.type === OAuthType.CLIENT_CREDENTIAL;
-    }
-    isResourceType(parameters) {
-        return this.authConfig.type === OAuthType.RESOURCE && !!parameters?.password;
-    }
-    isImplicitType(parameters) {
-        return this.authConfig.type === OAuthType.IMPLICIT && !!parameters?.redirectUri;
-    }
-    isAuthorizationCodeType(parameters) {
-        return this.authConfig.type === OAuthType.AUTHORIZATION_CODE && !!parameters?.redirectUri;
-    }
-    async toAuthorizationUrl(parameters, responseType) {
+    async toAuthorizationUrl(parameters) {
         const { config } = this.authConfig;
         let authorizationUrl = `${config.authorizePath}`;
         authorizationUrl += config.authorizePath.includes('?') && '&' || '?';
         authorizationUrl += `client_id=${config.clientId}`;
         authorizationUrl += `&redirect_uri=${encodeURIComponent(parameters.redirectUri)}`;
-        authorizationUrl += `&response_type=${responseType}`;
+        authorizationUrl += `&response_type=${parameters.responseType}`;
         authorizationUrl += `&scope=${encodeURIComponent(config.scope || '')}`;
         authorizationUrl += `&state=${encodeURIComponent(parameters.state || '')}`;
-        return `${authorizationUrl}${this.generateNonce(config)}${await this.generateCodeChallenge(config)}`;
+        return this.location.replace(`${authorizationUrl}${this.generateNonce(config)}${await this.generateCodeChallenge(config)}`);
     }
     async generateCodeChallenge(config) {
         if (config.pkce) {
@@ -361,60 +363,11 @@ class OAuthService {
         }
         return parameters['access_token'] || parameters['code'];
     }
-    set token(token) {
-        this._token = token;
-        const { storageKey } = this.authConfig;
-        if (token) {
-            // @ts-ignore
-            this.authConfig.storage[storageKey] = JSON.stringify(this.token);
-            clearTimeout(this.timer);
-            if (this.token && this.token.expires_in) {
-                this.zone.runOutsideAngular(() => {
-                    this.timer = setTimeout(() => {
-                        this.zone.run(() => {
-                            this.refreshToken();
-                        });
-                    }, Number(this.token?.expires_in) * 1000);
-                });
-            }
-        }
-        else {
-            // @ts-ignore
-            delete this.authConfig.storage[storageKey];
-        }
-    }
-    get token() {
-        return this._token;
-    }
-    refreshToken() {
-        const { tokenPath, clientId, clientSecret, scope } = this.authConfig.config;
-        const { refresh_token } = this.token;
-        if (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: REQUEST_HEADER }).pipe(catchError(() => {
-                this.logout();
-                return EMPTY;
-            })).subscribe(params => {
-                this.token = {
-                    ...this.token,
-                    ...params
-                };
-                this.status = OAuthStatus.AUTHORIZED;
-            });
-        }
-    }
     getCleanedUnSearchParameters() {
         const { search } = this.location;
-        let searchString = search.substr(1);
+        let searchString = search && search.substring(1) || '';
         const hashKeys = ['code', 'state', 'error', 'error_description', 'session_state', 'scope', 'authuser', 'prompt'];
-        hashKeys.forEach((hashKey) => {
+        hashKeys.forEach(hashKey => {
             const re = new RegExp('&' + hashKey + '(=[^&]*)?|^' + hashKey + '(=[^&]*)?&?');
             searchString = searchString.replace(re, '');
         });
@@ -422,62 +375,69 @@ class OAuthService {
     }
     cleanLocationHash() {
         const { hash } = this.location;
-        let curHash = hash.substr(1);
-        const hashKeys = ['access_token', 'token_type', 'expires_in', 'scope', 'state', 'error', 'error_description', 'session_state', 'nonce'];
-        hashKeys.forEach((hashKey) => {
+        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'
+        ];
+        hashKeys.forEach(hashKey => {
             const re = new RegExp('&' + hashKey + '(=[^&]*)?|^' + hashKey + '(=[^&]*)?&?');
             curHash = curHash.replace(re, '');
         });
         this.location.hash = curHash;
     }
     emitState(parameters) {
-        const { state } = parameters;
-        if (state) {
-            this.state$.next(state);
-        }
+        const { state } = parameters || {};
+        state && this.state$.next(state);
     }
 }
-OAuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthService, deps: [{ token: i1.HttpClient }, { token: i0.NgZone }, { token: OAuthConfig }, { token: LOCATION }, { token: i2.Location }], target: i0.ɵɵFactoryTarget.Injectable });
-OAuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthService, decorators: [{
+OAuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthService, deps: [{ token: OAuthConfig }, { token: TokenService }, { token: i3.HttpClient }, { token: LOCATION }, { token: i2.Location }], target: i0.ɵɵFactoryTarget.Injectable });
+OAuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i0.NgZone }, { type: OAuthConfig }, { type: Location, decorators: [{
+        }], ctorParameters: function () { return [{ type: OAuthConfig }, { type: TokenService }, { type: i3.HttpClient }, { type: Location, decorators: [{
                     type: Inject,
                     args: [LOCATION]
                 }] }, { type: i2.Location }]; } });
 
 class OAuthInterceptor {
-    constructor(oauthService) {
-        this.oauthService = oauthService;
+    constructor(tokenService, authConfig) {
+        this.tokenService = tokenService;
+        this.authConfig = authConfig;
     }
     intercept(req, next) {
-        if (this.oauthService) {
-            if (!this.isPathExcepted(req)) {
-                const { token } = this.oauthService;
-                if (token && token.access_token) {
-                    req = req.clone({
-                        setHeaders: {
-                            Authorization: `${token.token_type} ${token.access_token}`
-                        }
-                    });
-                }
+        return this.tokenService.token$.pipe(take(1), map(token => {
+            if (token?.access_token && !this.isPathExcepted(req)) {
+                req = req.clone({
+                    setHeaders: {
+                        Authorization: `${token.token_type} ${token.access_token}`
+                    }
+                });
             }
-            return next.handle(req).pipe(catchError((err) => {
-                if (err.status === 401 && !this.isPathExcepted(req)) {
-                    this.oauthService.token = null;
-                    this.oauthService.status = OAuthStatus.DENIED;
-                }
-                return throwError(err);
-            }));
-        }
-        else {
-            return next.handle(req);
-        }
+            return req;
+        }), switchMap(req => next.handle(req)), catchError((err) => {
+            if (err.status === 401 && !this.isPathExcepted(req)) {
+                this.tokenService.token = {
+                    error: `${err.status}`,
+                    error_description: err.message
+                };
+            }
+            return throwError(() => err);
+        }));
     }
     isPathExcepted(req) {
-        const { ignorePaths } = this.oauthService;
+        const { ignorePaths } = this.authConfig || {};
         if (ignorePaths) {
-            for (const ignorePath of this.oauthService.ignorePaths) {
+            for (const ignorePath of ignorePaths) {
                 try {
                     if (req.url.match(ignorePath)) {
                         return true;
@@ -490,39 +450,41 @@ class OAuthInterceptor {
         return false;
     }
 }
-OAuthInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthInterceptor, deps: [{ token: OAuthService }], target: i0.ɵɵFactoryTarget.Injectable });
-OAuthInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthInterceptor });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthInterceptor, decorators: [{
+OAuthInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthInterceptor, deps: [{ token: TokenService }, { token: OAuthConfig }], target: i0.ɵɵFactoryTarget.Injectable });
+OAuthInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthInterceptor });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthInterceptor, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: OAuthService }]; } });
+        }], ctorParameters: function () { return [{ type: TokenService }, { type: OAuthConfig }]; } });
 
+var _OAuthLoginComponent_subscription, _OAuthLoginComponent_redirectUri, _OAuthLoginComponent_responseType, _OAuthLoginComponent_i18n;
 class OAuthLoginComponent {
     constructor(oauthService, locationService, location) {
         this.oauthService = oauthService;
         this.locationService = locationService;
         this.location = location;
-        this.subscription = new Subscription();
-        this._i18n = {
+        _OAuthLoginComponent_subscription.set(this, new Subscription());
+        _OAuthLoginComponent_redirectUri.set(this, void 0);
+        _OAuthLoginComponent_responseType.set(this, void 0);
+        _OAuthLoginComponent_i18n.set(this, {
             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 = new EventEmitter();
+        this.stateChange = this.oauthService.state$.asObservable();
         this.username = '';
         this.password = '';
         this.OAuthStatus = OAuthStatus;
         this.OAuthType = OAuthType;
         this.collapse = false;
-        this.type = this.oauthService.type;
-        this.state$ = this.oauthService.state$.pipe(tap(s => this.stateChange.emit(s)));
         this.status$ = this.oauthService.status$.pipe(tap(s => {
             if (s === OAuthStatus.AUTHORIZED && this.profileName$) {
-                this.subscription.add(this.profileName$.pipe(take(1)).subscribe(n => this.profileName = n));
+                __classPrivateFieldGet(this, _OAuthLoginComponent_subscription, "f").add(this.profileName$.pipe(take(1)).subscribe(n => this.profileName = n));
             }
             else {
                 const { token } = this.oauthService;
@@ -534,31 +496,39 @@ class OAuthLoginComponent {
         this.logoutFunction = () => this.logout();
     }
     get i18n() {
-        return this._i18n;
+        return __classPrivateFieldGet(this, _OAuthLoginComponent_i18n, "f");
     }
     set i18n(i18n) {
-        this._i18n = {
-            ...this._i18n,
+        __classPrivateFieldSet(this, _OAuthLoginComponent_i18n, {
+            ...__classPrivateFieldGet(this, _OAuthLoginComponent_i18n, "f"),
             ...i18n
-        };
+        }, "f");
+    }
+    get redirectUri() {
+        return __classPrivateFieldGet(this, _OAuthLoginComponent_redirectUri, "f") || `${this.location.origin}${this.locationService.path(true) || '/'}`;
     }
     set redirectUri(redirectUri) {
         if (redirectUri) {
-            this._redirectUri = redirectUri;
+            __classPrivateFieldSet(this, _OAuthLoginComponent_redirectUri, redirectUri, "f");
         }
     }
-    get redirectUri() {
-        return this._redirectUri || `${this.location.origin}${this.locationService.path(true) || '/'}`;
+    set responseType(responseType) {
+        if (this.responseType) {
+            __classPrivateFieldSet(this, _OAuthLoginComponent_responseType, responseType, "f");
+        }
+    }
+    get responseType() {
+        return __classPrivateFieldGet(this, _OAuthLoginComponent_responseType, "f") || this.type;
     }
     ngOnDestroy() {
-        this.subscription.unsubscribe();
+        __classPrivateFieldGet(this, _OAuthLoginComponent_subscription, "f").unsubscribe();
     }
     logout() {
         this.oauthService.logout(this.useLogoutUrl);
     }
-    async login(parameters) {
-        await this.oauthService.login(parameters);
+    login(parameters) {
         this.collapse = false;
+        return this.oauthService.login(parameters);
     }
     toggleCollapse() {
         this.collapse = !this.collapse;
@@ -567,18 +537,23 @@ class OAuthLoginComponent {
         this.collapse = false;
     }
 }
-OAuthLoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthLoginComponent, deps: [{ token: OAuthService }, { token: i2.Location }, { token: LOCATION }], target: i0.ɵɵFactoryTarget.Component });
-OAuthLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.5", type: OAuthLoginComponent, selector: "oauth-login", inputs: { i18n: "i18n", redirectUri: "redirectUri", 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: "<ng-container *ngIf=\"state$ | async\"></ng-container>\r\n<ng-container *ngIf=\"loginTemplate; else defaultLogin\"\r\n              [ngTemplateOutlet]=\"loginTemplate\"\r\n              [ngTemplateOutletContext]=\"{login: loginFunction, logout: logoutFunction, status: status$ | async}\">\r\n</ng-container>\r\n<ng-template #defaultLogin>\r\n  <ng-container *ngIf=\"status$ | async as status\">\r\n    <ng-container *ngIf=\"type === OAuthType.RESOURCE; else noResource\">\r\n      <div class=\"oauth dropdown text-end p-3 {{collapse ? 'show': ''}}\">\r\n        <button class=\"btn btn-link p-0 dropdown-toggle\"\r\n                (click)=\"status === OAuthStatus.AUTHORIZED ? logout() : toggleCollapse()\">\r\n          <ng-container *ngTemplateOutlet=\"message\"></ng-container>\r\n        </button>\r\n        <div class=\"dropdown-menu mr-3 {{collapse ? 'show': ''}}\">\r\n          <form class=\"p-3\" #form=\"ngForm\"\r\n                *ngIf=\"status === OAuthStatus.NOT_AUTHORIZED || status === OAuthStatus.DENIED\"\r\n                (submit)=\"login({username: username, password: password})\">\r\n            <div class=\"mb-3\">\r\n              <input type=\"text\"\r\n                     class=\"form-control\"\r\n                     name=\"username\"\r\n                     required\r\n                     [(ngModel)]=\"username\"\r\n                     [placeholder]=\"i18n.username\">\r\n            </div>\r\n            <div class=\"mb-3\">\r\n              <input type=\"password\"\r\n                     class=\"form-control\"\r\n                     name=\"password\"\r\n                     required\r\n                     [(ngModel)]=\"password\"\r\n                     [placeholder]=\"i18n.password\">\r\n            </div>\r\n            <div class=\"text-end\">\r\n              <button type=\"submit\"\r\n                      class=\"btn btn-primary\"\r\n                      [disabled]=\"form.invalid\">{{i18n.submit}}</button>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #noResource>\r\n      <a role=\"button\" class=\"oauth\"\r\n         (click)=\"status === OAuthStatus.AUTHORIZED ? logout() : login({redirectUri: redirectUri, state:state})\">\r\n        <ng-container *ngTemplateOutlet=\"message\"></ng-container>\r\n      </a>\r\n    </ng-template>\r\n\r\n    <ng-template #message>\r\n      <span *ngIf=\"status === OAuthStatus.NOT_AUTHORIZED\" class=\"not-authorized\">{{i18n.notAuthorized}}</span>\r\n      <span *ngIf=\"status === OAuthStatus.AUTHORIZED\" class=\"authorized\">\r\n        <span class=\"welcome\">{{i18n.authorized}}&nbsp;</span>\r\n        <strong class=\"profile-name\" [innerHTML]=\"profileName\"></strong>\r\n      </span>\r\n      <span *ngIf=\"status === OAuthStatus.DENIED\" class=\"denied\">{{i18n.denied}}</span>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n", 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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthLoginComponent, decorators: [{
+_OAuthLoginComponent_subscription = new WeakMap(), _OAuthLoginComponent_redirectUri = new WeakMap(), _OAuthLoginComponent_responseType = new WeakMap(), _OAuthLoginComponent_i18n = new WeakMap();
+OAuthLoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthLoginComponent, deps: [{ token: OAuthService }, { token: i2.Location }, { token: LOCATION }], target: i0.ɵɵFactoryTarget.Component });
+OAuthLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: OAuthLoginComponent, 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: "<ng-container *ngIf=\"loginTemplate; else defaultLogin\"\r\n              [ngTemplateOutlet]=\"loginTemplate\"\r\n              [ngTemplateOutletContext]=\"{login: loginFunction, logout: logoutFunction, status: status$ | async}\">\r\n</ng-container>\r\n<ng-template #defaultLogin>\r\n  <ng-container *ngIf=\"status$ | async as status\">\r\n    <ng-container *ngIf=\"type === OAuthType.RESOURCE; else noResource\">\r\n      <div class=\"oauth dropdown text-end {{collapse ? 'show': ''}}\">\r\n        <button class=\"btn btn-link p-0 dropdown-toggle\"\r\n                (click)=\"status === OAuthStatus.AUTHORIZED ? logout() : toggleCollapse()\">\r\n          <ng-container *ngTemplateOutlet=\"message\"></ng-container>\r\n        </button>\r\n        <div class=\"dropdown-menu mr-3 {{collapse ? 'show': ''}}\">\r\n          <form class=\"p-3\"\r\n                #form=\"ngForm\"\r\n                *ngIf=\"status === OAuthStatus.NOT_AUTHORIZED || status === OAuthStatus.DENIED\"\r\n                (submit)=\"login({username: username, password: password})\">\r\n            <div class=\"mb-3\">\r\n              <input type=\"text\"\r\n                     class=\"form-control\"\r\n                     name=\"username\"\r\n                     required\r\n                     [(ngModel)]=\"username\"\r\n                     [placeholder]=\"i18n.username\">\r\n            </div>\r\n            <div class=\"mb-3\">\r\n              <input type=\"password\"\r\n                     class=\"form-control\"\r\n                     name=\"password\"\r\n                     required\r\n                     [(ngModel)]=\"password\"\r\n                     [placeholder]=\"i18n.password\">\r\n            </div>\r\n            <div class=\"text-end\">\r\n              <button type=\"submit\"\r\n                      class=\"btn btn-primary\"\r\n                      [disabled]=\"form.invalid\">{{i18n.submit}}</button>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #noResource>\r\n      <a role=\"button\"\r\n         class=\"oauth\"\r\n         (click)=\"status === OAuthStatus.AUTHORIZED ? logout() : login({responseType: responseType,  redirectUri: redirectUri, state:state})\">\r\n        <ng-container *ngTemplateOutlet=\"message\"></ng-container>\r\n      </a>\r\n    </ng-template>\r\n\r\n    <ng-template #message>\r\n      <span class=\"not-authorized\"\r\n            *ngIf=\"status === OAuthStatus.NOT_AUTHORIZED\"\r\n            [innerHTML]=\"i18n.notAuthorized\"></span>\r\n      <span class=\"authorized\"\r\n            *ngIf=\"status === OAuthStatus.AUTHORIZED\">\r\n        <span class=\"welcome\" [innerHTML]=\"i18n.authorized + '&nbsp;'\"></span>\r\n        <strong class=\"profile-name\"\r\n                [innerHTML]=\"profileName\"></strong>\r\n      </span>\r\n      <span class=\"denied\"\r\n            *ngIf=\"status === OAuthStatus.DENIED\"\r\n            [innerHTML]=\"i18n.denied\"></span>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n", 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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthLoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oauth-login', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"state$ | async\"></ng-container>\r\n<ng-container *ngIf=\"loginTemplate; else defaultLogin\"\r\n              [ngTemplateOutlet]=\"loginTemplate\"\r\n              [ngTemplateOutletContext]=\"{login: loginFunction, logout: logoutFunction, status: status$ | async}\">\r\n</ng-container>\r\n<ng-template #defaultLogin>\r\n  <ng-container *ngIf=\"status$ | async as status\">\r\n    <ng-container *ngIf=\"type === OAuthType.RESOURCE; else noResource\">\r\n      <div class=\"oauth dropdown text-end p-3 {{collapse ? 'show': ''}}\">\r\n        <button class=\"btn btn-link p-0 dropdown-toggle\"\r\n                (click)=\"status === OAuthStatus.AUTHORIZED ? logout() : toggleCollapse()\">\r\n          <ng-container *ngTemplateOutlet=\"message\"></ng-container>\r\n        </button>\r\n        <div class=\"dropdown-menu mr-3 {{collapse ? 'show': ''}}\">\r\n          <form class=\"p-3\" #form=\"ngForm\"\r\n                *ngIf=\"status === OAuthStatus.NOT_AUTHORIZED || status === OAuthStatus.DENIED\"\r\n                (submit)=\"login({username: username, password: password})\">\r\n            <div class=\"mb-3\">\r\n              <input type=\"text\"\r\n                     class=\"form-control\"\r\n                     name=\"username\"\r\n                     required\r\n                     [(ngModel)]=\"username\"\r\n                     [placeholder]=\"i18n.username\">\r\n            </div>\r\n            <div class=\"mb-3\">\r\n              <input type=\"password\"\r\n                     class=\"form-control\"\r\n                     name=\"password\"\r\n                     required\r\n                     [(ngModel)]=\"password\"\r\n                     [placeholder]=\"i18n.password\">\r\n            </div>\r\n            <div class=\"text-end\">\r\n              <button type=\"submit\"\r\n                      class=\"btn btn-primary\"\r\n                      [disabled]=\"form.invalid\">{{i18n.submit}}</button>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #noResource>\r\n      <a role=\"button\" class=\"oauth\"\r\n         (click)=\"status === OAuthStatus.AUTHORIZED ? logout() : login({redirectUri: redirectUri, state:state})\">\r\n        <ng-container *ngTemplateOutlet=\"message\"></ng-container>\r\n      </a>\r\n    </ng-template>\r\n\r\n    <ng-template #message>\r\n      <span *ngIf=\"status === OAuthStatus.NOT_AUTHORIZED\" class=\"not-authorized\">{{i18n.notAuthorized}}</span>\r\n      <span *ngIf=\"status === OAuthStatus.AUTHORIZED\" class=\"authorized\">\r\n        <span class=\"welcome\">{{i18n.authorized}}&nbsp;</span>\r\n        <strong class=\"profile-name\" [innerHTML]=\"profileName\"></strong>\r\n      </span>\r\n      <span *ngIf=\"status === OAuthStatus.DENIED\" class=\"denied\">{{i18n.denied}}</span>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n", 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"] }]
+            args: [{ selector: 'oauth-login', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"loginTemplate; else defaultLogin\"\r\n              [ngTemplateOutlet]=\"loginTemplate\"\r\n              [ngTemplateOutletContext]=\"{login: loginFunction, logout: logoutFunction, status: status$ | async}\">\r\n</ng-container>\r\n<ng-template #defaultLogin>\r\n  <ng-container *ngIf=\"status$ | async as status\">\r\n    <ng-container *ngIf=\"type === OAuthType.RESOURCE; else noResource\">\r\n      <div class=\"oauth dropdown text-end {{collapse ? 'show': ''}}\">\r\n        <button class=\"btn btn-link p-0 dropdown-toggle\"\r\n                (click)=\"status === OAuthStatus.AUTHORIZED ? logout() : toggleCollapse()\">\r\n          <ng-container *ngTemplateOutlet=\"message\"></ng-container>\r\n        </button>\r\n        <div class=\"dropdown-menu mr-3 {{collapse ? 'show': ''}}\">\r\n          <form class=\"p-3\"\r\n                #form=\"ngForm\"\r\n                *ngIf=\"status === OAuthStatus.NOT_AUTHORIZED || status === OAuthStatus.DENIED\"\r\n                (submit)=\"login({username: username, password: password})\">\r\n            <div class=\"mb-3\">\r\n              <input type=\"text\"\r\n                     class=\"form-control\"\r\n                     name=\"username\"\r\n                     required\r\n                     [(ngModel)]=\"username\"\r\n                     [placeholder]=\"i18n.username\">\r\n            </div>\r\n            <div class=\"mb-3\">\r\n              <input type=\"password\"\r\n                     class=\"form-control\"\r\n                     name=\"password\"\r\n                     required\r\n                     [(ngModel)]=\"password\"\r\n                     [placeholder]=\"i18n.password\">\r\n            </div>\r\n            <div class=\"text-end\">\r\n              <button type=\"submit\"\r\n                      class=\"btn btn-primary\"\r\n                      [disabled]=\"form.invalid\">{{i18n.submit}}</button>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #noResource>\r\n      <a role=\"button\"\r\n         class=\"oauth\"\r\n         (click)=\"status === OAuthStatus.AUTHORIZED ? logout() : login({responseType: responseType,  redirectUri: redirectUri, state:state})\">\r\n        <ng-container *ngTemplateOutlet=\"message\"></ng-container>\r\n      </a>\r\n    </ng-template>\r\n\r\n    <ng-template #message>\r\n      <span class=\"not-authorized\"\r\n            *ngIf=\"status === OAuthStatus.NOT_AUTHORIZED\"\r\n            [innerHTML]=\"i18n.notAuthorized\"></span>\r\n      <span class=\"authorized\"\r\n            *ngIf=\"status === OAuthStatus.AUTHORIZED\">\r\n        <span class=\"welcome\" [innerHTML]=\"i18n.authorized + '&nbsp;'\"></span>\r\n        <strong class=\"profile-name\"\r\n                [innerHTML]=\"profileName\"></strong>\r\n      </span>\r\n      <span class=\"denied\"\r\n            *ngIf=\"status === OAuthStatus.DENIED\"\r\n            [innerHTML]=\"i18n.denied\"></span>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n", 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: function () { return [{ type: OAuthService }, { type: i2.Location }, { type: Location, decorators: [{
                     type: Inject,
                     args: [LOCATION]
-                }] }]; }, propDecorators: { i18n: [{
+                }] }]; }, propDecorators: { type: [{
+                type: Input
+            }], i18n: [{
                 type: Input
             }], redirectUri: [{
                 type: Input
+            }], responseType: [{
+                type: Input
             }], useLogoutUrl: [{
                 type: Input
             }], state: [{
@@ -602,10 +577,10 @@ const mockLocation = (serverHost, serverPath) => {
         href, origin, protocol, host, hostname, port, pathname, search, hash,
         reload() {
         },
-        assign(u) {
+        assign(_) {
         },
         ancestorOrigins: {},
-        replace(u) {
+        replace(_) {
         }
     };
 };
@@ -642,6 +617,14 @@ const StorageService = {
     },
     deps: [PLATFORM_ID]
 };
+const OAuthHttpClient = {
+    provide: OAUTH_HTTP_CLIENT,
+    useFactory(httpBackend) {
+        // avoid http interceptors
+        return new HttpClient(httpBackend);
+    },
+    deps: [HttpBackend]
+};
 const OAuthInterceptorService = {
     provide: HTTP_INTERCEPTORS,
     useClass: OAuthInterceptor,
@@ -661,26 +644,28 @@ class OAuthModule {
             providers: [
                 LocationService,
                 StorageService,
-                OAuthService,
-                OAuthInterceptorService,
+                OAuthHttpClient,
                 provideOAuthConfigFactory((storage) => ({
                     ...defaultConfig(storage),
                     ...config
                 }), [STORAGE]),
+                TokenService,
+                OAuthInterceptorService,
+                OAuthService,
             ]
         };
     }
 }
-OAuthModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-OAuthModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.5", ngImport: i0, type: OAuthModule, declarations: [OAuthLoginComponent], imports: [CommonModule,
+OAuthModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+OAuthModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: OAuthModule, declarations: [OAuthLoginComponent], imports: [CommonModule,
         FormsModule,
         HttpClientModule,
         RouterModule], exports: [OAuthLoginComponent] });
-OAuthModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthModule, imports: [CommonModule,
+OAuthModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthModule, imports: [CommonModule,
         FormsModule,
         HttpClientModule,
         RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: OAuthModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OAuthModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -702,5 +687,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { LOCATION, OAUTH_CONFIG, OAUTH_TOKEN, OAuthConfig, OAuthInterceptor, OAuthLoginComponent, OAuthModule, OAuthService, OAuthStatus, OAuthType, SERVER_HOST, SERVER_PATH, STORAGE, provideOAuthConfig, provideOAuthConfigFactory };
+export { HEADER_APPLICATION, LOCATION, OAUTH_CONFIG, OAUTH_HTTP_CLIENT, OAUTH_TOKEN, OAuthConfig, OAuthInterceptor, OAuthLoginComponent, OAuthModule, OAuthService, OAuthStatus, OAuthType, SERVER_HOST, SERVER_PATH, STORAGE, provideOAuthConfig, provideOAuthConfigFactory };
 //# sourceMappingURL=ngx-oauth.mjs.map