adal:tokenRenewFailure, code: invalid_resource|AADSTS500011 - azure

Question

I'm trying to build a simple Teams tab app that lists the members of a team. I've used the Teams Toolkit for VS Code to generate the boilerplate. Running the app using F5 works fine. So far, so good.
Next I'm trying to read the team members from Graph. I've read about RSC (resource-specific consent) which seems to be exactly what I need. Because I want to prevent the app from opening any permission popups or login popups (other than the one appearing during the installation).
So I've followed the guide https://learn.microsoft.com/en-us/microsoftteams/platform/graph-api/rsc/resource-specific-consent and I've also made the check. Works fine.
However, as soon as I'm running the code locally (using F5), I'm getting this error:
AUTHMSAL: Event: adal:tokenRenewFailure, code: invalid_resource|AADSTS500011: The resource principal named api://localhost:53000/MY-CLIENT-ID-UUID was not found in the tenant named MYTESTTENANT. This can happen if the application has not been installed by the administrator of the tenant or consented to by any user in the tenant. You might have sent your authentication request to the wrong tenant.
I've double checked: the tenant does exist (and there's only this one). The app id is also correct, it resembles the one I've added using the "App registration". I've also added a "Client secret", however I'm not exactly sure where to add it to my code. This is probably the root cause of my problem.
The relevant parts of my code are:
// manifest.template.json
{
...
"webApplicationInfo": {
"id": "MY-CLIENT-ID-UUID",
"resource": "api://localhost:53000/MY-CLIENT-ID-UUID"
},
"authorization": {
"permissions": {
"resourceSpecific": [
{
"name": "TeamSettings.Read.Group",
"type": "Application"
},
{
"name": "TeamMember.Read.Group",
"type": "Application"
},
// ... (I've added *all* other permissions, too, just for testing...)
]
}
}
}
// Tab.tsx
// ...
// I've read on NPM that useTeamsFx() is deprecated and switched to useTeamsUserCredential()
const all = useTeamsUserCredential({
clientId: "MY-CLIENT-ID-UUID",
initiateLoginEndpoint: "fooBarInitiateLoginEndpoint",
// ...don't I have to add my clientSecret somewhere?
});
// Welcome.tsx
// ...
const { loading, error, data, reload } = useGraphWithCredential(
async (graph, credential, scope) => {
await graph.api(`/teams/MY-GROUP-ID/members`).get() // leads to the error
},
{
scope: [
"TeamMember.Read.Group"
],
credential
}
)
I've also tried to follow the AddSSO guide, but it led to permission popups which I want to prevent. Plus it added a lot of AAD specific stuff (like aad.template.json), which I don't need, because RSC suffices in my case (...right?).
Also, my app doesn't need SSO (...right?) because it only lists the members of the team and it runs inside Teams only...
EDIT
I've also tried new TeamsFx(IdentityType.App) instead of useTeamsUserCredential() (because RSC permissions have "type": "Application" in the manifest.template.json), however this ended up in an error:
Uncaught ErrorWithCode.IdentityTypeNotSupported: Application identity is not supported in TeamsFx

Answer 1

Somebody else may be able to provide you a full Teams example, but the main error in your case is this one:
AUTHMSAL: Event: adal:tokenRenewFailure, code: invalid_resource|AADSTS500011: The resource principal named api://localhost:53000/MY-CLIENT-ID-UUID was not found in the tenant named MYTESTTENANT. This can happen if the application has not been installed by the administrator of the tenant or consented to by any user in the tenant. You might have sent your authentication request to the wrong tenant.
The reason for this is here:
"webApplicationInfo": {
"id": "MY-CLIENT-ID-UUID",
"resource": "api://localhost:53000/MY-CLIENT-ID-UUID"
},
"api://localhost:53000/MY-CLIENT-ID-UUID" is not a valid resource identifier. Please note that this is not the API url, but rather its identifier. Please look for the App Id URI in your application registration in Azure Portal.
The correct value is most likely api://<your-client-id>, but you need to set it first.
See also Does the resource URL in webApplicationInfo need to contain the Microsoft Teams App ID?
https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationMenuBlade/~/Overview/appId/<your-client-id>/