Unable to authenticate using Angular MSAL library after upgrade to version 3.0.0-beta.0

After upgrading my app from Angular v15 to v16 and from msal-angular 2.5.3 to 3.0.0-beta.0, I am no longer able to authenticate against Azure AD B2C. I see the following exception in the console when attempting to execute MSAL loginPopup():

app-error-handler.service.ts:24 ERROR BrowserAuthError: native_broker_called_before_initialize:
You must call and await the initialize function before attempting to call any other MSAL API
when native brokering is enabled. For more please visit aka.ms/msaljs/browser-errors.


The MSAL verbose log since the start of the app to the point when loginPopup() is called looks like this:

[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
debug.reducer.ts:10 [DEBUG] action: @ngrx/store/init {payload: undefined, oldState: undefined, newState: {…}}
debug.reducer.ts:10 [DEBUG] action: @ngrx/store/update-reducers {payload: undefined, oldState: {…}, newState: {…}}
debug.reducer.ts:10 [DEBUG] action: @ngrx/store-devtools/recompute {payload: undefined, oldState: {…}, newState: {…}}
debug.reducer.ts:10 [DEBUG] action: @ngrx/store-devtools/recompute {payload: undefined, oldState: {…}, newState: {…}}
debug.reducer.ts:10 [DEBUG] action: @ngrx/effects/init {payload: undefined, oldState: {…}, newState: {…}}
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-browser@3.0.0-beta.0 : Verbose - BrowserCrypto: modern crypto interface available
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-browser@3.0.0-beta.0 : Verbose - BrowserCrypto: modern crypto interface available
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-browser@3.0.0-beta.0 : Verbose - Event callback registered with id: dd757329-a0a6-4bf8-9d67-11a173a1078e
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-browser@3.0.0-beta.0 : Verbose - getAllAccounts called
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-browser@3.0.0-beta.0 : Verbose - BrowserCacheManager.getAccountKeys - No account keys found
debug.reducer.ts:10 [DEBUG] action: @ngrx/router-store/request {payload: {…}, oldState: {…}, newState: {…}}
core.mjs:25489 Angular is running in development mode.
debug.reducer.ts:10 [DEBUG] action: @ngrx/router-store/navigation {payload: {…}, oldState: {…}, newState: {…}}
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - MSAL Interceptor activated
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - getting scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - no scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - MSAL Interceptor activated
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - getting scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - no scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - MSAL Interceptor activated
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - getting scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - no scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - MSAL Interceptor activated
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - getting scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - no scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - MSAL Interceptor activated
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - getting scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - no scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - MSAL Interceptor activated
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - getting scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - no scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - MSAL Interceptor activated
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - getting scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - no scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - MSAL Interceptor activated
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - getting scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:24 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - no scopes for endpoint
debug.reducer.ts:10 [DEBUG] action: @ngrx/router-store/navigated {payload: {…}, oldState: {…}, newState: {…}}
2report-config.service.ts:206 updating configViewDS
report-config.service.ts:484 updating searchByNameViewDS with 0 results
report-config.service.ts:368 updating searchByActionViewDS with 0 results
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:25 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - MSAL Interceptor activated
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:25 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - getting scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:25 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - no scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:25 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - MSAL Interceptor activated
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:25 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - getting scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:43:25 GMT] : @azure/msal-angular@3.0.0-beta.0 : Verbose - Interceptor - no scopes for endpoint
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:44:21 GMT] : [7d18b1b4-a4ca-4c5f-8678-849944fa42b4] : @azure/msal-browser@3.0.0-beta.0 : Verbose - loginPopup called
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:44:21 GMT] : [7d18b1b4-a4ca-4c5f-8678-849944fa42b4] : @azure/msal-browser@3.0.0-beta.0 : Verbose - acquireTokenPopup called
user-identity.config.ts:54 MSAL logging: [Sun, 02 Jul 2023 22:44:21 GMT] : @azure/msal-browser@3.0.0-beta.0 : Verbose - preflightBrowserEnvironmentCheck started
app-error-handler.service.ts:24 ERROR BrowserAuthError: native_broker_called_before_initialize: You must call and await the initialize function before attempting to call any other MSAL API when native brokering is enabled. For more please visit aka.ms/msaljs/browser-errors.
at BrowserAuthError.createNativeBrokerCalledBeforeInitialize (BrowserAuthError.js:478:16)
at BrowserUtils.blockNativeBrokerCalledBeforeInitialized (BrowserUtils.js:131:36)
at StandardController.preflightBrowserEnvironmentCheck (StandardController.js:809:26)
at StandardController.acquireTokenPopup (StandardController.js:290:18)
at StandardController.loginPopup (StandardController.js:1122:21)
at PublicClientApplication.loginPopup (PublicClientApplication.js:205:32)
at MsalService.loginPopup (azure-msal-angular.mjs:55:35)
at UserIdentityService.login (user-identity.service.ts:94:26)
at AppComponent.onLoginClick (app.component.ts:111:26)
at AppComponent_button_29_Template_button_click_0_listener (app.component.html:43:88)


I have read through this, but I am not sure if this is applicable since I am using Popup interaction as opposed to redirect.

Any suggestion on how to go about fixing this would be appreciated.

Continue reading...