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

Question

When adding a Sharepoint Online site to a MS Teams static Tab referring to this Q&A helps greatly, but how would I go about when having a React single page application Tab and and a Sharepoint online Tab in the same application?

 {
  "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"
  ]
}],

As I need to set the defined source to the AAD Application needed for the React SPA I have trouble authenticating to and displaying the Sharepointsite 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 to Sharepoint trough the AAD App and if so, using which authentication method?

Your help is greatly appreciated!

Answer 1

@AdoTbo, Your webapplicationinfo look good, just make sure correct values are passed. You need to perform AD authentication only. SharePoint authentication also internally uses AD authentication. You can exchange the AAD token with SharePoint which is getting generated for app resource. Please check the detailed documentation.