Microsoft Teams Tab App Fails Authentication with AADSTS650057 Invalid Resource Error

Question

Hi,

I'm developing a Microsoft Teams Tab app using a custom manifest and integrating it with Microsoft Entra ID (Azure AD) for authentication. While authentication works seamlessly in the browser, attempting to log in through the Teams app results in errors. I've followed various configuration steps based on guidance, but I'm still encountering issues.

In fact, i am using: the Teams sdk js: microsoftTeams.authentication.getAuthToken()

My manifest.json contains:

"webApplicationInfo": {
  "id": "APP_ID",
  "resource": "Application_ID_URI"
}

I have an app in Microsoft azure App registration which have the following configs:

• A redirect URI

A valid client secret

4 Optional Claims: ID -> prederred_username and upn; Access -> prederred_username and upn

• Expose an API: Application_ID_URI, a scope access_as_user (Admins and users) enabled
• API granted Permissions: 12 in Microsoft Graph including User.Read, profile and one under my APP (access_as_user)

The last error is the following:
Invalid resource. The client has requested access to a resource which is not listed in the requested permissions in the client's application registration. Client app ID: {appId}({appName}). Resource value from request: {resource}. Resource app ID: {resourceAppId}. List of valid resources from app registration: {regList}. BTW, {regList} is empty.

What am I doing wrong?