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

4.2.3 • Public • Published

Microsoft Graph Toolkit TeamsFx Provider


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

The @microsoft/mgt-teamsfx-provider package exposes the TeamsFxProvider class which uses TeamsFx to sign in users and acquire tokens to use with Microsoft Graph.

To learn more about authentication providers, see Providers.


  1. Install the packages

    npm install @microsoft/mgt-element @microsoft/mgt-teamsfx-provider @microsoft/teamsfx
  2. Initialize the provider and login to get the required access token

    • Initialize the provider use TeamsUserCredential inside your component.

          // Import the providers and credential at the top of the page
          import {Providers} from '@microsoft/mgt-element';
          import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
          import {TeamsUserCredential, TeamsUserCredentialAuthConfig} from "@microsoft/teamsfx";
          const authConfig: TeamsUserCredentialAuthConfig = {
              clientId: process.env.REACT_APP_CLIENT_ID,
              initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
          const scope = ["User.Read"];
          const credential = new TeamsUserCredential(authConfig);
          const provider = new TeamsFxProvider(credential, scope);
          Providers.globalProvider = provider;
    • Use the credential.login(scopes) method to get the required access token.

          // Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
          await credential.login(this.scope);
  3. Now you can add any component in your HTML page or in your render() method when using React and it will use the TeamsFx context to access Microsoft Graph.

        <!-- Using HTML -->
        <mgt-person query="me" view="threelines"></mgt-person>
        // Using React
        public render(): void {
            return (
                    <Person personQuery="me" view="threelines"></Person>

For a sample that shows you how to initialize the TeamsFx provider, see the Contacts Exporter sample.

See also

Package Sidebar


npm i @microsoft/mgt-teamsfx-provider

Weekly Downloads






Unpacked Size

87.8 kB

Total Files


Last publish


  • microsoft-graph-toolkit
  • microsoft1es