Angular 16 and 17 : BrowserAuthError: uninitialized_public_client_application

Question

Description

• no error with :
  "@azure/msal-angular": "3.0.0-alpha.2", "@azure/msal-browser": "3.0.0-alpha.2",
• error with
  "@azure/msal-angular": "^3.0.8", "@azure/msal-browser": "^3.5.0",
• Error Message

ERROR BrowserAuthError: uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API. For more visit: aka.ms/msaljs/browser-errors

MSAL Configuration

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: environment.msalConfig.auth.clientId,
      authority: environment.msalConfig.auth.authority,
      redirectUri: '/',
      postLogoutRedirectUri: '/'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage
    },
    system: {
      allowNativeBroker: false, // Disables WAM Broker
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  });
}

AppModule

  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },

Answer 1

I had the same issue upgrading to v3 along with upgrading to Angular 16. Here is a Stack Overflow I found that resolved it for me:

https://stackoverflow.com/questions/76620524/unable-to-authenticate-using-angular-msal-library-after-upgrade-to-version-3-0-0

Put allowNativeBroker: false in the system[] portion of MSALInstanceFactory() PublicClientApplication(){}