microsoft-authentication-library-for-js: loginRedirect, loginPopup will stuck in callback page

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.1.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.0.3

Public or Confidential Client?

Public

Description

When using loginPopup or loginRedirect, it will redirect to the redirectUri and eventually return to the original request location I’m not sure why I’m stuck on the redirectUri page and unable to log in successfully. The logs for both methods are shown below (I also log the path and hash)

loginRedirect: 截圖 2023-10-05 15 11 27

loginPopup 截圖 2023-10-05 15 14 18

Error Message

please see the above picture

Msal Logs

please see the above picture

MSAL Configuration

auth: {
    clientId: CLIENT_ID, // This is the ONLY mandatory field that you need to supply.
    authority: b2cPolicies.authorities.signUpSignInPwdLess.authority, // Use a sign-up/sign-in user-flow as a default authority
    knownAuthorities: [b2cPolicies.authorityDomain], // Mark your B2C tenant's domain as trusted.
    redirectUri: `https://${getEnvVar('HOST_NAME')}${Urls.account.AzureLoginCallback}`, // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
    navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
  },
  cache: {
    cacheLocation: 'localStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
  },

Relevant Code Snippets

N/A If the information provided is not sufficient, please let me know

Reproduction Steps

N/A If the information provided is not sufficient, please let me know

Expected Behavior

After calling login method, MSAL should return to the original request location and set token

Identity Provider

Azure B2C Custom Policy

Browsers Affected (Select all that apply)

Chrome, Safari

Regression

No response

Source

External (Customer)

About this issue

Original URL
State: closed
Created 9 months ago
Comments: 16

Most upvoted comments

I’m encountering a similar problem where, after logging out and attempting to log back into the application, the redirection doesn’t take me to the intended page. Instead, it gets stuck with the callback URL information.

http://localhost:4200/#code=0.AREAdGla839g1EeC1_8x19xTpZmlzPh4xtlIkT-4jeRedpURAGo.AgABAAIAAAAtyolDObpQQ5VtlI4uGjEPAgDs_wUA9P-rJYuYvfrSEXxdx6uliiC2rUjYvjcpj9ii6HS4F1mrCqou1dwkMeQ4oHwdLl_Cql2lK2CIYDEx4DHTNX-Ty8LkcOFCTcrpAi1Dw9FuT9ORnR1WEgRTeOgQehps37iqseyEpl2xrSCeuuYHI96h3ybrXnb4Aa9OH61HBkreo5jy9MpX8wlNApaMb2L43V0byvy345-WgcOkFHKodNoAM4TfsN4-_SNXn4hmnM-t83Ot69B5EWZOB_tzpPCLQLyicDL3AxYpOAFReRVimazJu1atlJJa42wUcbpRaPG9SU0eXMexeWzRjT_mAXv0DMEN52YCybMOZn8PNpOREgQ13ZRoKxKQ_yqcPmhXwXhNVv0pfb8Af91FBGjvRftppXuCbUtMtCw7s_6dYz_N_3nzPv3Rmiwte0QKijw6OH85E6Yi1P_3j6afrXnH7Z_roUb-sT2-snUEQmpq7fR0PzdR-yc7fULc13fwUkFSP75FZTCjTLDAryO79u-1b_Y3H7bSctlT0OnIKwEECkN_fhRLmlTrITwnaewbDHGIL_ridhEEhbqBZP1dFd0hhKMItwRKOLfSpL60qqBK_nLWMNldFI-lj87uFeeWaQt9yU3I9GSI9F5PcX1BRi25mpnDvIVb7FASBt3pP0vjLz4rPy_ffqfhjw1pD143A40EjXh1qh7K3Jl0mmbJApQsAwcIS98E-50EGB55Ww-Svh13Lx80bmzWBRj0InnmrDyjQ9LBeEgDKUSlmiesnSRiO1IFTGPe7Du7oH9JltnaYC1c38DI93GDQtl4iN6GxIiqE8ue1vCIlbtkhrNNvhPe_K3hbUv1aT1ohlApN9bgwmyoIDgJsrSyMlkyevIshNqUsV8TUMshM13x6JNIwQMdh2AwRSqiHA36gW2uW_CIbrAStRyrtdYyvPB3IjFbD7gbIW4838Y7gylX8J85sWpTKObh4x6cvbKI1PirrwIKD6bJZi3JTLZkq13cOSWHcjvqXO5j5C64AXt846bvyM8w7jTXq77L7dUA3KTXJ5S--LFsU4w&client_info=eyJ1aWQiOiIxNmYwNWViYS04MjllLTRlMDEtOWFlOC00ODEzODMyNGZmYTkiLCJ1dGlkIjoiZjM1YTY5NzQtNjA3Zi00N2Q0LTgyZDctZmYzMWQ3ZGM1M2E1In0&state=eyJpZCI6ImEyNjk2ZjQ1LWJiM2ItNDYzYy04YWU3LWJlNzczMDFhMWExOCIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicmVkaXJlY3QifX0%3D&session_state=490cee73-46ff-4669-b7d6-8e96366ee86d

theviveik1 on Oct 10, 2023

@devpolo Sorry for the late reply No, I don’t manage the return logic. The azure SDK will handle it automatically Or you can handle it manually, I remember there is an option you can config

aNyMoRe0505 on Jan 31, 2024

@tnorling Thank you for your response. If my callback page is named callback.html, how can I determine whether the current request is a popup or a redirect? Does handleRedirectPromise handle this automatically? Thank you

const myMSALObj = new window.msal.PublicClientApplication(msalConfig);

myMSALObj
  .initialize()
  .then(() => myMSALObj.handleRedirectPromise())
  .then(response => {
    console.log('response', response);
  })
  .catch(error => {
    console.log(error);
  });

After testing, I found that logging in with a popup flow on a mobile device and redirecting to an HTML page using handleRedirectPromise leads to getting stuck on the callback page, and the hash disappears. Does this mean I need to create two separate redirect HTML files (one for redirect, one for popup)?

aNyMoRe0505 on Oct 24, 2023