Understanding the Teams MSAL2 Provider in Microsoft Graph Toolkit

This article is a repost of an entry I published on Hatena Blog on November 25, 2021.

Microsoft Graph Toolkit includes several providers, some of which are optimized for scenarios like SharePoint and Microsoft Teams. However, the provider for Microsoft Teams did not support single sign-on (SSO) and, to be honest, was not sufficient. Recently, a "Teams MSAL2 Provider" was introduced, which seems to support SSO. However, regarding the critical part of token exchange, the documentation simply said "see the sample code," but there was no information at the destination link. Therefore, I checked the code myself.

https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/922affc7253550cdc5966629069b77f039565e1b/packages/providers/mgt-teams-msal2-provider/src/TeamsMsal2Provider.ts

Extracting the token exchange part, it looks like this:

response = await fetch(url.href, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    authorization: `Bearer ${clientToken}`
  },
  body: JSON.stringify({
    scopes: scopes,
    clientid: this.clientId
  }),
  mode: 'cors',
  cache: 'default'
});

const data = await response.json().catch(this.unhandledFetchError);

...

return data.access_token;

It is a custom implementation and does not seem to be integrated with TeamsFx's SimpleAuth.

https://github.com/OfficeDev/TeamsFx/tree/ga/packages/simpleauth

I felt that this area needed to be properly addressed in the future, and it turns out that an issue and a pull request have already been opened. Since it is included in the next/teamsfx branch, it will likely be released in the near future.

https://github.com/microsoftgraph/microsoft-graph-toolkit/tree/a19718867b0ff15a72b0491257720d3928bb878f/packages/providers/mgt-teamsfx-provider

Things are going to get much more convenient moving forward.