I have an app on Microsoft Teams that can be installed as a Tab in a teams channel. It is using Teams’s SSO authentication. When a new user (a user who has never consented to use certain account info to the app) opens the app, it asks for consenting some MS Graph API permissions. But the process is always failing while asking this consent and throwing an error. But after that if I reload the tab, then the authentication is successful. Hence, the consent process is working, but somehow it is not reflecting in the app immediately.

This issue is happening after updating the Microsoft Teams SDK for JavaScript to version 2. In version 1 there was no error and users were able to provide consent successfully and login.
After upgrading to version 2 of the SDK, the existing users can access the app and login to it normally. But for new users, the authentication is always failing at the consent stage and they have to reload the app once after consenting.

Following is the code for asking the consent.

• If a consent is required, then the app is showing a screen with Next button. On click of this button the following function is executed.

showConsentDialog() {
    console.log(window.location.origin);

    microsoftTeams.authentication
      .authenticate({
        url: window.location.origin + "/auth-start",
        width: 600,
        height: 535,
      })
      .then((result) => {
        console.log("Success Callback");
        console.log({ result });
        this.consentSuccess(result);
      })
      .catch((reason) => {
        this.consentFailure(reason);
      });
  }

  //Callback function for a successful authorization
  consentSuccess(result) {
    console.log("Consent Success");
    console.log({ result });
    //Save the Graph access token in state
    this.setState({
      graphAccessToken: result["access_token"],
      graphRefreshtoken: result["refresh_token"],
      consentProvided: true,
    });
    // backend API call to login the user
    this.exchangeClientTokenForServerTokenAfterConsentSuccess(
      result["access_token"],
      result["refresh_token"]
    );
  }

  consentFailure(reason) {
    console.error("Consent failed: ", reason);
    this.setState({ error: true });
    // this.showConsentDialog(); //Proceed to show the consent dialogue. commented because of the showConsent screen developed for user interaction needed when popup is blocked from browser setting
  }

• In the showConsentDialog() function, the popup for consent is opening fine, but the code is always moving to the catch block instaed of the then block.

• For existing users, who have already consented earlier, the authentication is being successful at the first stage of getting authToken using microsoftTeams.authentication.getAuthToken() and it is not coming to this showConsentDialog() function, hence there is no issue on that scenario.