Authentication in an MS Teams Personal Tab with a Multi-tenant App Registration

Question

My MS Teams App currently has a Personal Tab with an embedded iFrame of an Azure App Service. The web application must retrieve an access token to make use of the MS Graph API. At first, the following guide was used during the time when the App Registration was only Single Tenant, and it worked as intended.

However, when the App Registration resource was changed to a Multiple Tenant App Registration which came from outside our Tenant (while running the MS Teams app in my own tenant), this error occurred: Failed with error - App resource defined in manifest and iframe origin do not match. It was made sure that the manifests for both App Registration and MS Teams App are the same.

This guide was then used instead, and it works on MS Teams browser as intended, but now MS Teams desktop won't show the pop-up since it doesn't utilize @microsoft/teams-js.

Is there a particular way to retrieve a user's access token in an MS Teams App (Personal Tab) that utilizes a Multi-tenant App Registration?

Answer 1

I managed to retrieve the access token by setting the Consent Popup to redirect to an https://login.microsoftonline.com/common authentication where after logging in or choosing an MS account, will use @azure/msal-browser's acquireTokenSilent and passing the value to Close Popup as a hash in the redirect URL.