title: Angular Auth0 after login secured auth guard page doesn't show after redirect
body: <p>I am testing Auth0 with angular for the first time and have run into an issue. I let my user login trough Auth0 and after they have logged in I redirect them to my dashboard page that is protected with Auth0 guard. I have managed to redirect the user but after they log in the URL shows that the user is on the dashboard route however they can't see the actual dashboard content. I tried to see what is going on and I think the problem is that the user is logged in but the auth guard boolean is never set to true which makes my program continuously refresh the URL. When I take the auth guard off the route the redirect works and shows the content. I have played around with the code hoping to figure it out but so far no luck. </p>
  
  <p>I will share my code if I have to share more code please let me know.</p>
  
  <p>app.module.ts</p>
  
  <pre><code>const appRoutes: Routes = [
  
  
    { path: 'app-dashboard', component: DashboardComponent, 
     canActivate: [AuthGuard]
   },
    { path: 'login', component: LoginComponent },
    { path: 'app-shell-start', component: ShellStartComponent },
    {
      path: '',
  
      redirectTo: '/app-shell-start',
  
      pathMatch: 'full'
  
    },
  ];
  </code></pre>
  
  <p>auth.guard.ts</p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class AuthGuard implements CanActivate {
  
    constructor(private auth: AuthService, public router:Router) {}
  
    canActivate(
      next: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable&lt;boolean&gt; | Promise&lt;boolean|UrlTree&gt; | boolean {
      console.log("start")
      return this.auth.isAuthenticated$.pipe(
        tap(loggedIn =&gt; {
          console.log("loggedIn",loggedIn)
          this.router.navigate(['']);
          if (!loggedIn) {
            this.auth.login(state.url);
          }
        })
      );
    }
  
  }
  
  </code></pre>
  
  <p>auth.services.spec.ts</p>
  
  <pre><code>import { TestBed } from '@angular/core/testing';
  
  import { AuthService } from './auth.service';
  
  describe('AuthService', () =&gt; {
    let service: AuthService;
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({});
      service = TestBed.inject(AuthService);
    });
  
    it('should be created', () =&gt; {
      expect(service).toBeTruthy();
    });
  });
  
  </code></pre>
  
  <p>auth.service.ts</p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class AuthService {
    // Create an observable of Auth0 instance of client
    auth0Client$ = (from(
      createAuth0Client({
        domain: "techradartest.eu.auth0.com",
        client_id: "KxM7ICZKf08Mt5czJnxxD3a47HwH3jE1",
        redirect_uri: "http://localhost:4200/app-dashboard" // `${window.location.origin}`
      })
    ) as Observable&lt;Auth0Client&gt;).pipe(
      shareReplay(1), // Every subscription receives the same shared value
      catchError(err =&gt; throwError(err))
    );
    // Define observables for SDK methods that return promises by default
    // For each Auth0 SDK method, first ensure the client instance is ready
    // concatMap: Using the client instance, call SDK method; SDK returns a promise
    // from: Convert that resulting promise into an observable
    isAuthenticated$ = this.auth0Client$.pipe(
      concatMap((client: Auth0Client) =&gt; from(client.isAuthenticated())),
      tap(res =&gt; this.loggedIn = res)
    );
    handleRedirectCallback$ = this.auth0Client$.pipe(
      concatMap((client: Auth0Client) =&gt; from(client.handleRedirectCallback()))
    );
    // Create subject and public observable of user profile data
    private userProfileSubject$ = new BehaviorSubject&lt;any&gt;(null);
    userProfile$ = this.userProfileSubject$.asObservable();
    // Create a local property for login status
    loggedIn: boolean = null;
  
    constructor(private router: Router) {
      // On initial load, check authentication state with authorization server
      // Set up local auth streams if user is already authenticated
      this.localAuthSetup();
      // Handle redirect from Auth0 login
      this.handleAuthCallback();
    }
  
    // When calling, options can be passed if desired
    // https://auth0.github.io/auth0-spa-js/classes/auth0client.html#getuser
    getUser$(options?): Observable&lt;any&gt; {
      return this.auth0Client$.pipe(
        concatMap((client: Auth0Client) =&gt; from(client.getUser(options))),
        tap(user =&gt; this.userProfileSubject$.next(user))
      );
    }
  
    private localAuthSetup() {
      // This should only be called on app initialization
      // Set up local authentication streams
      const checkAuth$ = this.isAuthenticated$.pipe(
        concatMap((loggedIn: boolean) =&gt; {
          if (loggedIn) {
            // If authenticated, get user and set in app
            // NOTE: you could pass options here if needed
            return this.getUser$();
          }
          // If not authenticated, return stream that emits 'false'
          return of(loggedIn);
        })
      );
      checkAuth$.subscribe();
    }
  
    login(redirectPath: string = '/') {
      // A desired redirect path can be passed to login method
      // (e.g., from a route guard)
      // Ensure Auth0 client instance exists
      this.auth0Client$.subscribe((client: Auth0Client) =&gt; {
        // Call method to log in
  
        client.loginWithRedirect({
  
          redirect_uri: "http://localhost:4200/app-dashboard", //`${window.location.origin}`,
          appState: { target: redirectPath }
        });
      });
    }
  
    private handleAuthCallback() {
      // Call when app reloads after user logs in with Auth0
      const params = window.location.search;
      debugger;
  
      if (params.includes('code=') &amp;&amp; params.includes('state=')) {
        console.log("loggedIn handleAuthCallback")
        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
          tap(cbRes =&gt; {
            // Get and set target redirect route from callback results
            targetRoute = cbRes.appState &amp;&amp; cbRes.appState.target ? cbRes.appState.target : '/';
          }),
          concatMap(() =&gt; {
            // Redirect callback complete; get user and login status
            return combineLatest([
              this.getUser$(),
              this.isAuthenticated$
            ]);
          })
        );
        // Subscribe to authentication completion observable
        // Response will be an array of user and login status
        authComplete$.subscribe(([user, loggedIn]) =&gt; {
          // Redirect to target route after callback processing
          console.log("targetRoute: ",targetRoute)
          this.router.navigate([targetRoute]);
        });
      }
    }
  
    logout() {
      // Ensure Auth0 client instance exists
      this.auth0Client$.subscribe((client: Auth0Client) =&gt; {
        // Call method to log out
        client.logout({
          client_id: "KxM7ICZKf08Mt5czJnxxD3a47HwH3jE1",
          returnTo: `${window.location.origin}`
        });
      });
    }
  
  }
  </code></pre>
  
  <p>I am using Angular 9</p>