How to add SharePoint Pages in a static tab with authentication?

robby_o365, 

Like YannickReekmans said: the other articles are relevant only when developing your own application/page but don't really help when using a SharePoint page.

That being said, I bumped into the same issue and got it to work.

The biggest part of the solution came from Wajeed in the following StackOverflow thread:

https://stackoverflow.com/questions/57593508/sharepoint-page-not-loading-in-personal-tab-of-static-app-ms-teams-desktop-clie

However, since he reffered to 'microsoft.sharepoint.com' and 'teams' path in the url's he provided, I got confused and failed at first.
Then I found the following article which helped me get all the variables correct:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart

TL/DR;

Add/Edit the following snippet into your manifest file:

"staticTabs": [
    {
      "entityId": "TestTabId",
      "name": "Test Tab",
      "contentUrl": "https://{tenantname}.sharepoint.com/sites/{site}/_layouts/15/teamslogon.aspx?spfx=true&dest=/sites/{site}/SitePages/{page}.aspx",
      "scopes": ["personal"],
      "websiteUrl": "https://fullwebsite.website.com/about"
    }
  ],
  "validDomains": [
    "*.login.microsoftonline.com",
    "{tenantname}.sharepoint.com",
    "{tenantname}.sharepoint-df.com",
    "spoppe-a.akamaihd.net",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net",
    "msft.spoppe.com"
  ],
  "webApplicationInfo": {
    "resource": "https://{tenantname}.sharepoint.com",
    "id": "00000003-0000-0ff1-ce00-000000000000"
  }

where:

- {tenantname} should be replaced with the name of your tenant

- {site} should be the url portion reffering to the correct site collection

- {page} should be the url portion reffering to the sharepoint page you would like to load

Hope it helps!

With kind regards,

Stijn Brouwers