MS Teams Embedded Tab app SSO is failing to with getAuthToken issue

Hi Nirmal Lingisetty,

Thank you for reaching out. However, it seems there was an unexpected issue that caused your description to be incomplete or missing. Could you please provide the full details of the behavior you’re experiencing again? Once I have the complete information, I’ll be able to investigate this further for you.

Looking forward to your update.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

The error occurs because for Teams tab SSO the resource in webApplicationInfo must use the same domain as the page that is running inside the tab iframe, not just api://<client-id>.

For tab SSO:

1. In Microsoft Entra ID (App registration → Expose an API):
   • The Application ID URI must include the app’s domain, for example:
     • api://<your-ngrok-subdomain>.ngrok-free.app/<application-client-id>
   • This URI is what is used as the resource.
   • The domain part (<your-ngrok-subdomain>.ngrok-free.app) must match the domain that actually hosts the tab content.
2. In the Teams app manifest (manifestVersion ≥ 1.5):
   • Configure webApplicationInfo to match the Application ID URI:

      "webApplicationInfo": {
        "id": "<application-client-id>",
        "resource": "api://<your-ngrok-subdomain>.ngrok-free.app/<application-client-id>"
      }
   

3. In the tab page (your React app, including /auth-start):
   • The page must be served from the same domain as in the Application ID URI, e.g. https://<your-ngrok-subdomain>.ngrok-free.app/....
   • When the tab is loaded in Teams, window.location.origin for the iframe should be that ngrok origin, not https://teams.microsoft.com.
   • If window.location.origin is https://teams.microsoft.com, the code is probably running in the top-level Teams frame instead of inside the tab iframe. Ensure the SSO code runs in the tab content page (the URL configured for your tab) and that microsoftTeams.initialize() is called before getAuthToken().

The specific error App resource defined in manifest and iframe origin do not match is raised when the origin of the iframe (your tab content) does not match the subdomain in the resource URI configured in webApplicationInfo and in the Application ID URI in Entra ID.

Summary of fixes:

1. Set Application ID URI in Entra ID to api://<your-tab-domain>/<application-client-id>.
2. Set webApplicationInfo.resource in the manifest to that same URI.
3. Host the tab content (including /auth-start) on that same domain.
4. Ensure SSO code runs inside the tab iframe after microsoftTeams.initialize().

Next steps after obtaining the token:

1. From the tab, call authentication.getAuthToken() to get the access token.
2. Send this token to the backend (for example, in an Authorization: Bearer <token> header) as described in the “Pass the access token to server-side code” guidance.
3. On the backend, validate and decode the token (see “Validate the access token”) and use claims such as oid, tid, name, and preferred_username to identify the user.
4. If Microsoft Graph data is needed beyond the basic user-level scopes supported by getAuthToken(), use the received token in an on-behalf-of flow on the server to obtain a Graph token, as described in the Graph extension guidance.

References:

• Update app manifest for SSO and preview app
• Troubleshoot SSO authentication in Teams
• Enable SSO for tab app
• Configure your tab app in Microsoft Entra ID
• Add code to enable SSO