Announcing a new Microsoft Teams authentication provider and file upload feature in the Microsoft Graph Toolkit

Elise Yang

Today, thanks to the support and contributions of the community, we are excited to share another new release of the Microsoft Graph Toolkit, version 2.3. This release includes a new Microsoft Teams authentication provider, file upload support in the File List component, and several feature updates and bug fixes!  

As a recap, the Microsoft Graph Toolkit is a collection of functional UI components and authentication providers that makes your integration with Microsoft Graph as easy as writing two lines of code. If you’re not familiar with the Toolkit yet, learn more by reading our documentation, visiting our component playground, or following the Microsoft Graph Toolkit Learn Path. 

Updating your application 

To take advantage of the new features, you’ll need to update your application to use the newest version of the Microsoft Graph Toolkit. If you’re using the Toolkit via npm, go to your project directory and run: 

Npm i @microsoft/mgt@latest

If you’re using the Toolkit via unpkg, your application will automatically be updated to the newest version. 

What’s New 

Microsoft Teams authentication provider with support for single sign-on (SSO)

Version 2.3 includes a brand new Provider, TeamsMsal2Provider, for authentication in Microsoft Teams applications. Built on top of msal-browser and the more secure Authorization Code Flow with PKCE, this new provider supports both single-sign on and interactive login in your Microsoft Teams tab applications.

What’s the difference between the TeamsProvider and TeamsMsal2Provider? 

The TeamsProvider, built on top of msal.js, uses the implicit grant flow and only supports authentication through interactive client-side login. The new TeamsMsal2Provider, built on top of msal-browser, implements the OAuth 2.0 Authorization code flow with PKCE, which is more secure. Additionally, the TeamsMsal2Provider now supports single sign-on in addition to interactive login.

Why should I migrate? 

Authorization Code Flow is more secure for web applications than the implicit grant flow used in our original Teams Provider, and we recommend using the TeamsMsal2Provider going forward. 

Previously, our original Teams Provider only provided support for interactive login. With the new provider, you are able to leverage Single Sign-On in your Teams application, which means if a user consents to use your app, they do not have to consent again on another device as they are signed in automatically.   

Please note, for SSO, you will need to implement a backend that enables exchanging the Microsoft Teams authentication token with a token that can be used to call Microsoft Graph via the on-behalf-of flow. Take a look at our Node SSO Sample for a reference implementation of the backend service, and for an end-to-end example of enabling Single Sign-On with the Microsoft Graph Toolkit in your Microsoft Teams apps.  

Will you continue supporting the existing TeamsProvider? 

Yes, as long as msal.js is supported, we will continue supporting the original Teams Provider. However, we do not plan to add any additional features and any new feature development will go in the new TeamsMsal2Provider. 

How do I migrate or get started developing with the new provider? 

Check out our Teams MSAL2 Provider documentation for migration instructions, and our step-by step Build a Microsoft Teams Tab (interactive login) or Build a Microsoft Teams SSO Tab guides to get started with developing an application.

File upload functionality in the File List component 

We’ve updated our File List component to support the uploading of files by users. Now, you can display a list of files and/or folders from One Drive or SharePoint and allow users to upload items from their device to that location with a single attribute. 

Below is an example that shows a signed-in user uploading files to their root drive: 

Elise Yang

Follow