How do I listen for MSAL-Angular token reauthentiation requests?

Question

So I've got MSAL-ANGULAR piece working correctly in my angular project. The problem lies when I've left the session open for a certain period of time and MSAL invokes re-authentication request to Azure AD when the token presumably expires. This automatically redirects to Azure AD for verification and will fail if the initiating path is not a registered path in Azure (e.g. localhost:1000/login will succeed but localhost:1000/orders will not).

Ideally I shouldn't have to specify every path permutation in Azure AD so I had the thought that I would intercept the authentication redirect, redirect to the default URL and then initiate the authentication process. Here was my original thinking:

I would think that the following code in the authentication layer would have a hook in place for this i.e.

import { MsalService, BroadcastService } from '@azure/msal-angular';

broadcast.subscribe("msal:loginSuccess",
  () => {
  ...
}
this.broadcast.subscribe("msal:loginFailure",
  () => {
  ...
});

but it doesn't look it hits that piece but, but rather, hooks in within app.routing:

import { MsalGuard } from "@azure/msal-angular";

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent, canActivate: [MsalGuard] },
  { path: 'orders', component: OrdersComponent, canActivate: [MsalGuard] },
];

Any thoughts would be appreciated.

I have a similar problem: I want to redirect the user to the login page when the token expires. Did you find a way to hook into the reauthentification process? — MikhailRatner, Jun 16 '22 at 15:27
Me again. I eventually found a way and documented it here: https://stackoverflow.com/questions/72660096/how-to-redirect-a-user-when-the-access-token-expires-in-msal-for-angular — MikhailRatner, Jun 23 '22 at 11:47

score 2 · Accepted Answer · answered Jun 05 '19 at 15:33

Well, it turns out you can hack the system - all you need to do is use a wildcard within Azure Active Directory's manifest.

i.e.

1/ Log into https://portal.azure.com

2/ Go to Azure Active Directory

3/ Go to App Registrations

4/ Select your app

5/ Open the manifest and set the following:

"replyUrlsWithType": [
    {
        "url": "https://localhost:1000/*",
        "type": "Web"
    }
],

6/ Save ... and voila. This forces Azure AD to accept all URI's from that domain

NOTE: Azure portal actively blocks wildcard matches ... but you can bypass it via the manifest ;)

score 0 · Answer 2 · answered Jun 23 '22 at 12:01

I know you already fixed your problem, but your question was never properly answered. After a long time of research I finally found a proper way to listen for MSAL-Angular token reauthentiation requests.

Below subscription listens to every HTTP request and emits events e.g. 'msal:acquireTokenStart' when your AccessToken is correct and not expired.

In case your AccessToken is incorrect and did expire there is another event which uses the RefreshToken to get a new AccessToken from the Network: 'msal:acquireTokenFromNetworkStart'.

If both tokens are wrong or deleted, 'msal:acquireTokenFailure' gets emited. These emits can be used to, e.g. redirect or logout the user.

 this.msalBroadcastService.msalSubject$.subscribe({
      next: (msalSubject) => {
        if (msalSubject.eventType === 'msal:acquireTokenFailure') {
          // Do something when acquiring of the token fails
        }
       }
      },
    });

Above code is inside ngOnInit. Don't forget to import the MsalBroadcastService and inject it into the constructor.

How do I listen for MSAL-Angular token reauthentiation requests?

2 Answers2