- “@auth0/auth0-angular”: “^1.9.0”
- Node 16.14.2
I’m building a web app where I need users to be able to send invites to other users.
The flow I’ve built is that a user fills in some data, and a link is created for the invitee to use.
The invitee clicks the link and hits my application. If they are logged in with Auth0 they should be sent to a specific invitation page, if not they should sign up and then be redirected to that invitation page.
I’m currently 90% of the way there but I’m seeing some behaviour from the Auth0 SDK that appears odd. I wonder if it’s a bug or maybe I’m making some assumptions about the library that don’t pan out?
The link a new user clicks on looks like this:
http://localhost:4200/join/1a689e52-f35b-4bda-901c-ea4f076bdc2c/bfd2baf4-2fe1-4b64-8fde-3d89241945e3
This should trigger a route to the invitation component behind this route:
{
path: 'join/:companyId/:referral',
component: JoinComponent,
canActivate: [ReferralGuard]
}
I know this works because when I remove the guard, the page loads (though the page fails to render as it expects Auth0 data to be present).
Here is the ReferralGuard:
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import {concatMap, iif, Observable, of} from 'rxjs';
import {AuthService} from '@auth0/auth0-angular';
import {map} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ReferralGuard implements CanActivate {
constructor(private authService: AuthService) {
}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> {
return this.authService.isAuthenticated$.pipe(
concatMap((result) =>
iif(
() => result,
of(true),
this.authService.loginWithRedirect({screen_hint: 'signup'}).pipe(map((_) => false))
)
)
);
}
}
The logic for this is that we should check the authService provided by the angular SDK and check id the isAuthenticated$ observable is true or false. If it’s true we don’t need to redirect them, send them through and all their auth0 data should be available for the app to use. If not, redirect them to the my universal sign up page. They make and account and the second time around the ReferralGuard detects they are logged in and lets them through.
That’s the theory. But it’s not working.
When this guard is being run, isAuthenticated$ is returning false, and so activation of the route fails, and the user is instead directed to a different part of the application. My question is, why?
Should I be checking isLoaded$ first? Is there something to do with routing or where a guard is run that means the angular sdk isn’t ready?
Has anyone encountered this before? Literally everything in my feature works, except for this pesky isAuthenticated$ observable returning false when I think it should return true.
Can anyone help?