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…