Authenticating to SharePoint Online Site via React SPA in MS Teams personal Tab

[aleksandrasroka]

When adding a SharePoint Online site to a MS Teams static Tab and having a React single page application (SSO) Tab and a SharePoint online Tab in the same application, app manifest like below:
{
"entityId": "id1",
"name": "name1",
"contentUrl": "https://*********.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/SitePages/Home.aspx",
"scopes": [
"personal"
]
},
{
"entityId": "id2",
"name": "name2",
"contentUrl": "https://{{HOSTNAME}}/tab",
"scopes": [
"personal"
]
}],
Set the defined source to the AAD Application needed for the React SPA I have trouble authenticating to and displaying the SharePoint site in the MS Teams desktop application.
"webApplicationInfo": {
"id": "xxxxxx-xxxx-xxxx-xxxx-xxxxxxxx",
"resource": "api://subdomain.domain.com/xxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"},

Am I missing something obvious? Would I need to authenticate SharePoint trough the AAD App and if so, using which authentication method?
Your help is greatly appreciated!

[Meghana-MSFT]

Could you please let us know what error are you facing?

[aleksandrasroka]

Hi @Meghana-MSFT ,

Basically there is no real error that is visible, it's only for client Teams app the problem is that sharepoint library is not displaying in tab at all (empty screen) like in web Teams app.

This will work only when in in manifest:
"webApplicationInfo": {
"id": "00000003-0000-0ff1-ce00-000000000000",
"resource": "https://xxxxxx.sharepoint.com"
}
Can we have both for SSO app registration and for Sharepoint ?

[Meghana-MSFT]

We checked this at our end by setting up this tab-sso sample. We added a static tab in the manifest and it is working fine. Static tab is loading fine. Below is staticTabs section in manifest

 "staticTabs": [
    {
      "entityId": "auth",
      "name": "Auth",
      "contentUrl": "https://f8f1-xx-x-xxx-xx.ngrok-free.app/ssoDemo/?inTeams=true",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "id1",
      "name": "name1",
      "contentUrl": "https://mxxxxxxxxxxx.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/SitePages/Home.aspx",
      "scopes": [
        "personal"
      ]
    }
  ],

[aleksandrasroka]

Hi @Meghana-MSFT,
Can you please also provide "validDomains" and "webApplicationInfo" secions from app manifest.
Did you test this on Client Desktop Teams App, on Web it always works the issue persist only on desktop Teams application.
Can you please confirm that you tested that on Dektop Teams Aplication, and provide requested sections.

Thaks in advance,
Ola

[Meghana-MSFT]

@aleksandrasroka - We are able to repro this in Desktop. It is working fine in Teams web client. We also tried by adding the sharepoint as a personal tab and even that is not loading in Teams Desktop client. We just see a loading symbol, we will check internally and get back to you.

[aleksandrasroka]

Thank you, we are looking forward for the solution.

[Meghana-MSFT]

@aleksandrasroka - We checked this with engineering team and we have the below response.

What the developer is trying to do is not supported today. They should build two separate Teams App to handle these scenarios - one pointing to the SharePoint content and one pointing to the developer’s own web app.

It is working in Web client most likely because SharePoint is falling back to cookie-based auth since the developer’s manifest is misconfigured preventing the app from getting a SharePoint token. Cookie-based auth doesn’t work in any of our native clients (e.g. Desktop, Mobile) so it’s not something that can be relied on for a production app. And even in the browser, cookie-based auth will stop working once Google completes their 3P Cookie Deprecation (3PCD) rollout:
https://developers.google.com/privacy-sandbox/3pcd