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",

[officialmanishapoonia]

@Develliot

With the upgrade in MSAL V5, LOGIN_SUCCESS emits AccountInfo Object instead of AuthenticationResult Object.

Please update event.payload as AuthenticationResult to event.payload as AccountInfo

So the relevant code snippet can be updated as below

if (
  event.eventType === EventType.LOGIN_SUCCESS &&
  event?.payload
) {
  const account = event.payload as AccountInfo;  //The payload itself contains the account info
  msalInstance.setActiveAccount(account);
}

The LOGIN_SUCCESS event type now contains an AccountInfo object in the payload instead of an AuthenticationResult object.

[lalimasharda]

Hey @Develliot, Can you double check this table of events and update your code. Please let me know if you are still seeing issues.

[microsoft-github-policy-service]

@@Develliot This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.