angular - Microsoft Teams tab loading app with Auth0

Question

I got an angular SPA using Auth0 for authentication. I tried adding it as an app i Microsoft teams and the usual username and password login works fine however, using LinkedIn and Google ended up not working in the actual app but only in the web client version of Teams.

I'm pretty new into the O365 world and also doing apps for teams so I'm not really sure where to start looking.

My manifest looks like the following:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
  "manifestVersion": "1.8",
  "id": "XXXXXXXXXXXXXXXX",
  "version": "1.0",
  "packageName": "helloTeams",
  "developer": {
    "name": "Contoso",
    "websiteUrl": "https://www.contoso.com",
    "privacyUrl": "",
    "termsOfUseUrl": "",
    "mpnId": "6006813"
  },
  "name": {
    "short": "Hello world",
    "full": "Hello world"
  },
  "description": {
    "short": "Testing!",
    "full": "Testing!"
  },
  "icons": {
    "outline": "icon-outline.png",
    "color": "icon-color.png"
  },
  "accentColor": "#6b009e",
  "configurableTabs": [],
  "staticTabs": [
    {
      "entityId": "XXXXXXXXXXXXX",
      "name": "Vocean",
      "contentUrl": "https://app.contoso.com/",
      "scopes": [
        "personal"
      ]
    }
  ],
  "bots": [],
  "connectors": [],
  "composeExtensions": [],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "app.contoso.com", "*.google.com", "*.linkedin.com"
  ],
  "showLoadingIndicator": false,
  "isFullScreen": false
}

I've tried both with doing the login flow for google and linkedin with redirect and with pop-up window no of them works in the Teams desktop application (windows). Any clues of where to start look would be much appreciated.

question from:https://stackoverflow.com/questions/65901880/microsoft-teams-tab-loading-app-with-auth0

Answer 1

Problem in the manifest file. It did not support wildcards in the domain name.

Next problem is that Teams application is doing an iframe and Google and LinkedIn doesn't support iframed logins. Tried to do the pop-up flow instead but then it opens the popup in the default browser instead of teams.

Follow up question: Is there an easy way to have the pop-up be opened in Teams? Otherwise it feels like I need to create a completely new login flow just for teams.