Teams App: Azure AD Authentication Popup Does Not Close After Successful Login

Question

I have developed a custom app for Microsoft Teams, which also has a web counterpart. While the web version works seamlessly, I'm encountering an issue with the Teams app.

The problem arises when I use the Teams SDK to open a necessary authentication popup. The login process proceeds as expected, and the user successfully authenticates with Azure AD as the identity provider. However, after a successful login, the popup does not close automatically, and it displays a message similar to "Successfully logged in, return to website."

Code:

function getTokenInTeams() {
    app.getContext().then((ctx) => {
      if (ctx) {
        console.log(ctx);
        authentication.authenticate({
          url: window.location.origin + ".auth/login/aad/callback",
          width: 600,
          height: 535,
        })
          .then(
            (result) => {
              console.log("Got a result", result);
            },
            (err) => {
              if (err.message == "FailedToOpenWindow") {
                console.log("Error Message: FailedToOpenWindow");
              } else {
                console.log("Error Message: " + err.message);
              }
            }
          );
      }
    });
  }

So im redirecting to .auth/login/aad/callback which makes it possible to login. After it logs in it shows me the successful page, a redirect to my startpage would just let the popup redirect.

The authentication process is functional at this point, and the necessary cookies are being saved. However, the lingering popup requires the user to manually close it and then reload the app to proceed, which is far from an ideal user experience and also does not trigger the "then part / console.log(result)"

I'm seeking guidance on how to improve the Teams authentication process with Azure AD as the Identity Provider, with the goal of ensuring that the popup closes automatically upon successful login. Any insights or suggestions on resolving this issue would be greatly appreciated.

Answer 1

Are you trying to do SSO, with regular Microsoft 365 logins? If so, and if I recall correctly, authentication.authenticate is a much older way of doing this - follow the steps in this Tab SSO guidance carefully and the login process works fine - see https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/tab-sso-overview

Answer 2

If you want to start custom auth flow, then you're on the right way. Firstly start it with authentication.authenticate(..) as you did, and then in a popup, you miss authentication.notifySuccess(), which would make popup close.

There is also a simpler way to authenticate using Teams context and Teams SDK as Hilton pointed out. However this is not always an option for existing web application which may run outside of Teams context.