Best way to connect to Graph from client-side Teams app

[svrooij]

If I read the documentation on connecting to Graph in combination with SSO in a Teams tab it says:

Get a token from teams, send token to backend, exchange token for graph token, request information from graph

Which seems like a reasonable approach (if your actually have a backend app). But is you have client side app, (React, Blazer WebAssembly, Angular,...) and you want to show data from graph you have three options:

1. Create an API that acts as a proxy to graph (and thus slowing the users' access to that data)
2. Create a backend endpoint where you exchange the token from Teams for a Graph token, send it back to the client and use that in the rest of your application.
3. Drop SSO and use a combination of MSAL2 and a popup like you would with any other third party identity platform.

This second option sounds like a solid option, if you ask me, but the documentation says:

As a best practice for security, always use the server-side code to make Microsoft Graph calls or other calls that require passing an access token. You must not return the OBO token to the client because it enables the client to make direct calls to Microsoft Graph. This helps protect the token from being intercepted or leaked.

Long introduction, short question:

What is the recommended and fastest way for a client side Teams Tab application to get data from Graph?

Related to that, the current authentication requires the implicit flow, wouldn't it make more sense for Teams SDK to utilize MSAL2 to just get the correct tokens client side and thus allowing direct access to Graph while still keeping the tokens (kind of safe). If you trigger the Teams popup with the MSAL redirect in it and with information you can get from Teams (like the Tenant ID and the username), and that user has already logged-in once, the popup will disappear immediately.

[Obelixx]

After reading, it fully ~5 times, this page was most helpful for me:
https://learn.microsoft.com/en-us/graph/sdks/choose-authentication-providers
I choose "Client credentials provider" for me, because I needed to access the graph from the bot and not from the user. But this requires setting permissions for the bot in azure. IMO, you need other flow - probably "Authorization code provider".

Good luck!

[svrooij]

@Obelixx the question was not totally clear about that, but I was asking this for a Teams Tab. You're totally right when I was talking about a bot.