setActiveAccount() does not force a re-render of the `MsalProvider`'s children

[onionhammer]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.9.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.0.11

Public or Confidential Client?

Public

Description

When setting 'setActiveAccount', it seems like this could have massive implications on what the application has rendered; the only parent element provided by MSAL that's universally there is the MsalProvider, so it seems like that it should rerender its children rather than providing seemingly no reactivity.

'instance.getActiveAccount()' will also provide no reactivity to active account switches, since it is not a hook of any sort.

For example, if a user has 1 account, then logs in with a new account, so they have 2 accounts in msal;

instance.setActiveAccount(newAccount); // This has no impact on the application without refreshing the app or creating and triggering a custom parent component

The only way to find out a new account was logged in appears to be with publicClientApplication.addEventCallback which is outside of the component tree, so forcing re-renders from here would be difficult

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

export const publicClientApplication = new PublicClientApplication({
  auth: {
    clientId: clientId,
    authority: policies.signUpSignIn,
    knownAuthorities: [domain],
    redirectUri: "/",
    postLogoutRedirectUri: "/"
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: false,
  }
}

Relevant Code Snippets

N/A

Reproduction Steps

1. Create a simple PCA app
2. Log in with 2 accounts
3. invoke 'setActiveAccount' to switch to another active user account

At this point, nothing will happen automatically, the entire app will sit there unless the user refreshes

Expected Behavior

The component tree should re-render if the active account changes, or at least MSAL-related containers, like AuthenticatedTemplate

Identity Provider

Azure B2C Custom Policy

Browsers Affected (Select all that apply)

Chrome, Firefox, Edge, Safari

Regression

No response

Source

External (Customer)

[tnorling]

You can write your own hook to do this using the event callback and then use this hook in any components that depend on specific account properties and should be re-rendered upon change.

Something like this might work:

function useActiveAccount() {
  const [instance] = useMsal();
  const [activeAccount, setActiveAccount] = useState(() => instance.getActiveAccount());

  useEffect(() => {
    const id = instance.addEventCallback((event) => {
      if (event.eventType === EventType.ACTIVE_ACCOUNT_CHANGED) {
        setActiveAccount(instance.getActiveAccount());
    }

    return () => {
      if (id) {
        instance.removeEventCallback(id);
      }
    };
  }, [instance]);

  return activeAccount;
}

This does feel like something that can be built into the existing useAccount hook so I'll mark this as a feature request for future consideration. Thanks for the feedback!