MS Teams Tab App is not closing back the Admin Permissions Consent window in the Desktop/ Mac Teams application

Question

I am building a Microsoft Teams Tab application, https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/what-are-tabs . In my application, I need to open the admin permissions consent page within the app to force the IT admin to allow permissions for the entire organisation, https://docs.microsoft.com/en-us/microsoftteams/app-permissions-admin-center . I am using @microsoft/teams-js SDK for that. I have implemented the flow. It is working perfectly fine on the web version of the application. But when I used the application on the Desktop/ Mac Teams app, it opens up the Admin Permissions Consent popup/ Login Window for admin. But after granting the permissions or cancelling to grant the permissions, it does not close the window back. Instead it is trying to keep showing our application's current page (home page URL) within the popup window.

This is my code to open up the Admin Permissions Consent window.

const openAdminConsentWindow = async (tenantId: string, clientId: string) => {
    authentication.authenticate({
      url: getAdminConsentUrl(tenantId, clientId),
      width: 600,
      height: 535,
      successCallback:(result: string| undefined) => {
          // Do something, permissions granted
      },
      failureCallback:(reason: string | undefined) => {
          // handle the error
      },
    });
  };

This is the getAdminConsentUrl function.

const getAdminConsentUrl = (tenantId: string, clientId: string): string => {
    return `https://login.microsoftonline.com/${tenantId}/v2.0/adminconsent
        ?client_id=${clientId}
        &scope=https://graph.microsoft.com/User.Read https://graph.microsoft.com/Team.ReadBasic.All
        &redirect_uri=${window.location.origin}/index.html#/admin-permissions
        &state=12345`;
  };

When a button is clicked, it will retrieve the required variables and call openAdminConsentWindow function. I uploaded my app to the Teams and tested it on the web browser. It is working fine. After I consent the permissions, it closes the Consent window back. But when I upload the app to the Mac/ Desktop Teams app and open the consent Window, it opens up the consent window, I can choose to consent or not to consent the permissions showing the following popup.

After I accept or cancel, instead of closing the Window, it keeps showing our application within the same popup without closing it as follow.

The page with the loading message is basically home page of my application. How can I fix it?

Answer 1

You're getting confused between what Teams Tab SSO supports and requires, and the idea of having an admin do a pre-consent, and basically trying to do both in the same place when they're not supposed to be mixed like this. If you want an admin to pre-consent, provide that as a link to open the page separately OR rely on the standard SSO experience, which shows the admin a checkbox allowing them to "consent on behalf of the organization" - the net effect, I think, is basically the same.

That will enable you to do 'standard' tab SSO, like in this series: https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/tab-sso-code#add-code-for-getauthtoken . Note that the code uses microsoftTeams.authentication.getAuthToken which is easier to use and handles SSO better than authentication.authenticate .

Answer 2

Your redirect page, should call the notifySucces(…) method. This will call teams to close the login screen.

But as said in the other answer, you can also mark your app as “needs admin pre-approval” That will block your app in teams until the admin approves your app. That page can also include additional instructions, like pre-approve the M365 app with this link.

https://docs.microsoft.com/en-us/javascript/api/@microsoft/teams-js/microsoftteams.authentication?view=msteams-client-js-1.12.1#@microsoft-teams-js-microsoftteams-authentication-notifysuccess