Error logging in using MSAL for Angular 9

[sundeep22]

Hello, I'm using the below packages in my Angular 9 project:

"@azure/msal-angular": "^1.0.0", "msal": "^1.3.2",

and my app module contains the below code:

MsalModule.forRoot({ auth: { clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', authority: "https://login.microsoftonline.com/XXXXXXXXXXXXXXXXXXXXX/", validateAuthority: true, redirectUri: "http://localhost:4200/callback", navigateToLoginRequestUrl: true }, cache: { cacheLocation : "sessionStorage", } }, { popUp: false, consentScopes: [ "user.read", "openid", "profile"], extraQueryParameters: {} }) ]

I have a route that has MsalGuard, and I'm trying to login the user via LoginRedirect instead of popup.

Here's what i see in the browser's console:

TypeError: this.authResponseCallback is not a function at MsalService.push../node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.authErrorHandler (VM68 vendor.js:108949) at MsalService.push../node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.acquireTokenInteractive (VM68 vendor.js:109054) at MsalService.push../node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.loginRedirect (VM68 vendor.js:108967) at MsalGuard. (VM68 vendor.js:106305) at Generator.next () at VM68 vendor.js:131946 at new ZoneAwarePromise (VM71 polyfills.js:973) at __awaiter (VM68 vendor.js:131942) at MsalGuard.loginInteractively (VM68 vendor.js:106295) at MsalGuard.canActivate (VM68 vendor.js:106321)

The same code seems to work in the sample project i downloaded from github. What am i missing?

[jasonnutter]

@sundeep22 If you are using the redirect operations, you should invoke handleRedirectCallback, as shown here: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular9-sample-app/src/app/app.component.ts#L26-L33

[sundeep22]

@jasonnutter, thanks for the response. I tried adding this piece on the top of my app module:

import * as Msal from "msal";

const msalConfig = {
  auth: {
    clientId: environment.msalConfig.clientId,
    authority: environment.msalConfig.authority,
    validateAuthority: environment.msalConfig.validateAuthority,
    redirectUri: environment.msalConfig.callBackUri,
    navigateToLoginRequestUrl: environment.msalConfig.navigateToLoginRequestUrl
}
};

const msalInstance = new Msal.UserAgentApplication(msalConfig);

msalInstance.handleRedirectCallback((error, response) => {
  if (error) {
    console.error('Redirect Error: ', error.errorMessage);
    return;
  }

  console.log('Redirect Success: ', response);
});

I still see the error.. it only happens the first time i login (when it acquires the token). Here's my full app module class for your reference:

const msalConfig = {
  auth: {
    clientId: environment.msalConfig.clientId,
    authority: environment.msalConfig.authority,
    validateAuthority: environment.msalConfig.validateAuthority,
    redirectUri: environment.msalConfig.callBackUri,
    navigateToLoginRequestUrl: environment.msalConfig.navigateToLoginRequestUrl
}
};

const msalInstance = new Msal.UserAgentApplication(msalConfig);

msalInstance.handleRedirectCallback((error, response) => {
  if (error) {
    console.error('Redirect Error: ', error.errorMessage);
    return;
  }

  console.log('Redirect Success: ', response);
});

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    SharedModule,
    Vin360Module,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    MsalModule.forRoot({
      auth: {
        clientId: environment.msalConfig.clientId,
        authority: environment.msalConfig.authority,
        validateAuthority: environment.msalConfig.validateAuthority,
        redirectUri: environment.msalConfig.callBackUri,
        navigateToLoginRequestUrl: environment.msalConfig.navigateToLoginRequestUrl
    },
      cache: {
          cacheLocation: environment.msalConfig.cacheLocation as Msal.CacheLocation,
          //storeAuthStateInCookie: true, // set to true for IE 11
      },
      framework: {
        isAngular: environment.msalConfig.isAngular
      }
  }, {
      popUp: environment.msalConfig.popUp,
      consentScopes: environment.msalConfig.consentScopes,
      extraQueryParameters: {}
  })
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptorService, multi: true },
    UserAuthService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

Do you see anything that i'm missing here? Btw, this application requires automatic login reroute when the user goes to a URL (no explicit login button).

[jasonnutter]

What is the value of this.authResponseCallback when this error occurs? It is strange that it is defined but not a function.

[sundeep22]

the error comes even before it goes into the response callback. eventually it goes into the authResponseCallback, and everythings good that time.

[er1k-peterson]

I have the same issue. Is there a workaround?

[tnorling]

@sundeep22 @er1k-peterson This was a bug, the fix of which has just been merged and will be included in the upcoming 1.3.4 release. This error was surfaced due to another error that occurred during login or token acquisition so you'll still need to figure out why your calls were failing. The fix will provide you with a more helpful error message, however.

[github-actions[bot]]

This issue has not seen activity in 14 days. It may be closed if it remains stale.

[jasonnutter]

Closing, as this should be fixed in 1.3.4. Let us know if this is still an issue.