SSO not working with React Webchat

[aksridhar]

Is it an issue related to Adaptive Cards?

• [ ] Yes, this is an Adaptive Card issue but it is specific to Web Chat.

Do you have any screenshots?

The below code is used with React webchat with Directline secret and generating the token for the bot.

thisObject.directLine.postActivity({
                type: 'event',
                name: 'signin/tokenExchange',
                value: {
                    id: activity.attachments[0].content.tokenExchangeResource.id,
                    connectionName: activity.attachments[0].content.connectionName,
                    token: token,
                },
                "from": {
                    id: "Email",
                    name: "name",
                    role: "user"
                }
              }).subscribe(
                id => 
                {
                    debugger;
                    if (id === 'retry') 
                    {
                      //document.location.reload();
                        // bot was not able to handle the invoke, so display the oauthCard
                        return next(action);
                    }
                    // else: tokenexchange successful and we do not display the oauthCard
                },
                error => 
                {

                    // an error occurred to display the oauthCard
                    return next(action);
                }

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

NPM

Which hosting environment does this issue primarily affect?

SharePoint

Which browsers and platforms do the issue happened?

Browser: Edge (latest), Browser: Chrome (latest), Browser: Firefox (latest)

Which area does this issue affect?

Others/unrelated

Is this an accessibility issue?

• [ ] Yes, this is an accessibility issue.

Please describe the bug

We currently use React webchat to embed into a SharePage page (using React Npm and spfx). The code mentioned above forces the Single Sign On using AAD Authentication by generating the token using Directline secret. But seems like everytime the login button keeps coming even though the token generation is fine. The same code works fine with webchat.js bundle. Need your help to figure out why this is not working. Appreciate your help.

Do you see any errors in console log?

No errors

How to reproduce the issue?

1. Try typing a text in webchat and the oauth login card event will be trigerred
2. This will call token generation code and supposed to do token exchange so that user is logged in

What is the expected and actual behavior?

Expected: Single Sign On should work and Login button should not be displayed as user has already logged in

Actual: Login button is being displayed always

Adaptive Card JSON

No response

Additional context

No response

[stevkan]

@aksridhar, is your implementation based off of one of the SSO samples provided in this repo? If so, can you tell me which one?

[aksridhar]

Hello @stevkan Thanks for responding so quickly. The original react code was from https://github.com/microsoft/BotFramework-WebChat but the webchat always prompted for login and hence I was trying to use the webchat.js SSO sample available in https://learn.microsoft.com/en-us/power-virtual-agents/configure-sso. Our bot is PVA Bot and we are using webchat.js and it works fine with SSO but using React webchat it always prompts for login

[stevkan]

@aksridhar - thank you for your patience. I've been looking into this and hope to have a useful update for you soon.

[aksridhar]

Thanks a lot Steven. Really appreciate it. Thanks,Sridhar On Wednesday, November 30, 2022 at 08:11:53 PM EST, Steven Kanberg @.***> wrote:

@aksridhar - thank you for your patience. I've been looking into this and hope to have a useful update for you soon.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[stevkan]

@aksridhar - Thank you for your patience. I'm having some trouble getting a repro setup of this. Please accept my apology for the wait. I have a couple quick clarifying questions.

When you say you are using React Web Chat, do you mean you are using the React flavor of Web Chat as in window.ReactDOM.render()? Or do you mean you are using Web Chat within a React framework project?

The original react code was from https://github.com/microsoft/BotFramework-WebChat

Can you tell me which Web Chat SSO sample you had initially tried?

Our bot is PVA Bot and we are using webchat.js and it works fine with SSO but using React webchat it always prompts for login

Does this occur in React regardless of whether you are using the BotFramework-WebChat sample or the PVA Web Chat sample?

[stevkan]

@aksridhar - I was able to get both the PVA SSO and Web Chat SSO samples up and running while connected to a PVA bot, but with limited success.

I know the Web Chat SSO sample works since I can successfully use SSO to login when I connect to my BotFramework SDK bot. However, using the same OAuth credentials in PVA's Authentication that are used in the SDK bot registration's OAuth setup only ever produces the magic code.

The same is true for the PVA SSO sample in that it only ever produces the magic code. (This sample doesn't work with a BF SDK bot.)

That both sample code bases, using entirely different methods for implementing Web Chat, produce the same result leads me to believe that the issue is on the PVA side. I'm working on identifying who the right person in the PVA team is that could help me with this. I'll provide an update once I know who this is and have had a chance to discuss this with them.

What I have not been able to repro is the reoccuring login prompt after login. I suspect you are not actually getting logged in which is resulting in the below code getting executed. How are you verifying your login status?

if (id === 'retry') 
    {
        //document.location.reload();
        // bot was not able to handle the invoke, so display the oauthCard
        return next(action);
    }
    // else: tokenexchange successful and we do not display the oauthCard

I don't know if the issue I'm experiencing regarding the magic code is specific to me or if you'll experience the same (assuming you aren't successfully logging in).

[aksridhar]

Hello @stevkan Really apologize for the delay in responding. Thank you so much for looking into this. One thing I love about React control for webchat is that it does not show any login prompt. My channel will be Teams and with webchat and PVA I am able to get SSO to work but it keeps signing in very often. I am hoping to avoid this with React and PVA. The token creation is successful but token exchange code is not working with React approach.

[stevkan]

@aksridhar - I'm including the primary Web Chat developer in this conversation to rely on his expertise. However, as he is out for the holidays until after the new year, we can't expect a response until after then. Your patience will be appreciated.

@compulim - DRI suggested may have insights on how to successfully setup SSO with a PVA bot. Can you provide any thoughts or guidance on this?

[compulim]

@aksridhar I am not familiar with how SSO works with PVA. I am reading some docs from here, https://learn.microsoft.com/en-us/power-virtual-agents/configure-sso#configure-your-custom-canvas-html-code-to-enable-sso.

Comparing with your code, the postActivity() call is sending an activity of type "invoke", rather than "event".

  directLine.postActivity({
-   type: 'event',
+   type: 'invoke',
    name: 'signin/tokenExchange',

Please let us know if it works. This is directly talking to PVA bot and this is outside the scope of Web Chat. If it doesn't work, we will find someone from PVA who owns the SSO part to help. Probably CK or Jeff.

(Notes to DRI: for further comment on this issue, please redirect it to SSO feature owner in PVA.)

[aksridhar]

Hello @compulim Thank you so much for looking into it. I already created a ticket in PVA forum but did not hear anything till date. The PVA code does work with javascript but I am trying to use react component. I am passing 'invoke' as that is the only value allowed.

thisObject.directLine.postActivity({ type: 'event', name: 'signin/tokenExchange', value: { id: activity.attachments[0].content.tokenExchangeResource.id, connectionName: activity.attachments[0].content.connectionName, token: token, }, "from": { id: "", name: "" } }).subscribe(

Looks like the token exchange is not happening.

[compulim]

DRI: Salem is going to look at this ticket.

[adilei]

Bumping this as I've ran into the same issue (or so it seems).

This sample works - if the user logs in before BF sends the sign in request, the OAuth card is not displayed.

The same logic in a React component fails, though. More specifically, sending the invoke activity fails with the following error (although the actuall HTTP status is 502 - bad gateway)

{ "error": { "code": "BotError", "message": "Failed to send activity: bot returned an error" }, "httpStatusCode": 500 }

edit: I managed to get my component working. In my case, the scopes for the token request were hard coded, and did not include the custom scope for PVA (in the JavaScript example the scope is determined dynamically). Bottom line - this seems to be working in React as well.