SilentSSO in v5 swallow errors

[h3rmanj]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

5.4.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

5.0.6

Public or Confidential Client?

Public

Description

Using InteractionType.Silent with <MsalAuthenticationTemplate> or useMsalAuthentication() swallows errors.

By adding an event callback with addEventCallback, I can see the instance still emits the error events, but the component and hook never registers it. It's stuck in a limbo state, not showing loadingComponent, errorComponent or children.

This also seems to specifically happen on localhost.

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

const instance = new PublicClientApplication({
	auth: {
		clientId: import.meta.env.VITE_MSAL_CLIENT_ID,
		authority: import.meta.env.VITE_MSAL_AUTHORITY,
		redirectUri: `${window.location.origin}/redirect`,
	},
});

Relevant Code Snippets

https://github.com/h3rmanj/msal-silent-repro

Reproduction Steps

See the reproduction repository README.

Expected Behavior

We get an authenticationResult with the error properly set.

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome, Firefox, Edge, Safari, Other

Regression

No response

[h3rmanj]

I think this might be because of these lines in useMsalAuthentication.ts.

    // Used to prevent state updates after unmount
    const mounted = useRef(true);
    useEffect(() => {
        return () => {
            mounted.current = false;
        };
    }, []);

This conflicts with the behavior of <StrictMode>, which also explains why I encountered this issue on localhost. Removing Strict Mode from my app makes errors show up again.

Simply setting mounted.current to true in the effect body"fixes" this issue, and it will still set it to false when unmounting. I'll create a PR.

    // Used to prevent state updates after unmount
    const mounted = useRef(true);
    useEffect(() => {
        mounted.current = true;
        return () => {
            mounted.current = false;
        };
    }, []);

[lalimasharda]

Fixed with #8482. Thank you for your fix @h3rmanj !