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!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.