Auth fail && loop refresh in Firefox && Anonymous tab chrome

Hey everybody. I am new to auth0.

The development is all ok when in crome, but tests in crome anonymous and firefox gives me an eternal redirect and i’ve no clue what could be going wrong.

Authservice.ts
import { Injectable, ɵConsole } from ‘@angular/core’;
import { Observable, from, throwError, BehaviorSubject, of, combineLatest } from ‘rxjs’;
import { shareReplay, catchError, concatMap, tap } from ‘rxjs/operators’;
import { Router } from ‘@angular/router’;
import createAuth0Client from ‘@auth0/auth0-spa-js’;
import Auth0Client from ‘@auth0/auth0-spa-js/dist/typings/Auth0Client’;

declare let require: any;
let config = require("./../../../../auth_config.json");

@Injectable({
	providedIn: 'root'
})
export class AuthService {
// Create an observable of Auth0 instance of client
	auth0Client$ = (
		from(
			createAuth0Client({
				domain: config.domain,
				client_id: config.clientId,
				redirect_uri: `${window.location.origin}`
			})
		) as Observable<Auth0Client>
	).pipe(
		shareReplay(1), // Every subscription receives the same shared value
		catchError(err => 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) =>  from(client.isAuthenticated())),
		tap(res => this.loggedIn = res )
	);

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

	// Create subject and public observable of user profile data
	private userProfileSubject$ = new BehaviorSubject<any>(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<any> {
		return this.auth0Client$.pipe(
			concatMap((client: Auth0Client) => from(client.getUser(options))),
			tap(user => 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) => {
            // console.log('loggedIn' , Auth0Client)
				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 = '/') {
    console.log('redirectPath' , redirectPath)
		// 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) => {
			// Call method to log in
			client.loginWithRedirect({
				redirect_uri: `${window.location.origin}`,
				appState: { target: redirectPath }
			});
		});
	}

	private handleAuthCallback() {
		// Call when app reloads after user logs in with Auth0
    const params = window.location.search;
    console.log('handleAuthCallback' , window.location.search)

		if (params.includes('code=') && params.includes('state=')) {
        console.log('IF handleAuthCallback' , window.location.search)
			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 => {
					// Get and set target redirect route from callback results
					targetRoute = cbRes.appState && cbRes.appState.target ? cbRes.appState.target : '/';
				}),
				concatMap(() => {
					// 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]) => {
				// Redirect to target route after callback processing
				this.router.navigate([targetRoute]);
			});
		}
	}

	logout() {
    console.log('LOG OUT')
		// Ensure Auth0 client instance exists
		this.auth0Client$.subscribe((client: Auth0Client) => {
			// Call method to log out
			client.logout({
				client_id: config.clientId,
				returnTo: window.location.origin
			});
		});
	}
}

AuthGuard

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

`Preformatted text`import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';

import { Observable } from 'rxjs';

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

import { tap } from 'rxjs/operators';

@Injectable({

  providedIn: 'root'

})

export class AuthGuard implements CanActivate {

    constructor(private auth: AuthService) {

    }

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean|UrlTree> | boolean {

        return this.auth.isAuthenticated$.pipe(

            tap(loggedIn => {

                if (!loggedIn) {

                    this.auth.login(state.url);

                }

            })

        );

    }

}

the thing that i’ve noticed is that loggedIn is true normaly, but when in firefox or anonymous tab in crome, it returns false. But in any case it should’t redirect in infinite loop.

Well, hope i can get some help! Thanks you all.

— EDIT -----

When I console.log like this.isAuthenticated$.subscribe(res => console.log(‘res’ , res)));

res = true when in chrome
res = false when in chrome anony. and firefox

the post method where call the “url”.auth0.com/oauth/token returns “200” but with no response.

And it goes to a looping refresh…

Hi,
Did you find a fix for this?
Cheers

1 Like

@tadeu.lima
Did u solve the problem? Could you share with us?

Or you @hd2200

I’m still seeing this problem in March 2021. We’re using the “@auth0/auth0-react” package.

2 Likes

Just a thought. Maybe this is connected to this? Silent Authorization not working after login/signup