Microsoft Teams SSO - getting a 2400 error when trying to retrieve a token using SSO from a teams application

Question

Microsoft Teams SSO Integration: Error 2400 when the SSO window opens

I'm working on integrating an Angular application into Microsoft Teams, and I'm using SSO to authenticate users via Azure AD. However, I'm encountering issues that I can't seem to resolve.

Current Setup: -

Application Hosting:

The app is hosted on [https://www.myexampleapp.com/test](https://www.myexampleapp.com/test"www.myexampleapp.com"). -

Azure AD Application ID URI:

api://[www.myexampleapp.com/test/12345678-abcd-efgh-ijkl-9876543210](https://www.myexampleapp.com/test/12345678-abcd-efgh-ijkl-9876543210"www.myexampleapp.com"). -

Teams Manifest:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
  "manifestVersion": "1.16",
  "version": "1.0.2",
  "id": "12345678-abcd-efgh-ijkl-9876543210",
  "packageName": "com.example.teams-tab-app",
  "developer": {
    "name": "Your Name",
    "websiteUrl": "https://example.com",
    "privacyUrl": "https://example.com",
    "termsOfUseUrl": "https://example.com"
  },
  "name": {
    "short": "Teams Tab App",
    "full": "Teams Tab Application"
  },
  "description": {
    "short": "A simple app",
    "full": "This is a simple app built with Angular."
  },
  "staticTabs": [
    {
      "entityId": "exampleTab",
      "name": "Example Tab",
      "contentUrl": "https://www.myexampleapp.com/test",
      "context": [
        "personalTab",
        "channelTab"
      ],
      "scopes": [
        "personal",
        "team"
      ]
    }
  ],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "www.myexampleapp.com"
  ],
  "icons": {
    "color": "color.png",
    "outline": "outline.png"
  },
  "accentColor": "#FF5733",
  "webApplicationInfo": {
    "id": "12345678-abcd-efgh-ijkl-9876543210",
    "resource": "api://www.myexampleapp.com/test/12345678-abcd-efgh-ijkl-9876543210"
  }
}

Angular Code for Token Acquisition:

async ngOnInit() {     microsoftTeams.initialize();     await this.getAuthToken();   }    async getAuthToken() {     try {       this.authToken = await microsoftTeams.authentication.getAuthToken();       console.log('Authentication token:', this.authToken);     } catch (error) {       console.error('Error retrieving token:', error);     }   }

API Permissions: -

User.Read

Files.Read.All

(Other permissions related to site collections and access reviews)

Issues: **

Error 2400**: When the app tries to acquire the authentication token, I encounter the following error:

Any help or guidance would be greatly appreciated!  
  
  
see the attached image  
![Screenshot 2024-08-18 at 12.33.00](/api/attachments/3bbe6722-a8fd-4a0b-b6ed-b4666bf2411b?platform=QnA)  
  


also from the entra admin center, from the sign-in logs i can see this error for the failed attempts: 


```javascript
Sign-in error code
650057
Failure reason
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}.