Teams Tab app SSO error message resourceDisabled

Question

I am working on a Teams tab application where I would like to use the built in SSO to get the user's email, name and token. I used the VS Code Teams toolkit to generate an application with SSO. I rewrote the app and just copied the part with the auth. Although when I try to test the application now, I always get an error message saying resourceDisabled. Can anyone help what can be the issue? The code where I would get the token:

const scopes = ["User.Read"];

 const { teamsUserCredential } = useContext(TeamsFxContext);
 const { loading, error, data, reload } = useGraphWithCredential(
  async (graph, teamsUserCredential, scope) => {
  app.notifySuccess()

  const accessToken = await teamsUserCredential.getToken(scopes);

  setToken(accessToken?.token ?? "dqd");
  setExpiresAt(accessToken?.expiresOnTimestamp ?? 123);

  const profile = await graph.api("/me").get();
  return { profile };
},
{ scope: ["User.Read"], credential: teamsUserCredential }
);

The manifest file:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.14/MicrosoftTeams.schema.json",
  "manifestVersion": "1.14",
  "version": "1.0.0",
  "id": "${{TEAMS_APP_ID}}",
  "packageName": "com.microsoft.teams.extension",
  "developer": {
    "name": "virtualfrontdesk1673377412685",
    "websiteUrl": "https://www.virtualfrontdesk.com/",
    "privacyUrl": "https://www.virtualfrontdesk.com/privacy-policy/",
    "termsOfUseUrl": "https://www.virtualfrontdesk.com/terms-conditions/"
  },
  "icons": {
    "color": "${{CONFIG__MANIFEST__ICONS__COLOR}}",
    "outline": "${{CONFIG__MANIFEST__ICONS__OUTLINE}}"
  },
  "name": {
    "short": "${{CONFIG__MANIFEST__APPNAME__SHORT}}",
    "full": "${{CONFIG__MANIFEST__APPNAME__FULL}}"
  },
  "description": {
    "short": "${{CONFIG__MANIFEST__DESCRIPTION__SHORT}}",
    "full": "${{CONFIG__MANIFEST__DESCRIPTION__FULL}}"
  },
  "accentColor": "#FFFFFF",
  "bots": [],
  "composeExtensions": [],
  "configurableTabs": [
    {
      "configurationUrl": "${{PROVISIONOUTPUT__AZURESTORAGETABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZURESTORAGETABOUTPUT__INDEXPATH}}/config",
      "canUpdateConfiguration": true,
      "scopes": ["team", "groupchat"]
    }
  ],
  "staticTabs": [
    {
      "entityId": "index0",
      "name": "Home",
      "contentUrl": "${{PROVISIONOUTPUT__AZURESTORAGETABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZURESTORAGETABOUTPUT__INDEXPATH}}/tab",
      "websiteUrl": "${{PROVISIONOUTPUT__AZURESTORAGETABOUTPUT__ENDPOINT}}${{PROVISIONOUTPUT__AZURESTORAGETABOUTPUT__INDEXPATH}}/tab",
      "scopes": ["personal"]
    }
  ],
  "permissions": ["identity", "messageTeamMembers"],
  "validDomains": ["${{PROVISIONOUTPUT__AZURESTORAGETABOUTPUT__DOMAIN}}"],
  "webApplicationInfo": {
    "id": "${{AAD_APP_CLIENT_ID}}",
    "resource": "api://${{PROVISIONOUTPUT__AZURESTORAGETABOUTPUT__DOMAIN}}/${{AAD_APP_CLIENT_ID}}"
  },
  "showLoadingIndicator": true
}

I have these things:

1. The client id is the same in the manifest and in the azure app
2. Application ID URI is set correctly (api//the url where the app is deployed/clienId)
3. The redirect url's are correctly set in the Authentication tab in Azure
4. The api permissions: