Authentication Pop-up for MS Teams Desktop not working

Question

Currently developing an MS Teams Application with an embedded iFrame in the Personal Tab. MS Graph API is being used to retrieve information or set Teams meetings, so it would require for a Teams user to give User Consent. The current case is that the Authentication in the Azure Portal - App Registration was set to Multiple Tenant, so I followed the authentication pattern shown on this tutorial: Sign in users and call the Microsoft Graph API from a JavaScript single-page app (SPA) using auth code flow.

The issue then was that the pop-up doesn't show up in the MS Teams Desktop. It, however, works on MS Teams browser version. The question now is how can I make use of the pop-up authentication for an MS Teams application when using it in an MS Teams Desktop?

Answer 1

Posting the Answer for better visibility

Copying from comments

You need to use microsoftTeams.authentication.authenticate() to show the poup. Please check this documentation for more info.

Answer 2

I have this exact same problem, but have not been so lucky so far.

I am using the Angular Framework for my custom Teams app. Outside of the Microsoft Teams DESKTOP version, I have no issues at all. Azure AD authentication is working as expected. I did notice one particular action though. I am using ngrok to create a URL which I then use to register my app with Teams. Every time the ngrok URL changes and when making a request to my custom, secure web API to retrieve some app specific data, I am getting an authentication popup. I believe that is driven by MSAL. In the Teams DESKTOP, that popup is being blocked, and that's really my issue.

So, are you saying that instead of registering the MsalModule in Angular's app.module.ts file, I should use "microsoftTeams.authentication.authenticate(config)"? If so, how? Can you share some code please?

Regards,
Tolga

Answer 3

I'm having this problem as well.

I have tried using the react MSAL library but pop ups and redirects are blocked in the teams client.
Instead, I have tried to use the authentication.authenticate SDK API and added the specific Graph API scope to the scope config param. I'm able to go through the OAuth flow in a pop up, but when I try to use that token to exchange for a Graph API token using the OBO flow logic, it returns with a network error.

It works fine if I add a basic scope like User.Read, but if I add a scope like Channel.ReadBasic.All, I start getting the network error, with status 400.

Here's what I get from the client:

   {  
      errorString: '{"errorCode":"network_error","errorMessage":"Network request failed. Please check network trace to determine root cause. | Fetch client threw: Error: HTTP status code 400 | Attempted to reach: https://login.microsoftonline.com/9eab1974-31cc-4aa8-8ba7-c8943c73f995/oauth2/v2.0/token","subError":"","name":"ClientAuthError"}',  
      error: ClientAuthError: network_error: Network request failed. Please check network trace to determine root cause. | Fetch client threw: Error: HTTP status code 400 | Attempted to reach: https://login.microsoftonline.com/9eab1974-31cc-4aa8-8ba7-c8943c73f995/oauth2/v2.0/token  
          at ClientAuthError.AuthError [as constructor] (/Users/packages/bot/node_modules/@azure/msal-node/node_modules/@azure/msal-common/src/error/AuthError.ts:45:9)  
          at new ClientAuthError (/Users/packages/bot/node_modules/@azure/msal-node/node_modules/@azure/msal-common/src/error/ClientAuthError.ts:205:9)  
          at Function.ClientAuthError.createNetworkError (/Users/packages/bot/node_modules/@azure/msal-node/node_modules/@azure/msal-common/src/error/ClientAuthError.ts:259:16)  
          at NetworkManager.<anonymous> (/Users/packages/bot/node_modules/@azure/msal-node/node_modules/@azure/msal-common/src/network/NetworkManager.ts:44:39)  
          at step (/Users/packages/bot/node_modules/@azure/msal-node/node_modules/@azure/msal-common/dist/index.cjs.js:79:23)  
          at Object.throw (/Users/packages/bot/node_modules/@azure/msal-node/node_modules/@azure/msal-common/dist/index.cjs.js:60:53)  
          at rejected (/Users/packages/bot/node_modules/@azure/msal-node/node_modules/@azure/msal-common/dist/index.cjs.js:51:65)  
          at runMicrotasks (<anonymous>)  
          at processTicksAndRejections (internal/process/task_queues.js:95:5) {  
        errorCode: 'network_error',  
        errorMessage: 'Network request failed. Please check network trace to determine root cause. | Fetch client threw: Error: HTTP status code 400 | Attempted to reach: https://login.microsoftonline.com/9eab1974-31cc-4aa8-8ba7-c8943c73f995/oauth2/v2.0/token',  
        subError: ''  
      }  
    }  

Will really appreciate some help here, my intention is to detect what scopes a user has given access to, and if we don't have access to the needed scopes, we go through the oauth flow and get+store the token for future Graph API requests.