Merge pull request #8708 from abpframework/fix/8580

Angular UI: Handle OAuth errors

npm/ng-packs/packages/core/src/lib/strategies/auth-flow.strategy.ts

@@ -2,14 +2,21 @@ import { HttpHeaders } from '@angular/common/http';
 import { Injector } from '@angular/core';
 import { Params, Router } from '@angular/router';
 import { Store } from '@ngxs/store';
-import { AuthConfig, OAuthInfoEvent, OAuthService, OAuthStorage } from 'angular-oauth2-oidc';
+import {
+  AuthConfig,
+  OAuthErrorEvent,
+  OAuthInfoEvent,
+  OAuthService,
+  OAuthStorage,
+} from 'angular-oauth2-oidc';
 import { from, Observable, of } from 'rxjs';
 import { filter, switchMap, tap } from 'rxjs/operators';
 import { RestOccurError } from '../actions/rest.actions';
 import { AbpApplicationConfigurationService } from '../proxy/volo/abp/asp-net-core/mvc/application-configurations/abp-application-configuration.service';
-import { SessionStateService } from '../services/session-state.service';
 import { ConfigStateService } from '../services/config-state.service';
 import { EnvironmentService } from '../services/environment.service';
+import { SessionStateService } from '../services/session-state.service';
+import { noop } from '../utils/common-utils';
 
 export interface LoginParams {
   username: string;
@@ -28,6 +35,8 @@ export abstract class AuthFlowStrategy {
   protected configState: ConfigStateService;
   protected oAuthService: OAuthService;
   protected oAuthConfig: AuthConfig;
+  protected appConfigService: AbpApplicationConfigurationService;
+
   abstract checkIfInternalAuth(): boolean;
   abstract navigateToLogin(queryParams?: Params): void;
   abstract logout(): Observable<any>;
@@ -40,7 +49,10 @@ export abstract class AuthFlowStrategy {
     this.environment = injector.get(EnvironmentService);
     this.configState = injector.get(ConfigStateService);
     this.oAuthService = injector.get(OAuthService);
+    this.appConfigService = injector.get(AbpApplicationConfigurationService);
     this.oAuthConfig = this.environment.getEnvironment().oAuthConfig;
+
+    this.listenToOauthErrors();
   }
 
   async init(): Promise<any> {
@@ -66,6 +78,18 @@ export abstract class AuthFlowStrategy {
   protected refreshToken() {
     return this.oAuthService.refreshToken().catch(() => clearOAuthStorage());
   }
+
+  protected listenToOauthErrors() {
+    this.oAuthService.events
+      .pipe(
+        filter(event => event instanceof OAuthErrorEvent),
+        tap(() => clearOAuthStorage()),
+        switchMap(() => this.appConfigService.get()),
+      )
+      .subscribe(res => {
+        this.configState.setState(res);
+      });
+  }
 }
 
 export class AuthCodeFlowStrategy extends AuthFlowStrategy {
@@ -74,7 +98,7 @@ export class AuthCodeFlowStrategy extends AuthFlowStrategy {
   async init() {
     return super
       .init()
-      .then(() => this.oAuthService.tryLogin())
+      .then(() => this.oAuthService.tryLogin().catch(noop))
       .then(() => this.oAuthService.setupAutomaticSilentRefresh({}, 'access_token'));
   }
 
@@ -101,7 +125,6 @@ export class AuthPasswordFlowStrategy extends AuthFlowStrategy {
   readonly isInternalAuth = true;
   private cookieKey = 'rememberMe';
   private storageKey = 'passwordFlow';
-  private appConfigService = this.injector.get(AbpApplicationConfigurationService);
 
   private listenToTokenExpiration() {
     this.oAuthService.events

npm/ng-packs/packages/core/src/lib/utils/initial-utils.ts

@@ -41,9 +41,9 @@ export function getInitialData(injector: Injector) {
           injector.get(SessionStateService).setTenant(currentTenant);
         }),
         catchError(error => {
-          const appInitErrorHandlers = injector.get(APP_INIT_ERROR_HANDLERS);
+          const appInitErrorHandlers = injector.get(APP_INIT_ERROR_HANDLERS, null);
           if (appInitErrorHandlers && appInitErrorHandlers.length) {
-            appInitErrorHandlers.forEach(fn => fn(error));
+            appInitErrorHandlers.forEach(func => func(error));
           }
 
           return throwError(error);

npm/ng-packs/tsconfig.json

@@ -7,6 +7,7 @@
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,