OAuth cards from OAuthPrompt do not render within teams app

[xrajishx]

Versions

What package version of the SDK are you using.: ~4.14.0 What nodejs version are you using: v14.15.1 What browser version are you using: Chrome What os are you using: MacOS Catalina

Describe the bug

OAuth cards from OAuthPrompt do not render within teams app. It works fine within the Bot Framework Emulator and within 'Test in Web Chat' option in the Azure bot page in Azure portal. It does not however show the login card within the teams web app or within teams desktop app.

To Reproduce

Steps to reproduce the behavior:

1. Clone the BotBuilder Samples repository.
2. Navigate into the teams auth example number 46 folder.
3. Install the dependencies.
4. Create an Azure bot on Azure portal and configure an OAuth connection for 'Azure AD V2'
5. Set up the environment variables in the `.env' file in the sample number 46.
6. Run the bot and run ngrok for a https url.
7. Set up the bot in Azure portal to use the ngrok URL + /api/messages as the messaging endpoint.
8. Test the sample using the following methods:
   • Inside of Bot Framework emulator: works fine
   • Inside of 'Test in Web Chat' option: works fine
   • Update the manifest.json file in the teamsAppManifest with the correct ids and zip the contents of the folder and upload as a new app in teams. Test the behavior in teams web and teams desktop.

Expected behavior

The login prompt card shows up just like it did on the emulator and the web test chat feature.

Actual behavior

The prompt never shows up. If you already login from a different client, you will get auto logged in. But if you logout with the 'logout' command and try to login again, the prompt does not show up.

Screenshots

Works in Bot Emulator

Works in Test in Web Chat

Does not work in teams

Additional context

Looking into it a bit more, I see the prompt card that is sent just sends an activity with the content below. Without using OAuthPrompt, if you simply use sendActivity to send this object from your bot, it behaves the same way (works everywhere except in teams).

{
  "type": "message",
  "inputHint": "acceptingInput",
  "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.oauth",
      "content": {
        "buttons": [
          {
            "type": "signin",
            "title": "Sign In",
            "value": "https://token.botframework.com/api/oauth/signin?signin=<another_id>"
          }
        ],
        "connectionName": "<your-connection-name>",
        "tokenExchangeResource": {
          "id": "<some_id>",
          "uri": "api://botid-<app_id>",
          "providerId": "<some_other_id>"
        },
        "text": "Please sign in"
      }
    }
  ]
}

[xrajishx]

I had a call with someone from the Microsoft support team and got this issue resolved. Apparently I did have problems in my configuration. I am closing this issue, but I think it helps to have some error message displayed somewhere that will help us debug when there are issues in our OAuth configuration instead of it having it not show any errors and also not work.

[xrajishx]

Linking to answers.microsoft.com where I posted what worked for me, so that people can find it if they face the same issue as I did.

https://answers.microsoft.com/en-us/msteams/forum/msteams_tfb-msteams_topother/oauthprompt-card-does-not-render-inside-of-teams/96ad96cc-4f8b-4cd5-9274-a487bb25a74e