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

Question

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.

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"],
};

When running in development mode with the following configuration:

{
    "server_url": "http://localhost:4151",
    "FULL_URL": "http://localhost:3000"  // redirectUri, postLogoutRedirectUri
}

However, when building for deployment with the configuration the login popup does not function as expected:

{
    "server_url": "",
    "FULL_URL": "http://localhost:4151"
}

Using loginRedirect working good, without any issue, in both cases development and build.

MSAL Logs

MSAL: [Fri, 20 Dec 2024 06:17:30 GMT] : [] : @azure/msal-react@2.2.0 : 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] : msal.js.browser@3.27.0 : 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/msal-react@2.2.0 : Info - MsalProvider - msal:loginFailure results in setting inProgress from login to none
MSAL.js (@azure/msal-browser)
MSAL React (@azure/msal-react)

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"
}

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.

Answer 1

Fixed the issue :

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