How to change the behavior of the "Sign In" button of the OAuthCard to just open the URL without redirect

Question

I have the Webchat (from the Microsoft Bot Framework) running embedded in another application that uses a browser under the hood.

When trying to add Authentication to the bot, I realized that the OAuthCard's Sign-in button doesn't work because is trying to open a blank window (about:blank) that is used to redirect the user to the login page of the identity provider. In the embedded context, the OS doesn't know how to handle the about:blank call. See the image below.

I'm following this example, that it is actually working on the browser:
Add authentication to a bot
Bot authentication example

I want to know if there is a way to change the behavior of the "Sign In" button of the OAuthCard to just open the sign-in URI directly without using the about:blank and redirect technique.

Answer 1

I was able to make it work after finding out that was possible to change the button type of the OAuthCard from "signin" to "openUrl" before the Webchat does the rendering.

There seems to exist a similar issue with Microsoft Teams. Here where I found the clue:
https://github.com/microsoft/botframework-sdk/issues/4768

According to the Webchat reference, it is possible to intersect and change the activities:
https://github.com/microsoft/BotFramework-WebChat/blob/master/docs/API.md#web-chat-api-reference

Here is the solution, that is more like a hack. I hope this would be configurable in the future:

      // Change the button type in the OAuthCard to the type of OpenUrl
      const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
        if (action.type == "DIRECT_LINE/QUEUE_INCOMING_ACTIVITY" && 
            action.payload.activity.hasOwnProperty("attachments") && 
            action.payload.activity.attachments[0].contentType === "application/vnd.microsoft.card.oauth") {
          action.payload.activity.attachments[0].content.buttons[0].type = "openUrl";
        }
        return next( action );
      });
      
      // Pass the store to the webchat
      window.WebChat.renderWebChat({
         ...,
         store
      });