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

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?

1 Like

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!

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.

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.