Authentication for embedded app in Teams Tab

Question

Hello, I'm struggling a bit coming up with a clear approach for managing authentication for our embedded MS Teams application.

Our users are segregated into different companies, and each company may handle provisioning and authentication methods in a different way according to configuration.

When embedding our app in MS Teams, it's not really clear how to show them tailored content or have them be authenticated into our app from within the iframe.

I've checked the auth documentation and videos for MS Teams, but most of it either describes how to get access to Graph data or use SSO with AAD or Microsoft oauth2 to get the users authenticated in the embedded application. But is there a way to let users login to our app with any of our current methods and then redirect back to the tab?

Will the SDK methods allow for such flow, or can anyone point me in the right direction.

Thanks in advance!

Answer 1

Hi @Gianluca Candiotti - The flow mentioned in Microsoft Teams authentication flow for tabs is applicable for custom login providers as well.

Here are the steps:

1. Provider Login button to the user. Call microsoftTeams.authentication.authenticate() with list of providers to choose from.

   microsoftTeams.authentication.authenticate({  
       url: window.location.origin + "/tab-auth/choose-provider",  
       width: 600,  
       height: 535,  
       successCallback: function (result) {  
           getUserProfile(result.accessToken);  
       },  
       failureCallback: function (reason) {  
           handleAuthError(reason);  
       }  
   });  
   

2. Provide option for user to choose from different authentication methods. See this image - authentication pop-up
3. On click of selction of provider you can redirects user to respective identity provider where user can complete the login.
4. Make sure to set redirect URL which is on same domain as your '/tab-auth/choose-provider' page.
5. Once you are redirected after successful login you can call microsoftTeams.authentication.notifySuccess() with parameters like session id/ auth token.
6. microsoftTeams.authentication.notifySuccess() will close the pop-up and now you can redirect authenticated user to page of your choice.

Please let me know if you need any further help.

Answer 2

• The issue with reading cookies might be due to SameSite prevention. Please refer this docs for more details https://learn.microsoft.com/en-us/microsoftteams/platform/resources/samesite-cookie-update
  You can refer this blog as well
• Using localStorage is a good practice. Have first page with company selection, store company value in local storage and have SSO auth flow