No content on admin page reload


I’m currently using NetCore 3.1 and Angular to create a single-page web app with authorization and authentication using new Auth0-spa-js. I have successfully implemented steps from Quickstart guide [Auth0-spa-js], assigned roles via dashboard and added them to token via rule function.

However, there is a problem with retrieving the roles in my angular app.
I have a simple admin page(Admin text in h1 tags) the route of which is protected by CanActivate with standard AuthGuard and my AdminAuthGuard. When I am not signed in and try to manually go “/admin” - I am redirected to Auth0 login page and upon successful login, I am redirected back to “…/admin”, which great. However, whenever I click “refresh page” all of the page content is gone (it’s just a blank white page) except for nav bar and my route becomes just “https://localhost:5001”(no errors, no warnings appear). Afterwards, I still can manually click navbar buttons to back to the page that I was on. This whitelisting does not happen when I am on “/profile” page though that in protected only with AuthGuard.

So, I suppose the problem with retrieving roles from userProfile$.
My AdminAuthGuard looks as follows:
export class RoleGuard implements CanActivate, OnDestroy {
subscription: Subscription;
public auth: AuthService,
public router: Router) {}
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot):
Observable | Promise<boolean|UrlTree> | boolean {
if(!this.auth.loggedIn) {
return false;
//… your role guard check code goes here
const expectedRole =;
var profile;
this.subscription = this.auth.userProfile$.pipe(take(1)).subscribe(res => profile = res);
if (profile)
if(profile[‘’].indexOf(expectedRole) > -1){
console.log(‘Success’, profile);
return true;
return false;

route from app.module.ts:
{ path: ‘admin’, component: AdminComponent,
canActivate: [AuthGuard, RoleGuard],
data: {
expectedRole: ‘Admin’

I would appreciate any help. Thanks in advance for your time and consideration.

Problem solved:
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable | Promise<boolean|UrlTree> | boolean {
const expectedRole =;
return this.auth.userProfile$.pipe(
switchMap(userProfile => userProfile[‘’]),
map((isInRole : string[]) => isInRole.indexOf(expectedRole) > -1)

1 Like

Thanks for sharing that with the rest of community! Glad you have figured it out!