When using the MSALGuard and RoleGuard on a route, the Role guard will allow access even if the user does not have the correct role

Issue

When using the MSALGuard and RoleGuard on a route, the Role guard will allow access even if the user does not have the correct role! This is due to the fact that there is no guard sequence in Angular.

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [x] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call a multi-tenant web API
    - [ ] 7-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 7-2) Call a web API using Proof of Possession tokens

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Change the sample so that the root of the app also needs the MSALGuard, this will trigger the login sequence as soon as someone uses the website. In other words no need for the LOGIN button. Open a new InPrivate windows and navigate straight to an URL that has both guards active. If there was no previous login, the user is redirected to the Azure AD login flow, BUT the RoleGuard already finished it’s check and returned TRUE ( https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/blob/main/5-AccessControl/1-call-api-roles/SPA/src/app/role-guard.service.ts#L34 ). Due to the fact that there were no accounts available yet.

After the login flow of Azure AD the Role guard is no longer checked and the user is presented with the URL he typed in, although he should not be able to see it.

Expected/desired behavior

Role checks can only be done after an account has been acquired AND should be done each time!

Library version

msal-angular: ^2.1.2 angular 13 & 14

Browser and version

Edge

Mention any other details that might be useful

I know this is a limitation of Angular ( there is no guard replay or guard order ), but this Role check example should compensate for this somehow. Because if we want to use role guarding, it should always be checked when we have the user roles available.

[derisen]

Sounds great! Still working on making this extensible by default, hopefully will get this in to msal-angular

[Depechie]

@derisen just wanted to circle back that this works great! But true, now having that baseGuard directly in our code would be nice to get rid off once the base lib has a guard that is extendable.