No content on admin page reload

[unknown-enot]

Hi,

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:
@Injectable()
export class RoleGuard implements CanActivate, OnDestroy {
subscription: Subscription;
constructor(
public auth: AuthService,
public router: Router) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot):
Observable | Promise<boolean|UrlTree> | boolean {
if(!this.auth.loggedIn) {
return false;
}
//… your role guard check code goes here
const expectedRole = route.data.expectedRole;
var profile;
this.subscription = this.auth.userProfile$.pipe(take(1)).subscribe(res => profile = res);
if (profile)
{
if(profile[‘https://dev-eu-vega.com/roles’].indexOf(expectedRole) > -1){
console.log(‘Success’, profile);
return true;
}
}
this.router.navigate([‘/notauthorized’]);
return false;
};
ngOnDestroy(){
//this.subscription.unsubscribe();
}
}

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.

[unknown-enot]

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

[konrad.sopala]

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