SPFX using AadHttpClient to access AAD secured endpoint not working on Teams Tab

[Ashish1662]

Category

• Question
• Typo
• Bug
• Additional article idea

We are using a SPFX client webpart using v1.8.1 and have successfully consumed an AAD protected endpoint. We have used AadHttpClient to take care of token acquisition which works pretty well in a SP web page.

However, when adding the WP as teams tab, it loads infinitely and does not show anything. Is this a known issue or am we are missing something. If it know what could be the possible workarounds.

Also the teams dev tools console is not showing any detailed information/error to debug or to start the RCA.

Thanks in advance.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[andrewconnell]

Are you seeing this in the Teams web client / native client?

If web, which browser?

Have you tried it using SPFx v1.8.2 as it contained a fix for the teamsContext... not sure if it's related or if something else was addressed in 1.8.2 that's related to this...

[Ashish1662]

It works fine for the web browsers. The issue is when using teams native client (both desktop & mobile).

I have tried it with latest version i.e. 1.8.2 but the issue is with this version too.

[datifnet]

It is reproducable.
If you fetch an AAD protected endpoint (e.g. Az web app or Az function) in an SPfx web part (1.8.1 and 1.8.2) the authentication process with AadHttpClient ....

• ... works fine with Teams Online (SPfx component as tab, SharePoint tab).
• ... works fine with SPO (SPfx webpart in SPO page).
• ... FAILS in Teams CLIENT. Even if you embed the SharePoint tab to MS teams client, the authentication for these web parts fails as well. Looks like there are two different mechanism for authentication in place.

Means the idea and the really cool thing about using the same SPfx component in both SPO world as well as MS teams world, is actually not executable. I would also appreciate if that issue makes it into approved backlog as it has impact on architectural designs for future solutions. Using unauthenticated endpoints delivering enteprise data is not an option, actually.

Someone else able to re-produce?

[lucabandMSFT]

hey @beschick , that is unfortunately by design for now. While we are releasing code to fix it you can use the following workaround to make it work on Teams rich client:
Note: you have to be Global Tenant Administrator to perform all the steps below
Step 1. Visit the "Manage Permissions" Page in SharePoint Tenant Admin
Step 2. Go to -> https://aad.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredAppsPreview
Step 3. Click on "SharePoint Online Client Extensibility" Web Application Principal
Step 4. Click Manifest on the left menu
Step 5. Copy the id from the oAuth2Permission array
"oauth2Permissions": [
{
"adminConsentDescription": "Allow the application to access SharePoint Online Client Extensibility Web Application Principal on behalf of the signed-in user.",
"adminConsentDisplayName": "Access SharePoint Online Client Extensibility Web Application Principal",
"id": "2143704b-186b-4210-b555-d03aa61823cf",
"isEnabled": true,
"lang": null,
"origin": "Application",
"type": "User",
"userConsentDescription": "Allow the application to access SharePoint Online Client Extensibility Web Application Principal on your behalf.",
"userConsentDisplayName": "Access SharePoint Online Client Extensibility Web Application Principal",
"value": "user_impersonation"
}
],
Step 6. Replace “preAuthorizedApplications” entry with the following json
"preAuthorizedApplications": [
{
"appId": "00000003-0000-0ff1-ce00-000000000000",
"permissionIds": [
"2143704b-186b-4210-b555-d03aa61823cf"
]
}
],
Step 7. Hit Save.

We will provide official documentation on that workaround as well.
Please let us know if that unblocks you.

[andrewconnell]

@lucabandMSFT will this same process work with the SharePoint Mobile app? Seems related to #4073