Microsoft-authentication-library-for-js: @azure/msal-angular on .NET Core Project. Timeout leaves application unresponsive

[HockeyJustin]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Browser:

• [ X] Chrome version 78
• [ X] Firefox version XX
• [X ] IE version XX
• [ X] Edge version XX
• [X ] Safari version XX

Library version

Library version: 0.1.4

Current behavior

I have an Angular 8 project. It uses the MSAL Angular Guard to protect resources and access an API.

Module.ts

@NgModule({
    declarations: [
        ExampleComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        MsalModule
    ],
    providers: [
        MsalService,
        {
            provide: MSAL_CONFIG,
            useValue: getConfig()
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: HttpErrorInterceptorService,
            multi: true,
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Routing

const routes: Routes = [

    { path: 'home', component: HomeComponent },
    { path: 'example', component: ExampleComponent, canActivate: [MsalGuard] },
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    //{ path: '**', redirectTo: '/home', pathMatch: 'full' },

];

@NgModule({
    imports: [RouterModule.forRoot(routes)], /* Azure AD cannot return to a hash url! */
  exports: [RouterModule]
})
export class AppRoutingModule { }

getCurrentStatus(): Observable<Example> {

    var url = this.baseUrl + 'GetCurrentStatus';

    return this.http.get<Example>(url).pipe(
        catchError((e: any) => {
            return throwError(e);
        }));
}

Everything works fine during normal processing. The MSAL guard brings up the login page, which returns nicely and from there, the API can be called.

However, if you leave the page open overnight and go to interact with the API again in the morning the program doesn't resond.

The Chrome console provides the following error:

Refused to display 'https://m.facebook.com/dialog/oauth?client_id=111111111111111&redirect_uri=https%3A%2F%2Fmytestau.b2clogin.com%2Fmytestau.onmicrosoft.com%2Foauth2%2Fauthresp&response_type=code&scope=email&state=StateProperties%3DeyJZZZZZZZZZZZ.....' in a frame because it set 'X-Frame-Options' to 'deny'.

and

ERROR Token renewal operation failed due to timeout|Token Renewal Failed

I can't seem to find a hook to handle this manually.

Expected behavior

Application either bring up the authentication screen or authenticates silently.

Minimal reproduction of the problem with instructions

1. Create an Angular Project in a .NET Core Project
2. Set up MSAL-Angular with guard
3. Log in, leave it overnight.
4. Try to access your API again

[jasonnutter]

@HockeyJustin We're aware of issues with renewing tokens in Angular apps, we hope this will get fixed when MSAL Angular is upgraded to v1 of MSAL. This work is ongoing, we'll post here when there is a version available with a potential fix. Thanks!

[HockeyJustin]

@jasonnutter . Thanks for getting back to me. Do you have any idea on the timeline for that please? We are starting to create a production system, so it would be good to know whether to hold out for the update or to work out a way of incorporating msal directly for now (entirely possible, but I'd prefer not to do).

[jasonnutter]

@HockeyJustin We're currently planning to have a preview release this month, with GA early next year.

[jasonnutter]

@HockeyJustin Can you please try the latest MSAL Angular beta and let me know if it fixes this issue? https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev-angular-1.0-protectedresources/lib/msal-angular/docs/0.x-1.x-upgrade-guide.md

[HockeyJustin]

@jasonnutter . Thanks for the update. Unfortunately, It will be a few weeks until I get the chance, but I'll defintely get on it and let you know the result. Thanks for the update.

[HockeyJustin]

@jasonnutter - Thanks for the upgrade tips. That was really handy.

I can confirm the issue is fixed. The latest version is a big improvement on the early alpha I was previous using.

Thanks.