Angular 9 application with Auth0 keeps on redirecting after successful login in Firefox

Help
, , ,
1

Hi all!

I’m working on an Angular project where we decided to use Auth0 for authentication. We implemented everything a while ago and all was good. I made the mistake of only testing the application in Chrome but then discover that using our application with Firefox doesn’t work.

You get the Auth0 login screen and you are able to login but then when it redirects to our application you can see that it tries to load our application but seems to be stuck continuously reloading the redirect URL. I used the example code provided by Auth0 and really didn’t add anything special. So I thought this would occur to a lot more people but in general I can’t really find anyone who had the same issue and found the answer on why its keeps on reloading the redirect URL in Firefox.

Does anyone have a clue what is going wrong in Firefox and how I can fix the issue?

2 Likes
3

Welcome and thank you for posting in Auth0 community @ivanrompa :tada: :partying_face:

Are you able to share the url so I can test? If not, can you please send two HAR files of the login flow for both firefox and chrome through a PM.

Thanks!

4

I am facing the same issue with an Angular 9 application.

This only happens some of the time in development and is hard to reproduce.
The only way out is clearing all cookies.

In my case, I tweaked the auth.service from the examples:

  • the auth0Client.isAuthenticated function is returning true
  • after that, I call auth0Client.getTokenSilently
  • this does trigger a redirect, which in turn does not show the login page, because the user is logged in,-

repeating the cycle over and over again.

Looking forward to your code / solution to gain more insight in my own.

1 Like
5

Got a similar issue. I’m trying to make a role guard to check if a user has a certain role in his access token. My code

import { Injectable } from '@angular/core';

import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';

import { Observable } from 'rxjs';

import { AuthService } from './auth.service';

import { tap, filter } from 'rxjs/operators';

@Injectable()

export class AdminGuard implements CanActivate {

  constructor(

    private auth: AuthService,

    private router: Router

  ) { }

  canActivate(

    next: ActivatedRouteSnapshot,

    state: RouterStateSnapshot

  ): Observable<boolean> | Promise<boolean | UrlTree> | boolean {

    return this.auth.userProfile$.pipe(

      filter((value) => !!value),

      tap(userProfile => {

        const groups = userProfile['https://xxxxxxx/claims/groups'];

        const isAdmin = groups.indexOf('Admin') > -1;

        if (isAdmin) {

          console.log('is admin');

          return true;

        } else {

          this.router.navigate(['/error/access']);

          return false;

        }

      })

    );

  }

}

the code works. But when surfing to the url I get redirected to the homepage.

6

@ivanrompa do you managed to solve this problem? I’m having the same issue and didn’t figure it out yet…

firefox or crome anonymous tab is not working.

2 Likes
7

has this been solved yet? I am using angular 9 and sometimes I am required to login more than once. The problem seems to be solved when I set initialNavigation: false in the routing module: imports:
[RouterModule.forRoot(routes, {initialNavigation: false})]

What’s the official solution for this?

8

Hi all, I managed to solve this issue by setting the url with ?code at the beginning of handleAuthCallback function and pass the url in client.handleRedirectCallback(this.urlFromAuth0) and add some delay to isAuthenticated$

private urlFromAuth: string;

handleRedirectCallback$ = this.auth0Client$.pipe(
    concatMap((client: Auth0Client) => from(client.handleRedirectCallback(this.urlFromAuth)))
  );

isAuthenticated$ = this.auth0Client$.pipe(
    delay(500), // add delay to pipe
    switchMap((client: Auth0Client) => from(client.isAuthenticated())),
    tap(res => this.loggedIn = res)
  );

  private handleAuthCallback() {
    // Call when app reloads after user logs in with Auth0
    this.urlFromAuth0 = window.location.href;
    const params = window.location.search;
    ...
   }
3 Likes
9

Thanks for sharing that with the rest of community @kphay-11!

10

Dear @kphay-11
Thank you very much for sharing this.

I have been struggling with a different symptom (There are no query params available for parsing) for the last couple of days on Safari and Chrome, with no redirect loop.

Your solution fixed my issue (I don’t need the delay though). Thanks a lot!!!

@konrad.sopala Any idea why client.handleRedirectCallback(url) needs the url? Is there a timing/race condition? It used to failed sporadically for me with 1.8.2 until I moved to 1.10 and now I could no longer login at all (Angular 9.1)

11

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.