Intermittent SSO Login Issue with React App and Azure AD Integration

[sharadkumardubey]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

2.31.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.1.1

Public or Confidential Client?

Public

Description

I’m experiencing an intermittent issue with Single Sign-On (SSO) authentication between my React app and Azure Active Directory (Azure AD). After a successful authentication and logout, again tried to sign-in the SSO popup sometimes give my React app’s login page. This issue does not occur consistently and only happens occasionally.

Error Message

No getting any error message i logged through MSAL logger and last log was 'popupopend'.

MSAL Logs

No getting any error message i logged through MSAL logger and last log was 'popupopend'.

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

const msalConfig = {
  auth: {
    clientId: "1feb69", //dummy
    authority:
      "https://logi43-ad52-48de4ec7e2cb", // dummmy
    redirectUri: window.location.origin,
  },
};

Relevant Code Snippets

import React from "react";
import { MsalProvider, useMsal } from "@azure/msal-react";
import { PublicClientApplication } from "@azure/msal-browser";
import { Button } from "reactstrap";
import { ReactComponent as Microsoftlogo } from "./Microsoft_logo.svg";

const msalConfig = {
  auth: {
    clientId: "1feb69", //dummy
    authority:
      "https://logi43-ad52-48de4ec7e2cb", // dummmy
    redirectUri: window.location.origin,
  },
};

const pca = new PublicClientApplication(msalConfig);

function SignInButton({ handleMicrosoftLogin }) {
  const { instance } = useMsal();
  const { accounts } = useMsal();
  const username = accounts[0]?.username;

  const handleLogin = () => {
    instance
      .loginPopup({
        scopes: ["user.read"],
      })
      .then((response) => {
        handleMicrosoftLogin(response);
      })
      .catch((err) => {
        console.error(err);
      });
  };

  return (
    <Button
      outline
      className="text-dark font-weight-bolder"
      onClick={handleLogin}
    >
      <Microsoftlogo height={20} width={20} />
      <span className="ml-75">Sign in with Microsoft</span>
    </Button>
  );
}

function Microsoft({ handleMicrosoftLogin }) {
  return (
    <MsalProvider instance={pca}>
      <SignInButton handleMicrosoftLogin={handleMicrosoftLogin} />
    </MsalProvider>
  );
}

export default Microsoft;

Reproduction Steps

1. Click on Sign in
2. Logout Successfully
3. try to login again
4. repeat same step until get issue.

Expected Behavior

Should Successfully login

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

No response