changed auth guard to wait for auth process to finish to prevent mult…

…iple login calls resulting in a wrong redirect
auth0-samples · Sep 13, 2020 · b7c3a1b · b7c3a1b
1 parent 6ab4b71
commit b7c3a1b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/01-Login/src/app/auth/auth.guard.ts b/01-Login/src/app/auth/auth.guard.ts
@@ -7,7 +7,7 @@ import {
 } from '@angular/router';
 import { Observable } from 'rxjs';
 import { AuthService } from './auth.service';
-import { tap } from 'rxjs/operators';
+import { skipWhile, switchMap, tap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -20,13 +20,14 @@ export class AuthGuard implements CanActivate {
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): Observable<boolean> | Promise<boolean|UrlTree> | boolean {
-    return this.auth.isAuthenticated$.pipe(
+    return this.auth.isAuthInProgress$.pipe(
+      skipWhile((inProgress: boolean) => inProgress),
+      switchMap(inProgress => this.auth.isAuthenticated$),
       tap(loggedIn => {
         if (!loggedIn) {
           this.auth.login(state.url);
         }
-      })
-    );
+      }));
   }
 
 }
diff --git a/01-Login/src/app/auth/auth.service.ts b/01-Login/src/app/auth/auth.service.ts
@@ -35,6 +35,9 @@ export class AuthService {
   // Create subject and public observable of user profile data
   private userProfileSubject$ = new BehaviorSubject<any>(null);
   userProfile$ = this.userProfileSubject$.asObservable();
+
+  isAuthInProgress$ = new BehaviorSubject<boolean>(false);
+
   // Create a local property for login status
   loggedIn: boolean = null;
 
@@ -89,6 +92,8 @@ export class AuthService {
     // Call when app reloads after user logs in with Auth0
     const params = window.location.search;
     if (params.includes('code=') && params.includes('state=')) {
+      this.isAuthInProgress$.next(true);
+
       let targetRoute: string; // Path to redirect to after login processsed
       const authComplete$ = this.handleRedirectCallback$.pipe(
         // Have client, now call method to handle auth callback redirect
@@ -107,6 +112,8 @@ export class AuthService {
       // Subscribe to authentication completion observable
       // Response will be an array of user and login status
       authComplete$.subscribe(([user, loggedIn]) => {
+        this.isAuthInProgress$.next(false);
+
         // Redirect to target route after callback processing
         this.router.navigateByUrl(targetRoute);
       });

diff --git a/02-Calling-an-API/src/app/auth/auth.guard.ts b/02-Calling-an-API/src/app/auth/auth.guard.ts
@@ -7,7 +7,7 @@ import {
 } from '@angular/router';
 import { Observable } from 'rxjs';
 import { AuthService } from './auth.service';
-import { tap } from 'rxjs/operators';
+import { skipWhile, switchMap, tap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -20,13 +20,14 @@ export class AuthGuard implements CanActivate {
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): Observable<boolean> | Promise<boolean|UrlTree> | boolean {
-    return this.auth.isAuthenticated$.pipe(
+    return this.auth.isAuthInProgress$.pipe(
+      skipWhile((inProgress: boolean) => inProgress),
+      switchMap(inProgress => this.auth.isAuthenticated$),
       tap(loggedIn => {
         if (!loggedIn) {
           this.auth.login(state.url);
         }
-      })
-    );
+      }));
   }
 
 }
diff --git a/02-Calling-an-API/src/app/auth/auth.service.ts b/02-Calling-an-API/src/app/auth/auth.service.ts
@@ -36,6 +36,9 @@ export class AuthService {
   // Create subject and public observable of user profile data
   private userProfileSubject$ = new BehaviorSubject<any>(null);
   userProfile$ = this.userProfileSubject$.asObservable();
+
+  isAuthInProgress$ = new BehaviorSubject<boolean>(false);
+
   // Create a local property for login status
   loggedIn: boolean = null;
 
@@ -98,6 +101,8 @@ export class AuthService {
     // Call when app reloads after user logs in with Auth0
     const params = window.location.search;
     if (params.includes('code=') && params.includes('state=')) {
+      this.isAuthInProgress$.next(true);
+
       let targetRoute: string; // Path to redirect to after login processsed
       const authComplete$ = this.handleRedirectCallback$.pipe(
         // Have client, now call method to handle auth callback redirect
@@ -116,6 +121,8 @@ export class AuthService {
       // Subscribe to authentication completion observable
       // Response will be an array of user and login status
       authComplete$.subscribe(([user, loggedIn]) => {
+        this.isAuthInProgress$.next(false);
+
         // Redirect to target route after callback processing
         this.router.navigate([targetRoute]);
       });