RedirectURI not working as expected in error states.

[kmalone-thescore]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

2.38.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.5.9

Public or Confidential Client?

Public

Description

I'm running into an issue with an MSAL-react implementation where when I enter certain error states, Azure does not redirect back to the application. This has the potential to leave users trapped in this state.

I can see the redirect*URI set in the response object in the network tab:

"redirectUri": "http://localhost:3000/?error=interaction_required\u0026error_description=Seamless+single+sign+on+failed+for+the+user.+This+can+happen+if+the+user+is+unable+to+access+on+premises+AD+or+intranet+zone+is+not+configured+correctly%0d%0aTrace+ID%3a+56ba717b-e126-42f1-b5b6-50914c019500%0d%0aCorrelation+ID%3a+46fcf593-1c77-4212-9062-610c82e3b16d%0d%0aTimestamp%3a+2023-08-29+19%3a41%3a30Z",

I'm not sure how helpful that is because it doesn't seem to be used in these sorts of scenarios (in this case, using an email/pw that are not a member of the tenant)

redirect works correctly on success, but these fail states are causing me grief. Is this the expected behaviour? Looking for feedback if possible, thanks!

MSAL Configuration

{
  auth: {
    clientId: env.VITE_APP_AZURE_AD_CLIENT_ID,
    authority: `https://login.microsoftonline.com/${env.VITE_APP_AZURE_AD_TENANT_ID}`,
    redirectUri: env.VITE_APP_AZURE_AD_REDIRECT_URI,
  },
  cache: {
    cacheLocation: 'sessionStorage', // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  },
  system: {
    loggerOptions: {
      loggerCallback: (
        level: number,
        message: string,
        containsPii: boolean
      ) => {
        if (containsPii) {
          return
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message)
            return
          case LogLevel.Info:
            console.info(message)
            return
          case LogLevel.Verbose:
            console.debug(message)
            return
          case LogLevel.Warning:
            console.warn(message)
            return
          default:
            return
        }
      },
    },
  },
}

Relevant Code Snippets

const { instance } = useMsal()
 
  const handleLogin = () => {
    instance.loginRedirect({ ...loginRequest, prompt: 'login' }).catch((e) => {
      console.error(e)
    })
  }

Identity Provider

Azure B2C Basic Policy

Source

External (Customer)

[sameerag]

@kmalone-thescore Yes, this is by design. There are some errors from the server that are not sent back to the client for security reasons. The Service throws these errors in their UX and does not return them to MSAL to send them back to the client.

As long as we catch an error, we send it back to you (MSAL JS) as a ServerAuthError from our end.

Can you talk to the B2C folks regarding what type of errors are not thrown back to the client? Their support channel is here.

Now regarding the error you mentioned above, it does state interaction_required and can you fall back to an acquireTokenInteractive catching the same?

Also curious, why is there a catch on loginRedirect? Can you please check react usage sample here and docs here.