TypeScript icon, indicating that this package has built-in type declarations

2.11.2 • Public • Published

Microsoft Graph Toolkit Microsoft Teams Provider


⚠️⚠️⚠️ This package is no longer receiving new features and will only receive critical bug and security fixes. All new applications should use @microsoft/mgt-teamsfx-provider instead. ⚠️⚠️⚠️

The @microsoft/mgt-teams-provider package exposes the TeamsProvider class to be used inside your Microsoft Teams tab applications to authenticate users, to call Microsoft Graph, and to power the mgt components. The provider is built on top of msal.js and supports interactive authentication on the client via the Implicit Grant flow.

For Single Sing-On (SSO) support or interactive authentication based on the more secure OAuth 2.0 Authorization Code Flow with PKCE, please use the @microsoft/mgt-teams-msal2-provider instead.

The Microsoft Graph Toolkit (mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.

See docs for full documentation of the TeamsProvider


The TeamsProvider requires the usage of the Microsoft Teams SDK which is not automatically installed.

  1. Install the packages

    npm install @microsoft/teams-js @microsoft/mgt-element @microsoft/mgt-teams-provider
  2. Before initializing the provider, create a new page in your application (ex: https://mydomain.com/auth) that will handle the auth redirect. Call the handleAuth function to handle all authentication on your behalf.

    import * as MicrosoftTeams from "@microsoft/teams-js/dist/MicrosoftTeams";
    import {TeamsProvider} from '@microsoft/mgt-teams-provider';
    TeamsProvider.microsoftTeamsLib = MicrosoftTeams;
  3. Initialize the provider in your main code (not on your auth page)

    import {Providers} from '@microsoft/mgt-element';
    import {TeamsProvider} from '@microsoft/mgt-teams-provider';
    import * as MicrosoftTeams from "@microsoft/teams-js/dist/MicrosoftTeams";
    TeamsProvider.microsoftTeamsLib = MicrosoftTeams;
    Providers.globalProvider = new TeamsProvider({
      clientId: string;
      authPopupUrl: string; // ex: "https://mydomain.com/auth" or "/auth"
      scopes?: string[];
      msalOptions?: Configuration;
  4. Alternatively, initialize the provider in html (only client-id and auth-popup-url is required):

    <script type="module" src="../node_modules/@microsoft/mgt-teams-provider/dist/es6/index.js" />
    <mgt-teams-provider client-id="<YOUR_CLIENT_ID>"

See provider usage documentation to learn about how to use the providers with the mgt components, to sign in/sign out, get access tokens, call Microsoft Graph, and more.

Sea also

Package Sidebar


npm i @microsoft/mgt-teams-provider

Weekly Downloads






Unpacked Size

139 kB

Total Files


Last publish


  • microsoft1es
  • microsoft-graph-toolkit