Sign-in failed: BrowserAuthError: user_cancelled: User cancelled the flow.

[navi-navanee-adroit]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.13.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

none

Public or Confidential Client?

Public

Description

Currently, I'm working on a react project which is using @azure/msal-browser, previously it was working fine locally, in testing and production environments as well, but now when loginPopup of msal function call, it still opens an authentication window in a new tab, but automatically trigger user cancel event, even if user does not close auth tab, but on localhost also in production still working fine.

Error Message

Sign-in failed: BrowserAuthError: user_cancelled: User cancelled the flow.

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

const msalConfig = {
  auth: {
    clientId: AZURE_CLIENT_ID,
    authority: 'https://login.microsoftonline.com/common',
    redirectUri: '/',
  },
};

Relevant Code Snippets

import { PublicClientApplication } from '@azure/msal-browser';
import { Box, useTheme } from '@mui/material';
import { FC } from 'react';

import { OutlookLogo } from '../../../components/icon/assets';
import Text from '../../../components/text-modifier/Text';
// import axios from 'axios';
import { AZURE_CLIENT_ID } from '../../../config/api-config';
import { contact } from '../../../service';

interface IAzureLoginPage {
  getCrewMembersAzure(response: any): void;
  setOpenModal: React.Dispatch<React.SetStateAction<boolean>>;
}
const msalConfig = {
  auth: {
    clientId: AZURE_CLIENT_ID,
    authority: 'https://login.microsoftonline.com/common',
    redirectUri: '/',
  },
};

const msalInstance = new PublicClientApplication(msalConfig);

const AzureLogin: FC<IAzureLoginPage> = ({ getCrewMembersAzure, setOpenModal }) => {
  const theme = useTheme();
  const scopes = ['User.Read', 'Contacts.Read', 'Contacts.Read.Shared', 'offline_access'];

  msalInstance
    .initialize()
    .then(() => {
      //   console.log('MSAL initialized successfully');
    })
    .catch((error) => {
      console.error('Error initializing MSAL:', error);
    });

  const handleSignIn = async () => {
    try {
      await msalInstance
        .loginPopup({
          scopes,
        })
        .then((response: any) => {
          const user = `${response.account.homeAccountId}-${response.account.environment}-refreshtoken-${response.idTokenClaims.aud}----`;
          const Data = sessionStorage.getItem(user);
          const userData = Data && JSON.parse(Data);
          const data = {
            refreshToken: userData.secret,
            accessToken: response.accessToken,
          };
          // fetchContacts(response.accessToken);
          contact.loginWithAzure({ code: data }).then((res) => {
            setOpenModal(false);
            getCrewMembersAzure(res);
          });
        });
    } catch (error) {
      console.error('Sign-in failed:', error);
    }
  };

  return (
    <>
      <Box
        width={'100%'}
        sx={{
          height: '70px',
          borderRadius: '6px',
          boxShadow: '0px 0px 9px 0px rgba(0,0,0,0.15)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'start',
          border: ` 1px solid ${theme.palette.primary.main}`,
          px: 5,
          cursor: 'pointer',
        }}
        onClick={() => handleSignIn()}
      >
        <OutlookLogo />
        <Text
          ml={3}
          align="center"
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '18px',
            fontWeight: 600,
            color: theme.colors?.themeOne.black.dark,
          }}
          title="Continue with Outlook"
        />
      </Box>
    </>
  );
};

export default AzureLogin;

Reproduction Steps

1. Log in with user credentials.
2. Automatically call the close function.

Expected Behavior

need to give proper contact from the Outlook account instead of directly closing

Identity Provider

Other

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

No response

Source

External (Customer)