Getting event undefined in successCallback while doing Popup Authentication

[Digvijayrao-KF]

While using the microsoftTeams method from @microsoft/teams-js, the code microsoftTeams.authentication.notifySuccess(event) receives the valid event object, Further in func onGetAuthTokenSuccess we are unable to get the length of active MSAL Account post setting it.

import { useMsal } from '@azure/msal-react';
const { instance, accounts, inProgress } = useMsal();

instance?.addEventCallback((event: any) => {
    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
      localStorage.setItem(MSAL_PAYLOAD, JSON.stringify(event!.payload));
      microsoftTeams.authentication.notifySuccess(event);
    } else if (event.eventType === EventType.LOGIN_FAILURE) {
      let reason = event.eventType;
      if (
        event.error &&
        (event.error?.message as string).includes(
          translate(ErrorMessage.executiveUserError)
        )
      ) {
        reason = CustomLoginError.executiveUserNotAllowed;
      }
      microsoftTeams.initialize(() => {
        microsoftTeams.authentication.notifyFailure(reason);
      });
    }
  });

export const onGetAuthTokenSuccess = (
  authResult: AuthenticationResult,
  msalInstance: IPublicClientApplication,
  checkIsExecutive: boolean = true,
  checkIsExpired: boolean = true
) => {
  const b2cToken = authResult?.idToken;
  const account = authResult?.account;
  const decodedB2cToken = getDecodedB2cToken(b2cToken);

  const tokenData: IAuthTokenData = {
    is_ic2_executive: checkIsExecutive && decodedB2cToken.is_ic2_executive,
    token: b2cToken,
    isExpired: checkIsExpired && isExpired(decodedB2cToken?.exp),
  };

  if (tokenData.isExpired) clearMsalSession(msalInstance);

  if (tokenData.is_ic2_executive) return tokenData;

  localStorage.setItem(MSAL_ID_TOKEN, b2cToken);

  **msalInstance.setActiveAccount(account);**

 // the get account gives length as 0
  console.log(
    'onGetAuthTokenSuccess -> msalInstance fetch ActiveAccount length ' +
      **msalInstance.getAllAccounts().length**
  );
  return tokenData;
};

Since 1st iteration fails in the below code we get event as undefined, and that breaks the rest of the MSAL authentication process.

import * as microsoftTeams from '@microsoft/teams-js';

microsoftTeams.authentication.authenticate({
        url: window.location.origin + `/authstart?loginHint=${email}&isTA=true`,
        successCallback: (event: any) => {
             const authTokenData = onGetAuthTokenSuccess(
              payload,
              instance,
              true,
              false
            );
          }
        failureCallback: (reason?: string) => {}
})

The package versions used are listed below, "@azure/msal-browser": "^2.22.1", "@azure/msal-react": "^1.3.1", "@microsoft/signalr": "^6.0.8", "@microsoft/teams-js": "^1.11.0".

Note: We tried using different machines with Chrome browser version 116 onwards for accessing the app via url https://teams.microsoft.com, the issue is random (i.e some users are able to access the app via a particular credential, but others are facing issues for the same login details.). Also it occurs only on chrome browser for windows & mac users. Microsoft Edge works fine on cross platforms.

Could you please provide any possible solutions?

[sayali-MSFT]

@Digvijayrao-KF - Thanks for reporting your issue. We will check this at our end and will get back to you.

[sayali-MSFT]

@Digvijayrao-KF - We are able to reproduce the issue with the @microsoft/teams-js library version 1.11.0. We have raised a bug for the same, and we will inform you once we receive any updates.

Meanwhile, we have tested this scenario with the latest TeamsJS library, and it is working fine.

Could you please try it with the latest @microsoft/teams-js version 2.15.0?

[kundan-kf]

Even @microsoft/teams-js version 2.15.0 is having same behavior. On further digging into it I found the instance.setActiveAccount(account) method from @azure/msal-react is misbehaving.

const { instance, accounts } = useMsal(); instance.setActiveAccount(account); const thereAreAccounts = !!accounts.length || !!instance.getAllAccounts().length; // evaluates to false

We are using @azure/msal-browser@2.22.1 and @azure/msal-react@1.3.1.

The same piece of code is working fine within Teams App(Both classic and new) it breaks only when we access the app using chrome browser. I suspect some restriction imposed/strict-policy change in the way chrome handles embedded iframes with the version starting 116.

[ChetanSharma-msft]

Hello @kundan-kf - Thanks for sharing the information. We have informed engineering team and let you know if we have any updates.