Backstage - Silent Authentication with webchat

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

Bundle (webchat.js)

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

No response

Which area does this issue affect?

Others or unrelated

What is the public URL for the website?

No response

Please describe the bug

Hi Team

I have created an azure bot and integrated a PVA skill (enabled authentication).

I wanted to include this above azure bot using the below components in backstage (web app) (https://backstage.io/)

import {ReactWebChat, createDirectLine, createStore} from 'botframework-webchat';
import {useMsal } from '@azure/msal-react';
import { PublicClientApplication } from "@azure/msal-browser";

Now, after integrating in backstage, once user logs in to backstage (web app), I want to do acquireTokenSilent with the request and ensure user is already logged in to azure bot instead of showing sign in button in azure bot.

This above implementation works fine if the parent web app uses msal implementation of authentication.
But, looks like backstage web app uses Azure OAuth for authentication.

more info
https://backstage.io/docs/auth/microsoft/provider (The Backstage core-plugin-api package comes with a Microsoft authentication provider that can authenticate users using Azure OAuth.)

So, right now if i create a new PublicClientApplication instance and pass the details to method
acquireTokenSilent(requestObj)

This throws below error.

ClientConfigurationError: authority_mismatch: Authority mismatch error. Authority provided in login request or PublicClientApplication config does not match the environment of the provided account. Please use a matching account or make an interactive request to login to this authority.
at ClientConfigurationError.AuthError [as constructor] (AuthError.js:31:1)
at ClientConfigurationError.ClientAuthError [as constructor] (ClientAuthError.js:224:1)
at new ClientConfigurationError (ClientConfigurationError.js:117:1)
at ClientConfigurationError.createAuthorityMismatchError (ClientConfigurationError.js:264:1)
at SilentCacheClient.eval (BaseInteractionClient.js:146:1)
at step (_tslib.js:87:1)
at Object.eval [as next] (_tslib.js:68:1)
at fulfilled (_tslib.js:58:1)

Let me know how we can do acquireTokenSilent method call if the parent webapp is using the azure oauth for user login?

Thank you!

Do you see any errors in console log?

ClientConfigurationError: authority_mismatch: Authority mismatch error. Authority provided in login request or PublicClientApplication config does not match the environment of the provided account. Please use a matching account or make an interactive request to login to this authority.
    at ClientConfigurationError.AuthError [as constructor] (AuthError.js:31:1)
    at ClientConfigurationError.ClientAuthError [as constructor] (ClientAuthError.js:224:1)
    at new ClientConfigurationError (ClientConfigurationError.js:117:1)
    at ClientConfigurationError.createAuthorityMismatchError (ClientConfigurationError.js:264:1)
    at SilentCacheClient.eval (BaseInteractionClient.js:146:1)
    at step (_tslib.js:87:1)
    at Object.eval [as next] (_tslib.js:68:1)
    at fulfilled (_tslib.js:58:1)

How to reproduce the issue?

Follow the steps in the bug description

What do you expect?

how we can do acquireTokenSilent method call if the parent webapp is using the azure oauth for user login?

Is there any other way of acquiring silent token of the bot ?

What actually happened?

Hi Team

I have created an azure bot and integrated a PVA skill (enabled authentication).

I wanted to include this above azure bot using the below components in backstage (web app) (https://backstage.io/)

import {ReactWebChat, createDirectLine, createStore} from 'botframework-webchat';
import {useMsal } from '@azure/msal-react';
import { PublicClientApplication } from "@azure/msal-browser";

Now, after integrating in backstage, once user logs in to backstage (web app), I want to do acquireTokenSilent with the request and ensure user is already logged in to azure bot instead of showing sign in button in azure bot.

This above implementation works fine if the parent web app uses msal implementation of authentication.
But, looks like backstage web app uses Azure OAuth for authentication.

more info
https://backstage.io/docs/auth/microsoft/provider (The Backstage core-plugin-api package comes with a Microsoft authentication provider that can authenticate users using Azure OAuth.)

So, right now if i create a new PublicClientApplication instance and pass the details to method
acquireTokenSilent(requestObj)

This throws below error.

ClientConfigurationError: authority_mismatch: Authority mismatch error. Authority provided in login request or PublicClientApplication config does not match the environment of the provided account. Please use a matching account or make an interactive request to login to this authority.
at ClientConfigurationError.AuthError [as constructor] (AuthError.js:31:1)
at ClientConfigurationError.ClientAuthError [as constructor] (ClientAuthError.js:224:1)
at new ClientConfigurationError (ClientConfigurationError.js:117:1)
at ClientConfigurationError.createAuthorityMismatchError (ClientConfigurationError.js:264:1)
at SilentCacheClient.eval (BaseInteractionClient.js:146:1)
at step (_tslib.js:87:1)
at Object.eval [as next] (_tslib.js:68:1)
at fulfilled (_tslib.js:58:1)

Let me know how we can do acquireTokenSilent method call if the parent webapp is using the azure oauth for user login?

Thank you!

Do you have any screenshots or recordings to repro the issue?

No response

Adaptive Card JSON

No response

Additional context

No response

Start by reviewing the ReactWebChat, createDirectLine, createStore, useMsal, and PublicClientApplication integration described in the issue, then compare it with Backstage's Microsoft provider documentation. Reproduce the reported authority_mismatch error and determine whether the existing Web Chat integration supports this authentication flow. Done should include a documented supported approach or a clear limitation.