Agent - Third Party OAuth Sign In not working (SSO is working)

[NWH-SAmin5]

I have created an agent using Visual Studio Code M365 toolkit.
Teams Agent with Azure Open AI, TypeScript

"dependencies": {
        "@azure/identity": "^4.11.1",
        "@microsoft/teams.ai": "^2.0.0",
        "@microsoft/teams.apps": "^2.0.0",
        "@microsoft/teams.common": "^2.0.0",
        "@microsoft/teams.graph-endpoints": "^2.0.2",
        "@microsoft/teams.openai": "^2.0.0"
    }

I have implemented SSO following these two links
https://microsoft.github.io/teams-ai/teams/user-authentication/sso-setup/
https://microsoft.github.io/teams-ai/typescript/in-depth-guides/user-authentication/

Above allows me to make graph calls for example const me = await userGraph.call(endpoints.me.get);

How can I add another external service authentication which also uses Microsoft Entra ID / OAuth?

Please guide me
I want to be able to make calls to external services as well as graph call in my tenant in the same bot

External service OAuth connection in Bot configuration

[sayali-MSFT]

Hello @NWH-SAmin5 ,Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[sayali-MSFT]

Hello @NWH-SAmin5 ,
You’re on the right track! Since you already have Teams SSO working for Microsoft Graph, adding an external service that also uses Microsoft Entra ID involves extending your authentication flow. Use one of two patterns: (A) On‑Behalf‑Of (OBO) to call the external API as the signed‑in user (recommended when user context/authorization is required), or (B) Client‑Credentials (app‑only) if you just need tenant‑wide access. Both require Entra app registrations and admin consent.

To integrate an external API with your Azure Bot, first configure an additional OAuth connection in Azure Bot Channels Registration by adding a new connection with Azure Active Directory v2, using the external app’s Client ID, secret, and required scopes. Next, choose between two approaches: the On-Behalf-Of (OBO) flow or an OAuthPrompt. The OBO flow is preferred when the external service shares the same Entra ID tenant, allowing token exchange without additional user consent. This involves sending the Teams SSO token to Microsoft’s token endpoint to obtain an external API token. The provided TypeScript example demonstrates how to request and use this token to call an external API. If OBO isn’t feasible, implement an OAuthPrompt to request user consent and retrieve the external service token manually.

Reference Document-
1.https://learn.microsoft.com/en-us/entra/identity-platform/v2-oauth2-on-behalf-of-flow
2.https://microsoft.github.io/teams-ai/csharp/in-depth-guides/user-authentication/
3.https://learn.microsoft.com/en-us/microsoftteams/platform/bots/how-to/authentication/add-authentication?tabs=dotnet%2Cdotnet-sample
4.https://learn.microsoft.com/en-us/microsoftteams/platform/teams-ai-library/

[heyitsaamir]

You can configure multiple SSO connections just as you're doing now. You can then pass in connectionName when signing in and use that to get the user's token.

app.on('message', async ({ signin }) => {
  const token = await signin({ connectionName: 'my-connection-name'})
  if (token) {
    // Do something wiht token
  }
});

[NWH-SAmin5]

@sayali-MSFT Thank you for the guidance. I have gone through these documentation but will take a look at it again.

@heyitsaamir that's exactly I was looking for. I will test that

[NWH-SAmin5]

@heyitsaamir @sayali-MSFT I implemented this

const app = new App({
  ...credentialOptions,
  storage,
  oauth: {
    defaultConnectionName: "graph",
  }
});

app.message('signin', async ({ send, signin, isSignedIn }) => {
  if (isSignedIn) {
    send('you are already signed in!');
  } else {
    console.log("signing in")
    await signin();
  }
});

app.message('login', async ({ signin }) => {
  await signin({
    connectionName: "test-oauth2gen"
  });
});

app.event('signin', async ({ send, token }) => {
  await send(`Signed in using OAuth connection ${token.connectionName}. Please type **/whoami** to see your profile or **/signout** to sign out.`);
});

After I send "login" I get this sign in oauth card.

When I click "Sign In" button, it opens URL as per I have configured in my connection under Bot configuration
Please note: i do enter my correct username and password, this is just a mock up

After I complete my sign in, it will close and I get this error

I have tried const token = await signin as you suggested, but still not working.

[NWH-SAmin5]

@heyitsaamir @sayali-MSFT

added two more listener and it stops that error on the Sign In card, but i still do not have the token

it only hits signin.verify-state event not the signin.token-exchange or signin

const app = new App({
  ...credentialOptions,
  storage,
  oauth: {
    defaultConnectionName: "graph",
  }
});

app.message('signin', async ({ send, signin, isSignedIn }) => {
  if (isSignedIn) {
    send('you are already signed in!');
  } else {
    console.log("signing in")
    await signin();
  }
});

app.message('login', async ({ signin }) => {
  await signin({
    connectionName: "test-oauth2gen"
  });
});

app.event('signin', async ({ send, token }) => {
  await send(`Signed in using OAuth connection ${token.connectionName}. Please type **/whoami** to see your profile or **/signout** to sign out.`);
});

app.on('signin.verify-state', async ({ activity, userToken }) => {
  // Handle OAuth state verification
  console.log('OAuth state verification:', activity);
});

app.on('signin.token-exchange', async ({ activity, send }) => {
  // Handle successful OAuth token response
  console.log('OAuth token received:', activity);
  await send('Successfully signed in!');
});

what do you think I am missing?

[NWH-SAmin5]

@sayali-MSFT you link references suggests to implement OAuthCard Prompt from BotBuilder dialogs

This reference documentation show how to implement similar flow in Teams AI
https://learn.microsoft.com/en-us/microsoftteams/platform/teams-ai-library/typescript/migrations/botbuilder/user-authentication?tabs=botbuilder

I think i have same, but it does not work for my scenario, ONLY works for SSO

[aacebo]

@NWH-SAmin5 our signin method works like the OAuthPrompt in BF, have you tried adding your second connection as an Azure Active Directory v2 connection?

[NWH-SAmin5]

@aacebo Hi Alex, I tested your suggestion. Unable to retrieve the token. It shows warning, connection in the activity is not matching with default oauth connection. Not sure what that means. But its just a warning.

Can you please help me an example of app.ts code for handling standard SSO and other OAuth connection?

[ioannisntouvelos]

@aacebo Hi Alex, I tested your suggestion. Unable to retrieve the token. It shows warning, connection in the activity is not matching with default oauth connection. Not sure what that means. But its just a warning.

Can you please help me an example of app.ts code for handling standard SSO and other OAuth connection?

That would be really helpful. I am currently having issues with SSO and OAuth connections. An example would be great.

[NWH-SAmin5]

@ioannisntouvelos If it helps you, currently i have implemented using "OAuthPrompt" using botbuilder-dialogs

this requires backward implementation using BotBuilderPlugin https://microsoft.github.io/teams-sdk/typescript/migrations/botbuilder/integration

when we receive more modern way of implementing this, i will move my implementation to that.

[heyitsaamir]

@aacebo Hi Alex, I tested your suggestion. Unable to retrieve the token. It shows warning, connection in the activity is not matching with default oauth connection. Not sure what that means. But its just a warning.

Can you please help me an example of app.ts code for handling standard SSO and other OAuth connection?

Is your connection name set to graph? Do you have multiple connections set up?