Unable to authenticate angular app version 16 on msal-angular 3

[karthigamahe]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.0.16

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.0.0

Public or Confidential Client?

Public

Description

I have recently updated angular version to 16 it needs msal-angular package update to version 3. After this upgrade i was not able to authenticate to the site
Can you please help in identifying what must be changed in order to make it work?

Error Message

The url was changed to /error and displaying error message.. The screen was totally blank

MSAL Logs

[Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Info - Emitting event: msal:initializeEnd
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - Emitting event to callback 0190595b-d512-78e1-b71a-e8636a25ba92: msal:initializeEnd
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Info - Emitting event: msal:initializeEnd
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - Emitting event to callback 0190595b-d512-78e1-b71a-e8636a25ba92: msal:initializeEnd
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - handleRedirectPromise called
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - getAllAccounts called
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - BrowserCacheManager.getAccountKeys - No account keys found
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Info - Emitting event: msal:handleRedirectStart
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - Emitting event to callback 0190595b-d512-78e1-b71a-e8636a25ba92: msal:handleRedirectStart
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-angular@3.0.20 : Verbose - BroadcastService - msal:handleRedirectStart results in setting inProgress from startup to handleRedirect
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [0190595b-ce4a-766b-bfd4-adb1dca02bb8] : msal.js.browser@3.17.0 : Verbose - initializeServerTelemetryManager called
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [0190595b-ce4a-766b-bfd4-adb1dca02bb8] : msal.js.browser@3.17.0 : Verbose - getRedirectResponseHash called
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [0190595b-ce4a-766b-bfd4-adb1dca02bb8] : msal.js.browser@3.17.0 : Info - handleRedirectPromise did not detect a response as a result of a redirect. Cleaning temporary cache.
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - handleRedirectPromise has been called for the first time, storing the promise
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - handleRedirectPromise called
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - handleRedirectPromise has been called previously, returning the result from the first call
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Info - Emitting event: msal:handleRedirectEnd
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - Emitting event to callback 0190595b-d512-78e1-b71a-e8636a25ba92: msal:handleRedirectEnd
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-angular@3.0.20 : Verbose - BroadcastService - msal:handleRedirectEnd results in setting inProgress from handleRedirect to none
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - getAllAccounts called
auth-config.ts:30 [Thu, 27 Jun 2024 11:01:48 GMT] : [] : @azure/msal-browser@3.17.0 : Verbose - BrowserCacheManager.getAccountKeys - No account keys found
main.ts:11 ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: 'code%3D0.ASYADh0h81sSw0KG2zIrGaZaIs6V1Y3S3rtMrYPs4k9yfZcmAAA.AgABBAIAAAApTwJmzXqdR4BN2miheQMYAgDs_wUA9P_gPSxp5vcRgk_relR0lEAFIk6HjmVrimE6f5hxT2uT0FNqMDeFuFBk06eey7NyEtnPMACBY72azsvBvKSwt9SjeJ6Qn5MElSvNd1MLlkmev-YXs3Ccn-3b76R0lXcZOQo8XhFl-Q4MwS-YjBEg_7cN9BsL6ozQiF2CxcmRRJEotCznlp86Xobzr1PmIT0ZDahXzcyBOE4faMf6jTNH_XO_F-0IctQQqOOOqlPL4zwR9MvD8VzhkVOU6MIzyZP5OK0n8kDN5nEQbgrSl9zRzguV12oWsAN5f98a9jeacHCwnIKcPVj0L3jfyvq0P0PrsfnctxCoyYi-0OFy4Rcm-5g_yyYUWdUnNHiFYQ76BEd2TBaeNALgywOCPsOdproVeiUKOwkjA605ULJayQcOpPG4lRxCUiaMN4LnLnFaR1PSomW3bs-f-a5TPtS22ruVLgQUcej9XCPLw7BrWx7AJN2jcbN9uLQ59NTzegZ1UIM6sSRIxp6_NLS_Q0dVvaFH5yFAQGYHedSvAWQ9LTNPjBQTMbL6d0EJnunbN7gl1W_B7E9LXqrsTVgFoH1Ubsw3nKgGSX7Elo1muWPv1K59fxTvRJCRo5zU5ogXclvuTcViBAp2_mdS--ZbTJz5l4C8H5RRGOvfewsN9KsRbRtYPZsz3wiZAzAuszQ1cCXOypKdzh6gLBYrqlMIwBgx8HOKX6FDSHgdkcmaj34tKYKDo4W2CmxbGJWnpygevO_mAgHRXozmup1TpC-_eZ_F83odXkFbcrRaZyyB3y9Ic4JjzEURgdD41uTd8jgmQB8ScQ5WXKFvTJsEjPeli7br7_b7dx8hbSnxSgLUNzII_IR5dkMLht5vupzrwJq9iYPlyIWCQ2QLDre1IcsvPbYa5lBpW0Kt&client_info%3DeyJ1aWQiOiJkN2IwMDcwZC0wMzg2LTQ0MzYtOGNiNC0xYTRkNGMyZjg3OGQiLCJ1dGlkIjoiZjMyMTFkMGUtMTI1Yi00MmMzLTg2ZGItMzIyYjE5YTY1YTIyIn0&state%3DeyJpZCI6IjAxOTA1OTViLWNlNGUtN2I5MC05MTgxLWUwZTU3ZThkOWVhNCIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicmVkaXJlY3QifX0%3D&session_state%3De529b8b8-a332-4bd5-abf0-870e712690b6'
Error: NG04002: Cannot match any routes. URL Segment: 'code%3D0.ASYADh0h81sSw0KG2zIrGaZaIs6V1Y3S3rtMrYPs4k9yfZcmAAA.AgABBAIAAAApTwJmzXqdR4BN2miheQMYAgDs_wUA9P_gPSxp5vcRgk_relR0lEAFIk6HjmVrimE6f5hxT2uT0FNqMDeFuFBk06eey7NyEtnPMACBY72azsvBvKSwt9SjeJ6Qn5MElSvNd1MLlkmev-YXs3Ccn-3b76R0lXcZOQo8XhFl-Q4MwS-YjBEg_7cN9BsL6ozQiF2CxcmRRJEotCznlp86Xobzr1PmIT0ZDahXzcyBOE4faMf6jTNH_XO_F-0IctQQqOOOqlPL4zwR9MvD8VzhkVOU6MIzyZP5OK0n8kDN5nEQbgrSl9zRzguV12oWsAN5f98a9jeacHCwnIKcPVj0L3jfyvq0P0PrsfnctxCoyYi-0OFy4Rcm-5g_yyYUWdUnNHiFYQ76BEd2TBaeNALgywOCPsOdproVeiUKOwkjA605ULJayQcOpPG4lRxCUiaMN4LnLnFaR1PSomW3bs-f-a5TPtS22ruVLgQUcej9XCPLw7BrWx7AJN2jcbN9uLQ59NTzegZ1UIM6sSRIxp6_NLS_Q0dVvaFH5yFAQGYHedSvAWQ9LTNPjBQTMbL6d0EJnunbN7gl1W_B7E9LXqrsTVgFoH1Ubsw3nKgGSX7Elo1muWPv1K59fxTvRJCRo5zU5ogXclvuTcViBAp2_mdS--ZbTJz5l4C8H5RRGOvfewsN9KsRbRtYPZsz3wiZAzAuszQ1cCXOypKdzh6gLBYrqlMIwBgx8HOKX6FDSHgdkcmaj34tKYKDo4W2CmxbGJWnpygevO_mAgHRXozmup1TpC-_eZ_F83odXkFbcrRaZyyB3y9Ic4JjzEURgdD41uTd8jgmQB8ScQ5WXKFvTJsEjPeli7br7_b7dx8hbSnxSgLUNzII_IR5dkMLht5vupzrwJq9iYPlyIWCQ2QLDre1IcsvPbYa5lBpW0Kt&client_info%3DeyJ1aWQiOiJkN2IwMDcwZC0wMzg2LTQ0MzYtOGNiNC0xYTRkNGMyZjg3OGQiLCJ1dGlkIjoiZjMyMTFkMGUtMTI1Yi00MmMzLTg2ZGItMzIyYjE5YTY1YTIyIn0&state%3DeyJpZCI6IjAxOTA1OTViLWNlNGUtN2I5MC05MTgxLWUwZTU3ZThkOWVhNCIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicmVkaXJlY3QifX0%3D&session_state%3De529b8b8-a332-4bd5-abf0-870e712690b6'
at Recognizer.noMatchError (router.mjs:3662:16)
at router.mjs:3677:28
at catchError.js:10:39
at OperatorSubscriber._error (OperatorSubscriber.js:23:21)
at OperatorSubscriber.error (Subscriber.js:40:18)
at OperatorSubscriber._error (Subscriber.js:64:30)
at OperatorSubscriber.error (Subscriber.js:40:18)
at OperatorSubscriber._error (Subscriber.js:64:30)
at OperatorSubscriber.error (Subscriber.js:40:18)
at Oper

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

export const msalConfig: Configuration = {
  auth: {
    clientId: environment.clientId, // This is the ONLY mandatory field that you need to supply.
    authority: environment.authority, // Defaults to "https://login.microsoftonline.com/common"
    redirectUri: environment.redirectUri, // Points to window.location.origin. You must register this URI on Azure portal/App Registration.
  },
  cache: {
    cacheLocation: BrowserCacheLocation.LocalStorage, // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
    storeAuthStateInCookie: isIE, // Set this to "true" if you are having issues on IE11 or Edge
  },
  system: {
    loggerOptions: {
      loggerCallback(logLevel: LogLevel, message: string) {
        console.log(message);
      },
      logLevel: LogLevel.Verbose,
      piiLoggingEnabled: false,
    },
    allowNativeBroker: false, // Disables WAM Broker
  }
}

Relevant Code Snippets

app.module.ts

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication(msalConfig);
}
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: loginRequest
  };
}

  bootstrap: [AppComponent, MsalRedirectComponent]

Reproduction Steps

after login using microsoft authenticator app i am not able to view the site

Expected Behavior

I able to login and use the application

Identity Provider

Azure B2C Basic Policy

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

msal-browser : 2.0.0

Source

Internal (Microsoft)

[jo-arroyo]

@karthigamahe Have you followed the MSAL Browser and MSAL Angular upgrade guides?

Alternatively, if you are using a hash routing strategy, see our FAQ for how to handle routing.

[karthigamahe]

@jo-arroyo yes i gone thorugh this but i am sure how to implement this in my case

In my scenario i exported as function in that case how to initialize the instance

please help me to modify the upgraded config to my code

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication(msalConfig);
}