MSAL Login loginPopup issue. BrowserAuthError: user_cancelled: User cancelled the flow.

[Edgarb-Claims-Conf]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.28.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.2.0

Public or Confidential Client?

Public

Description

Hi,
I am encountering an issue with MSAL authentication in my production environment(or just using build from front end). When a user clicks the login button (which triggers await instance.loginPopup(loginRequest)), the following error appears in the console: BrowserAuthError: user_cancelled: User cancelled the flow and popup for login is displayed.
This problem does not occur during development. In my local setup, I run a Node.js backend on port 4151 and a frontend on port 3000. Under these conditions, the popup-based login works exactly as expected. However, after building the frontend and deploying it (serving the index.html from the production build), this issue arises.

When running in development mode with the following configuration:

{
    "server_url": "http://localhost:4151",
    "FULL_URL": "http://localhost:3000"  // redirectUri, postLogoutRedirectUri
}
the login popup works correctly.
However, when building for deployment with the configuration:
{
    "server_url": "",
    "FULL_URL": "http://localhost:4151"
}

the login popup does not function as expected.
Using loginRedirect working good, without any issue, in both cases development and build.

Error Message

BrowserAuthError: user_cancelled: User cancelled the flow.

MSAL Logs

MSAL: [Fri, 20 Dec 2024 06:17:30 GMT] : [] : @azure/[email protected] : Info - MsalProvider - msal:loginStart results in setting inProgress from none to login
MSAL: [Fri, 20 Dec 2024 06:17:30 GMT] : [0193e2b6-c89f-7271-97e5-059bfc9896e6] : [email protected] : Error - PopupHandler.monitorPopupForHash - window closed
Login error: BrowserAuthError: user_cancelled: User cancelled the flow.
at gN (BrowserAuthError.ts:366:12)
at PopupClient.ts:561:25
MSAL: [Fri, 20 Dec 2024 06:17:30 GMT] : [] : @azure/[email protected] : Info - MsalProvider - msal:loginFailure results in setting inProgress from login to none

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

export const msalConfig = {
    auth: {
        clientId: "client_id",
        authority: "https://login.microsoftonline.com/*****.onmicrosoft.com",
        redirectUri: FULL_URL,
        postLogoutRedirectUri: FULL_URL,
        clientCapabilities: ["CP1"],
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: false,
    },
    system: {
        loggerOptions: {
            loggerCallback: (level: any, message: any, containsPii: any) => {
                if (!containsPii) {
                    console.log(`MSAL: ${message}`);
                }
            },
            // logLevel: LogLevel.Verbose,
            piiLoggingEnabled: false,
        },
        navigateToLoginRequestUrl: false,
    },
};

development mode:
{
    "server_url": "http://localhost:4151",
    "FULL_URL": "http://localhost:3000"  // redirectUri, postLogoutRedirectUri
}
 
 building for deployment:
{
    "server_url": "",
    "FULL_URL": "http://localhost:4151"
}

Relevant Code Snippets

const handleLogin = async () => {
        try {
          await instance.loginPopup(loginRequest);
            navigate("/");
        } catch (error) {
            dispatch(
                setUserSnackMessage({ message: "Unexpected error during login.", status: true, type: 
  ISnackMessageStyle.error })
            );
            console.error("Login error:", error);
        }
    };

export const loginRequest = {
    scopes: ["api://backed_id/all"],
};

Reproduction Steps

1. Click on login btn
2. Displayed error message

Expected Behavior

No error message appears immediately after clicking the login button.
The authentication process completes seamlessly within the popup.
Once authentication is successful, the popup closes automatically.
The main website then redirects the user to the home page without displaying duplicate login pages.

Identity Provider

Other

Browsers Affected (Select all that apply)

Chrome

Regression

No response

[Edgarb-Claims-Conf]

Fixed the issue : app.use(helmet({ crossOriginOpenerPolicy: { policy: "unsafe-none" } }));