ngx-oauth 2.0.0 → 2.1.0

package/fesm2015/ngx-oauth.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, EventEmitter, Component, Input, Output, ContentChild, HostListener, PLATFORM_ID, Optional, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Inject, EventEmitter, Component, ViewEncapsulation, Input, Output, ContentChild, HostListener, PLATFORM_ID, Optional, NgModule } from '@angular/core';
 import { __awaiter } from 'tslib';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { catchError, concatMap, delay, switchMap, tap } from 'rxjs/operators';
-import { ReplaySubject, EMPTY, from, of, noop, throwError, Subscription } from 'rxjs';
+import { filter, map, switchMap, shareReplay, tap, catchError, concatMap, delay } from 'rxjs/operators';
+import { ReplaySubject, of, EMPTY, from, noop, throwError, Subscription, take } from 'rxjs';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i3 from '@angular/forms';
@@ -16,6 +16,7 @@ const SERVER_PATH = new InjectionToken('SERVER_PATH');
 const LOCATION = new InjectionToken('Location');
 const STORAGE = new InjectionToken('Storage');
 const OAUTH_CONFIG = new InjectionToken('OAuthConfig');
+const OAUTH_TOKEN = new InjectionToken('OAuthToken');
 var OAuthType;
 (function (OAuthType) {
     OAuthType["RESOURCE"] = "password";
@@ -57,100 +58,116 @@ const parseOauthUri = (hash) => {
     }
     return null;
 };
+const jwt = (token) => JSON.parse(atob(token.split('.')[1]));
 class OAuthService {
-    constructor(http, zone, authConfig, locationService) {
+    constructor(http, zone, authConfig, location, locationService) {
         this.http = http;
         this.zone = zone;
         this.authConfig = authConfig;
+        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.init();
+        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.set(this.type, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, 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 } || {}), 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.locationService;
-        const isImplicitRedirect = hash && /(#access_token=)|(#error=)/.test(hash);
+        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]);
-        if (isImplicitRedirect) {
-            const parameters = parseOauthUri(hash.substr(1));
-            this.emitState(parameters);
-            this.cleanLocationHash();
-            if (!parameters || parameters.error) {
-                this.token = null;
-                this.status = OAuthStatus.DENIED;
-            }
-            else {
+        this.config$.subscribe(config => {
+            if (isImplicitRedirect) {
+                const parameters = parseOauthUri(hash.substr(1));
                 this.token = parameters;
-                this.status = OAuthStatus.AUTHORIZED;
+                this.status = this.checkResponse(savedToken, parameters) && OAuthStatus.AUTHORIZED || OAuthStatus.DENIED;
             }
-        }
-        else if (isAuthCodeRedirect) {
-            const parameters = parseOauthUri(search.substr(1));
-            this.emitState(parameters);
-            const newParametersString = this.getCleanedUnSearchParameters();
-            if (parameters && parameters.code) {
-                const { clientId, clientSecret, tokenPath, scope } = this.authConfig.config;
-                const codeVerifier = savedToken && savedToken.codeVerifier;
-                setTimeout(() => {
+            else if (isAuthCodeRedirect) {
+                const parameters = parseOauthUri(search.substr(1));
+                if (!this.checkResponse(savedToken, parameters)) {
+                    this.token = parameters;
+                    this.status = OAuthStatus.DENIED;
+                }
+                else {
+                    const newParametersString = this.getCleanedUnSearchParameters();
+                    const { clientId, clientSecret, tokenPath, scope } = config;
+                    const codeVerifier = savedToken && savedToken.codeVerifier;
                     this.http.post(tokenPath, new HttpParams({
-                        fromObject: Object.assign(Object.assign(Object.assign(Object.assign({ code: parameters.code, client_id: clientId }, clientSecret && { client_secret: clientSecret } || {}), { redirect_uri: `${origin}${pathname}${newParametersString}`, grant_type: 'authorization_code' }), scope && { scope } || {}), codeVerifier && { code_verifier: codeVerifier } || {})
-                    }), { headers: REQUEST_HEADER }).pipe(catchError(() => {
-                        this.token = { error: 'error' };
+                        fromObject: Object.assign(Object.assign(Object.assign(Object.assign({ code: parameters === null || parameters === void 0 ? void 0 : parameters.code, client_id: clientId }, clientSecret && { client_secret: clientSecret } || {}), { redirect_uri: `${origin}${pathname}${newParametersString}`, grant_type: 'authorization_code' }), scope && { scope } || {}), codeVerifier && { code_verifier: codeVerifier } || {})
+                    }), { headers: REQUEST_HEADER }).pipe(catchError((err) => {
+                        this.token = err;
                         this.status = OAuthStatus.DENIED;
-                        this.locationService.href = `${origin}${pathname}${newParametersString}`;
+                        this.locationService.replaceState(`${pathname}${newParametersString}`);
                         return EMPTY;
                     })).subscribe(token => {
                         this.token = token;
-                        // authorized event will be triggered after redirect
-                        this.locationService.href = `${origin}${pathname}${newParametersString}`;
+                        this.status = OAuthStatus.AUTHORIZED;
+                        this.locationService.replaceState(`${pathname}${newParametersString}`);
                     });
-                });
-            }
-            else {
-                this.token = null;
-                this.status = OAuthStatus.DENIED;
-            }
-        }
-        else if (savedToken) {
-            const { access_token, refresh_token, error } = savedToken;
-            if (error) {
-                this.token = null;
-                this.status = OAuthStatus.DENIED;
+                }
             }
-            else if (access_token) {
-                this.token = savedToken;
-                if (refresh_token) {
-                    setTimeout(() => {
+            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 = OAuthStatus.AUTHORIZED;
+                    this.status = error && OAuthStatus.DENIED || OAuthStatus.NOT_AUTHORIZED;
                 }
             }
-        }
-        else {
-            this.status = OAuthStatus.NOT_AUTHORIZED;
-        }
+            else {
+                this.status = OAuthStatus.NOT_AUTHORIZED;
+            }
+        });
     }
     login(parameters) {
-        if (this.isResourceType(parameters)) {
-            this.resourceLogin(parameters);
-        }
-        else if (this.isAuthorizationCodeType(parameters)) {
-            this.authorizationCodeLogin(parameters).then();
-        }
-        else if (this.isImplicitType(parameters)) {
-            this.implicitLogin(parameters).then();
-        }
-        else if (this.isClientCredentialType()) {
-            this.clientCredentialLogin();
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isResourceType(parameters)) {
+                this.resourceLogin(parameters);
+            }
+            else if (this.isAuthorizationCodeType(parameters)) {
+                yield this.authorizationCodeLogin(parameters);
+            }
+            else if (this.isImplicitType(parameters)) {
+                yield this.implicitLogin(parameters);
+            }
+            else if (this.isClientCredentialType()) {
+                this.clientCredentialLogin();
+            }
+        });
     }
     logout() {
         this.revoke();
@@ -195,10 +212,10 @@ class OAuthService {
         const { clientId, clientSecret, tokenPath, scope } = this.authConfig.config;
         const { username, password } = parameters;
         this.http.post(tokenPath, new HttpParams({
-            fromObject: Object.assign(Object.assign({ client_id: clientId, client_secret: clientSecret, grant_type: OAuthType.RESOURCE }, scope ? { scope } : {}), { username,
+            fromObject: Object.assign(Object.assign(Object.assign(Object.assign({ client_id: clientId }, clientSecret && { client_secret: clientSecret } || {}), { grant_type: OAuthType.RESOURCE }), scope && { scope } || {}), { username,
                 password })
-        }), { headers: REQUEST_HEADER }).pipe(catchError(() => {
-            this.token = null;
+        }), { headers: REQUEST_HEADER }).pipe(catchError(err => {
+            this.token = err;
             this.status = OAuthStatus.DENIED;
             return EMPTY;
         })).subscribe(params => {
@@ -209,13 +226,13 @@ class OAuthService {
     authorizationCodeLogin(parameters) {
         return __awaiter(this, void 0, void 0, function* () {
             const authUrl = yield this.toAuthorizationUrl(parameters, OAuthType.AUTHORIZATION_CODE);
-            this.locationService.replace(authUrl);
+            this.location.replace(authUrl);
         });
     }
     implicitLogin(parameters) {
         return __awaiter(this, void 0, void 0, function* () {
             const authUrl = yield this.toAuthorizationUrl(parameters, OAuthType.IMPLICIT);
-            this.locationService.replace(authUrl);
+            this.location.replace(authUrl);
         });
     }
     clientCredentialLogin() {
@@ -246,21 +263,46 @@ class OAuthService {
     toAuthorizationUrl(parameters, responseType) {
         return __awaiter(this, void 0, void 0, function* () {
             const { config } = this.authConfig;
-            const appendChar = config.authorizePath.includes('?') ? '&' : '?';
-            const clientId = `${appendChar}client_id=${config.clientId}`;
-            const redirectUri = `&redirect_uri=${encodeURIComponent(parameters.redirectUri)}`;
-            const responseTypeString = `&response_type=${responseType}`;
-            const scope = `&scope=${encodeURIComponent(config.scope || '')}`;
-            const state = `&state=${encodeURIComponent(parameters.state || '')}`;
-            const codeVerifier = config.pkce && randomString() || null;
-            if (codeVerifier) {
-                this.token = { codeVerifier }; //save the code verifier before we redirect
+            let authorizationUrl = `${config.authorizePath}`;
+            authorizationUrl += config.authorizePath.includes('?') && '&' || '?';
+            authorizationUrl += `client_id=${config.clientId}`;
+            authorizationUrl += `&redirect_uri=${encodeURIComponent(parameters.redirectUri)}`;
+            authorizationUrl += `&response_type=${responseType}`;
+            authorizationUrl += `&scope=${encodeURIComponent(config.scope || '')}`;
+            authorizationUrl += `&state=${encodeURIComponent(parameters.state || '')}`;
+            return `${authorizationUrl}${this.generateNonce(config)}${yield this.generateCodeChallenge(config)}`;
+        });
+    }
+    generateCodeChallenge(config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (config.pkce) {
+                const codeVerifier = randomString();
+                this.token = Object.assign(Object.assign({}, this.token), { codeVerifier });
+                return `&code_challenge=${yield pkce(codeVerifier)}&code_challenge_method=S256`;
             }
-            const codeChallenge = codeVerifier ? `&code_challenge=${yield pkce(codeVerifier)}&code_challenge_method=S256` : '';
-            const parametersString = `${clientId}${redirectUri}${responseTypeString}${scope}${state}${codeChallenge}`;
-            return `${config.authorizePath}${parametersString}`;
+            return '';
         });
     }
+    generateNonce(config) {
+        if (config && config.scope && config.scope.indexOf('openid') > -1) {
+            const nonce = randomString(10);
+            this.token = Object.assign(Object.assign({}, 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;
+    }
     set token(token) {
         this._token = token;
         const { storageKey } = this.authConfig;
@@ -292,7 +334,7 @@ class OAuthService {
         const { refresh_token } = this.token;
         if (tokenPath && refresh_token) {
             this.http.post(tokenPath, new HttpParams({
-                fromObject: Object.assign(Object.assign(Object.assign({ client_id: clientId }, clientSecret ? { client_secret: clientSecret } : {}), { grant_type: 'refresh_token', refresh_token }), scope ? { scope } : {})
+                fromObject: Object.assign(Object.assign(Object.assign({ client_id: clientId }, clientSecret && { client_secret: clientSecret } || {}), { grant_type: 'refresh_token', refresh_token }), scope && { scope } || {})
             }), { headers: REQUEST_HEADER }).pipe(catchError(() => {
                 this.logout();
                 return EMPTY;
@@ -303,24 +345,24 @@ class OAuthService {
         }
     }
     getCleanedUnSearchParameters() {
-        const { search } = this.locationService;
+        const { search } = this.location;
         let searchString = search.substr(1);
         const hashKeys = ['code', 'state', 'error', 'error_description', 'session_state'];
         hashKeys.forEach((hashKey) => {
             const re = new RegExp('&' + hashKey + '(=[^&]*)?|^' + hashKey + '(=[^&]*)?&?');
             searchString = searchString.replace(re, '');
         });
-        return searchString.length ? `?${searchString}` : '';
+        return searchString.length && `?${searchString}` || '';
     }
     cleanLocationHash() {
-        const { hash } = this.locationService;
+        const { hash } = this.location;
         let curHash = hash.substr(1);
-        const hashKeys = ['access_token', 'token_type', 'expires_in', 'scope', 'state', 'error', 'error_description', 'session_state'];
+        const hashKeys = ['access_token', 'token_type', 'expires_in', 'scope', 'state', 'error', 'error_description', 'session_state', 'nonce'];
         hashKeys.forEach((hashKey) => {
             const re = new RegExp('&' + hashKey + '(=[^&]*)?|^' + hashKey + '(=[^&]*)?&?');
             curHash = curHash.replace(re, '');
         });
-        this.locationService.hash = curHash;
+        this.location.hash = curHash;
     }
     emitState(parameters) {
         const { state } = parameters;
@@ -329,7 +371,7 @@ class OAuthService {
         }
     }
 }
-OAuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OAuthService, deps: [{ token: i1.HttpClient }, { token: i0.NgZone }, { token: OAUTH_CONFIG }, { token: LOCATION }], target: i0.ɵɵFactoryTarget.Injectable });
+OAuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OAuthService, deps: [{ token: i1.HttpClient }, { token: i0.NgZone }, { token: OAUTH_CONFIG }, { token: LOCATION }, { token: i2.Location }], target: i0.ɵɵFactoryTarget.Injectable });
 OAuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OAuthService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OAuthService, decorators: [{
             type: Injectable
@@ -340,7 +382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
                     }] }, { type: Location, decorators: [{
                         type: Inject,
                         args: [LOCATION]
-                    }] }];
+                    }] }, { type: i2.Location }];
     } });
 
 class OAuthInterceptor {
@@ -350,7 +392,7 @@ class OAuthInterceptor {
     intercept(req, next) {
         if (this.oauthService) {
             if (!this.isPathExcepted(req)) {
-                const token = this.oauthService.token;
+                const { token } = this.oauthService;
                 if (token && token.access_token) {
                     req = req.clone({
                         setHeaders: {
@@ -373,13 +415,16 @@ class OAuthInterceptor {
         }
     }
     isPathExcepted(req) {
-        for (const ignorePath of this.oauthService.ignorePaths) {
-            try {
-                if (req.url.match(ignorePath)) {
-                    return true;
+        const { ignorePaths } = this.oauthService;
+        if (ignorePaths) {
+            for (const ignorePath of this.oauthService.ignorePaths) {
+                try {
+                    if (req.url.match(ignorePath)) {
+                        return true;
+                    }
+                }
+                catch (err) {
                 }
-            }
-            catch (err) {
             }
         }
         return false;
@@ -392,8 +437,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
         }], ctorParameters: function () { return [{ type: OAuthService }]; } });
 
 class OAuthLoginComponent {
-    constructor(oauthService, location) {
+    constructor(oauthService, locationService, location) {
         this.oauthService = oauthService;
+        this.locationService = locationService;
         this.location = location;
         this.subscription = new Subscription();
         this._i18n = {
@@ -412,14 +458,15 @@ class OAuthLoginComponent {
         this.OAuthType = OAuthType;
         this.collapse = false;
         this.type = this.oauthService.type;
-        this.redirectUri = this.location.href;
         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$.subscribe(n => this.profileName = n));
+                this.subscription.add(this.profileName$.pipe(take(1)).subscribe(n => this.profileName = n));
             }
             else {
-                this.profileName = '';
+                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);
@@ -431,6 +478,14 @@ class OAuthLoginComponent {
     set i18n(i18n) {
         this._i18n = Object.assign(Object.assign({}, this._i18n), i18n);
     }
+    set redirectUri(redirectUri) {
+        if (redirectUri) {
+            this._redirectUri = redirectUri;
+        }
+    }
+    get redirectUri() {
+        return this._redirectUri || `${this.location.origin}${this.locationService.path(true) || '/'}`;
+    }
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
@@ -438,8 +493,10 @@ class OAuthLoginComponent {
         this.oauthService.logout();
     }
     login(parameters) {
-        this.oauthService.login(parameters);
-        this.collapse = false;
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.oauthService.login(parameters);
+            this.collapse = false;
+        });
     }
     toggleCollapse() {
         this.collapse = !this.collapse;
@@ -448,18 +505,20 @@ class OAuthLoginComponent {
         this.collapse = false;
     }
 }
-OAuthLoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OAuthLoginComponent, deps: [{ token: OAuthService }, { token: LOCATION }], target: i0.ɵɵFactoryTarget.Component });
-OAuthLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OAuthLoginComponent, selector: "oauth-login", inputs: { i18n: "i18n", 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-right 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=\"form-group\">\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=\"form-group\">\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-right\">\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\">{{i18n.notAuthorized}}</span>\r\n      <span *ngIf=\"status === OAuthStatus.AUTHORIZED\">\r\n        {{i18n.authorized}}<strong>&nbsp;{{profileName}}</strong>\r\n      </span>\r\n      <span *ngIf=\"status === OAuthStatus.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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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]" }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i2.AsyncPipe } });
+OAuthLoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OAuthLoginComponent, deps: [{ token: OAuthService }, { token: i2.Location }, { token: LOCATION }], target: i0.ɵɵFactoryTarget.Component });
+OAuthLoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OAuthLoginComponent, selector: "oauth-login", inputs: { i18n: "i18n", redirectUri: "redirectUri", 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\">{{i18n.notAuthorized}}</span>\r\n      <span *ngIf=\"status === OAuthStatus.AUTHORIZED\">\r\n        {{i18n.authorized}}<strong>&nbsp;{{profileName}}</strong>\r\n      </span>\r\n      <span *ngIf=\"status === OAuthStatus.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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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]" }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i2.AsyncPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OAuthLoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oauth-login', 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-right 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=\"form-group\">\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=\"form-group\">\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-right\">\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\">{{i18n.notAuthorized}}</span>\r\n      <span *ngIf=\"status === OAuthStatus.AUTHORIZED\">\r\n        {{i18n.authorized}}<strong>&nbsp;{{profileName}}</strong>\r\n      </span>\r\n      <span *ngIf=\"status === OAuthStatus.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=\"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\">{{i18n.notAuthorized}}</span>\r\n      <span *ngIf=\"status === OAuthStatus.AUTHORIZED\">\r\n        {{i18n.authorized}}<strong>&nbsp;{{profileName}}</strong>\r\n      </span>\r\n      <span *ngIf=\"status === OAuthStatus.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"] }]
         }], ctorParameters: function () {
-        return [{ type: OAuthService }, { type: Location, decorators: [{
+        return [{ type: OAuthService }, { type: i2.Location }, { type: Location, decorators: [{
                         type: Inject,
                         args: [LOCATION]
                     }] }];
     }, propDecorators: { i18n: [{
                 type: Input
+            }], redirectUri: [{
+                type: Input
             }], state: [{
                 type: Input
             }], stateChange: [{
@@ -530,8 +589,7 @@ const defaultConfig = (storage) => {
     return {
         storage,
         storageKey: 'token',
-        ignorePaths: [],
-        pkce: false
+        ignorePaths: []
     };
 };
 class OAuthModule {
@@ -600,4 +658,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { LOCATION, OAUTH_CONFIG, OAuthInterceptor, OAuthLoginComponent, OAuthModule, OAuthService, OAuthStatus, OAuthType, SERVER_HOST, SERVER_PATH, STORAGE };
+export { LOCATION, OAUTH_CONFIG, OAUTH_TOKEN, OAuthInterceptor, OAuthLoginComponent, OAuthModule, OAuthService, OAuthStatus, OAuthType, SERVER_HOST, SERVER_PATH, STORAGE };