We have Angular App which we wrapper in Ionic. In guard class we check if user is authenticated by checking isAutheticated$. Eventhough the user just authenticated the isAuthenticated returns false. Next time it returns true and stays like that. We’ve pretty much followed the example from auth0 site, except there is no guard class there.
We have custom domain on production instance configured and we use refresh tokens and we really run out of ideas
this is my auth guard class
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router, private configService: ConfigService) { }
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.auth.isAuthenticated$.pipe(
tap(loggedIn => {
console.log("isAuthenticated$",loggedIn)
if (!loggedIn) {
this.login();
}
})
);
}
private login() {
this.auth
.loginWithRedirect({
async openUrl(url: string) {
await Browser.open({ url, windowName: '_self' })
}
})
.subscribe(
{
error: err => console.error('Error triggering login', err)
}
);
}
}
this is how we listen for authentication browser events in the main app component
async initAuth0Listener() {
App.addListener('appUrlOpen', ({url}) => {
// Must run inside an NgZone for Angular to pick up the changes
// https://capacitorjs.com/docs/guides/angular
this.ngZone.run(() => {
if (url?.startsWith(callbackUri)) { // || url?.includes('taalhammer.eu.auth0.com')
console.debug('callbackUri '+ callbackUri);
console.debug('url '+ url);
if (url.includes('state=') && (url.includes('error=') || url.includes('code='))) {
this.auth.handleRedirectCallback(url).pipe(
mergeMap(() => {
console.debug('inside handle redirect callback');
this.router.navigateByUrl('/learning', {replaceUrl: true});
return Browser.close();
}
)).subscribe();
} else if (url.includes('callback')) {
this.router.navigateByUrl('/callback', {replaceUrl: true})
Browser.close();
} else {
Browser.close();
}
}
});
});
}
and this is Auth0 client config
onst config: AuthConfig = {
domain,
clientId,
authorizationParams: {
redirect_uri: 'com.taalhammer.app://th-dev.eu.auth0.com/capacitor/com.taalhammer.app/callback',
audience: environment.auth.audience
},
// For using Auth0-Angular with Ionic on Android and iOS,
// it's important to use refresh tokens without the fallback
useRefreshTokens: true,
useRefreshTokensFallback: false,
cacheLocation: 'localstorage',
// The AuthHttpInterceptor configuration https://auth0.com/docs/libraries/auth0-angular-spa#configure-the-http-interceptor
httpInterceptor: {
allowedList: [
`${environment.auth.audience}*`,
{
uri: `https://${ environment.auth.domain }/api/v2/users/`,
tokenOptions: {
authorizationParams: {
audience: `https://${ environment.auth.domain }/api/v2/`,
scope: 'read:users',
}
},
},
]}
};
here’s the screencast with the strange isAuthenticated$ behaviour