Angular Guard Does Nothing

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.14.2

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.0.0

Description

My Angular Guard doesn’t seem to redirect (Or do anything), despite I assume being set up correctly. However if I try and kick off the login process manually, it does work (Although with errors about an interactive process already happening when it redirect backs).

Error Message

Nothing happens.

Msal Logs

Navigated to http://localhost:4200/jobs/mine
msal-config.service.ts:30 cf2c2606-6b1c-413c-ae2b-9dddbef8d115
core.js:27950 Angular is running in development mode. Call enableProdMode() to enable production mode.
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - MsalRedirectComponent activated
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Info - Emitting event: msal:handleRedirectStart
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - handleRedirectPromise called
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - getAllAccounts called
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - handleRedirectPromise has been called for the first time, storing the promise
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Trace - BrowserCacheManager.getTemporaryCache: No cache item found in local storage
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Info - handleRedirectPromise called but there is no interaction in progress, returning null.
core.js:27950 Angular is running in development mode. Call enableProdMode() to enable production mode.
msal-config.service.ts:36 here
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - Event callback registered with id: db893483-cecc-435d-9530-98e00f6b7e97
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - Guard - canLoad
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - MSAL Guard activated
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Info - Emitting event: msal:handleRedirectStart
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - Emitting event to callback db893483-cecc-435d-9530-98e00f6b7e97: msal:handleRedirectStart
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - BroadcastService - msal:handleRedirectStart results in setting inProgress to handleRedirect
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - handleRedirectPromise called
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - getAllAccounts called
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - handleRedirectPromise has been called previously, returning the result from the first call
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Info - Emitting event: msal:handleRedirectEnd
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - Emitting event to callback db893483-cecc-435d-9530-98e00f6b7e97: msal:handleRedirectEnd
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - BroadcastService - msal:handleRedirectEnd results in setting inProgress to none
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-browser@2.14.2 : Verbose - getAllAccounts called
msal-config.service.ts:7 [Mon, 24 May 2021 03:32:59 GMT] :  : @azure/msal-angular@2.0.0 : Verbose - Guard - no accounts retrieved, no state, cannot load

MSAL Configuration

export function MSALClientFactory(): IPublicClientApplication {
    let loggerCallback = (logLevel : any, message : string) => console.log(message);

    let configuration = {
        auth: {
          clientId: environment.authenticationAudience,
          authority: environment.authenticationAuthority,
          redirectUri: environment.authenticationRedirectUri,
          knownAuthorities : [environment.authenticationAuthorityDomain],
          postLogoutRedirectUri: environment.authenticationRedirectUri
        },
        system : 
        {
            loggerOptions: {
                loggerCallback,
                logLevel: LogLevel.Trace,
                piiLoggingEnabled: true
            }
        },
        cache: {
            cacheLocation: BrowserCacheLocation.LocalStorage,
        }
      } as Configuration;

      console.log(environment.authenticationAudience);

    return new PublicClientApplication(configuration);
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
    console.log('here');
    return {
        interactionType : InteractionType.Redirect, 
        authRequest: {
            scopes: [
                'User.Read'
            ]
          }
    };
}

export const environment = {
  production: false,
  apiUrl: 'https://localhost:5001',
  applicationInsightsKey: 'XXX', 
  authenticationAudience : 'cf2c2606-6b1c-413c-ae2b-00000000',
  authenticationAuthority : 'https://abccdev.b2clogin.com/abcdev.onmicrosoft.com/B2C_1_signupsignin',//IMPORTANT NO 2.0 on the end. 
  authenticationAuthorityDomain : 'abc.b2clogin.com',
  authenticationRedirectUri : '/'
};

Relevant Code Snippets

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MsalModule,
    AppRoutingModule,
    HttpClientModule,
    CoreModule,
    BrowserAnimationsModule,
    SharedModule,
    JobsModule,
    AdminModule,
    NotificationsModule,
    HsModule,
    ReportsModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiBaseInterceptor,
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CorrelationInterceptor,
      multi: true,
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALClientFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    },
    {
      provide: ErrorHandler,
      useClass: ApplicationInsightsErrorHandler,
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent], 
})
export class AppModule {}

Reproduction Steps

I know this is not a great explanation but I can download samples and they do work, so I’m just not sure what I’m missing. I’ve tried following the logs that happen inside the guard but I’m not sure what I’m looking at. There is no error so it’s very hard to debug unless something is being swallowed somewhere.

Expected Behavior

I get redirected to the login page.

Identity Provider

Azure B2C Basic Policy

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[jo-arroyo]

@mindingdata At the moment, the MsalGuard does not interactively prompt for login with canLoad because it does not pass us the same information as the canActivate interface, but we can look into enhancing the MsalGuard in the future to make this possible. In the meantime, canActivate can prompt for login, or you may have to log in first before using canLoad on a route. We also welcome PRs if you would like to try this enhancement yourself.

[roopeshreddy]

I’ve experienced this and I thought of opening a PR on this. Will do that soon.