msal-browser v5 lifecycle events not firing

[Develliot]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

5.1.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

5.0.3

Public or Confidential Client?

Public

Description

addEventCallback() on PublicClientApplication, after initialize() has no effect.

Either the events like EventType.LOGIN_SUCCESS are not emitted, or the event listeners aren't being added

This worked fine in v4, seems to be broken in v5.

I'm having to hack around this using React hooks looking for changes in the account count and if non zero set the active account, it's pretty obnoxious workaround, but it seems to work.

Error Message

No error message, events simply not sent

MSAL Logs

No logs event not sent

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

export const msalConfig: Configuration = {
  auth: {
    clientId: clientId, 
    authority: authority, 
    redirectUri: "https://fxxx:3000/user/entra", // Points to window.location.origin. You must register this URI on Microsoft Entra admin center/App Registration.
    postLogoutRedirectUri: "/", 
    knownAuthorities: [`${environment}`], 
    onRedirectNavigate: () => {
      return true;
    },
  },
  cache: {
    cacheLocation: "localStorage",
  },
  system: {
    allowPlatformBroker: false, // Disables WAM Broker
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
          default:
            return;
        }
      },
    },
  },
};

Relevant Code Snippets

example code


export const setUpMsal = () => {
  msalInstance
    .initialize()
    .then(() => {
      // Account selection logic is app dependent. Adjust as needed for different use cases.
      const accounts: AccountInfo[] = msalInstance.getAllAccounts();

      // if we already have accounts set the active account to the first account in the array
      if (accounts.length) {
        msalInstance.setActiveAccount(accounts[0]);
      }

      // I don't think these event handlers are working 

      // on event login success, set the active account
      msalInstance.addEventCallback((event: EventMessage) => {
        if (
          event.eventType === EventType.LOGIN_SUCCESS &&
          event?.payload &&
          (event.payload as AuthenticationResult).account
        ) {
          console.log("LOGIN SUCCESS EVENT", event);
          const account = (event.payload as AuthenticationResult).account;
          msalInstance.setActiveAccount(account);
        }
      });

      initialised = true;
      return undefined;
    })
    .catch((err: Error) => {
      trackDataDogError(err, {
        component: "setUpMsal",
        customMessage: "Error initializing MSAL",
      });
      logger.error("Error initializing MSAL");
    });
};

Reproduction Steps

1. use msal libs of the specified versions, JS and React both at v5
2. use default demo config for msal client
3. add and eventListener to the client after init, don't even have to filter by event types, anything will do, try to get it to console log out anything for any event.

Expected Behavior

When adding an event listener with

msalInstance.addEventCallback( (event) => {
console.log({event}, "any event")
})

The callback is invoked

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

"@azure/msal-browser": "^4.12.0",