useIsAuthenticated() is not reactive

[vponnurudb]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.1.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

3.0.19

Public or Confidential Client?

Public

Description

useIsAuthenticated() is not reactive. I am using the state variable as a dependency in useEffect. But after authentication completes, the useEffect is not triggered.

const isConnected = useIsAuthenticated()
const [xyz, setXyz] = useState()

useEffect(()=> {

// do something to xyz

}, [isConnected]

I need to update my app's local xyz state based on isConnected's change in state. But the useEffect is not triggered after successful authentication. Is this the expected behavior?

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

{auth: {
    clientId: "xxxxx",
    authority: "https://login.microsoftonline.com/xxxxx",
    redirectUri: "http://localhost:3000/"
  },
}
};

Relevant Code Snippets

const isConnected = useIsAuthenticated()
const [xyz, setXyz] = useState()

useEffect(()=> {

console.log("useEffect called.")
// do something to xyz

}, [isConnected]

Reproduction Steps

See code snippet

Expected Behavior

useEffect() is called and state is updated. But useEffect() is not called after state changes.
A reload of the component shows the correct state. So the state is updating successfully. Its just not reactive.

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response