We have a WebApp developed with Angular 14. It is deployed on Azure Blob Storage (static website). Authentification is done with the msal library for javascript. Azure AD B2C is used as identity provider.
To logout we use the method msalService.logoutRedirect() which will then redirect to our login page again. This works for all devices without a problem except on iPhones using the Safari browser. When we logout on iPhone/Safari it sometimes gets stuck and Safari displays a "neverending" network request (where google.fonts are loaded but I doubt this is really the case). The page itself then displays a whitescreen and the network tab displays a never ending network request:
If you then try to manually refresh the page the following errors are shown in the console (the screen is still white, but after about a minute Safari is usually able to recover from this state and you see the login page again):
Whenever we deploy, the built WebApp is deployed to the Blob Storage (older versions are not deleted first, so there are unreferenced/unused files on the Blob Storage). This error is not reproducable (until now) on a temporary stage on a different blob storage account (that only holds the current version and no unreferenced files).
Has anyone an idea if there could be a difference in the Azure Blob Storage itself, that could cause this? Otherwise, could the MsalInterceptor and the MsalGuard somehow interfere and cause this problem?
Additional information and code snippets:
We handle the redirect observable by bootstrapping the MsalRedirectComponent and add it to the index.html file. We use the MsalGuard and the MsalInterceptor and have them configured like this:
@NgModule({
// declarations, imports, exports...,
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MsalInterceptor,
multi: true,
},
{
provide: MSAL_INTERCEPTOR_CONFIG,
useFactory: () => ({
interactionType: InteractionType.Redirect,
protectedResourceMap: authConfig.protectedResources,
authRequest: {
scopes: environment.auth.scopes,
},
}),
},
MsalGuard,
{
provide: MSAL_GUARD_CONFIG,
useFactory: () => ({
interactionType: InteractionType.Redirect,
authRequest: {
scopes: environment.auth.scopes,
},
}),
},
// some other providers
]
})
We are listening for the InteractionStatus.None from the inProgress$ observable before we load the current logged in user like this:
this.msalBroadcastService.inProgress$.pipe(
filter(status => status === InteractionStatus.None)
).subscribe(...)
