feat: allow TeamsfxProvider to be constructed with TeamssUerCredential (#1954)

* [teamsfx-provider] Allow use TeamsUserCredential to construct instance

* Update README.md

Co-authored-by: turenlong <[email protected]>
Co-authored-by: Gavin Barron <[email protected]>

Author: SLdragon

packages/providers/mgt-teamsfx-provider/README.md

@@ -16,29 +16,61 @@ To learn more about authentication providers, see [Providers](./providers.md).
     npm install @microsoft/mgt-element @microsoft/mgt-teamsfx-provider @microsoft/teamsfx
     ```
 
-1. Initialize the provider inside your component.
-
-    ```ts
-    // 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} from "@microsoft/teamsfx";
-
-    const scope = ["User.Read"];
-    const teamsfx = new TeamsFx();
-    const provider = new TeamsFxProvider(teamsfx, scope);
-    Providers.globalProvider = provider;
-    ```
-
-1. Use the `teamsfx.login(scopes)` method to get the required access token.
-
-    ```ts
-    // Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
-    await teamsfx.login(this.scope);
-    Providers.globalProvider.setState(ProviderState.SignedIn);
-    ```
-
-    1. 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.
+1. Initialize the provider and login to get the required access token
+
+    ### Use TeamsUserCredential (Recommended)
+
+    1. Initialize the provider inside your component.
+        ```ts
+            // 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;
+        ```
+    1. Use the `credential.login(scopes)` method to get the required access token.
+
+        ```ts
+            // Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
+            await credential.login(this.scope);
+            Providers.globalProvider.setState(ProviderState.SignedIn);
+        ```
+
+    ### Use TeamsFx class
+    > Note: TeamsFx class will be deprecated and removed from future release of TeamsFx SDK, and it is recommended to use `TeamsUserCredential` instead
+
+    1. Initialize the provider inside your component.
+
+        ```ts
+            // 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} from "@microsoft/teamsfx";
+
+            const scope = ["User.Read"];
+            const teamsfx = new TeamsFx();
+            const provider = new TeamsFxProvider(teamsfx, scope);
+            Providers.globalProvider = provider;
+        ```
+
+    1. Use the `teamsfx.login(scopes)` method to get the required access token.
+
+        ```ts
+            // Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
+            await teamsfx.login(this.scope);
+            Providers.globalProvider.setState(ProviderState.SignedIn);
+        ```
+
+1. 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.
 
     ```html
     <!-- Using HTML -->

packages/providers/mgt-teamsfx-provider/src/TeamsFxProvider.ts

@@ -6,7 +6,7 @@
  */
 
 import { IProvider, ProviderState, createFromProvider } from '@microsoft/mgt-element';
-import { TeamsFx } from '@microsoft/teamsfx';
+import { TeamsFx, TeamsUserCredential } from '@microsoft/teamsfx';
 
 /**
  * TeamsFx Provider handler
@@ -27,7 +27,7 @@ export class TeamsFxProvider extends IProvider {
   }
 
   /**
-   * returns teamsfx instance
+   * returns teamsfx instance, if you construct TeamsFxProvider with TeamsUserCredential, this value should be null
    *
    * @readonly
    * @memberof TeamsFxProvider
@@ -46,6 +46,14 @@ export class TeamsFxProvider extends IProvider {
    */
   private scopes: string | string[] = [];
 
+  /**
+   * TeamsUserCredential instance
+   *
+   * @type {TeamsFx}
+   * @memberof TeamsFxProvider
+   */
+  private readonly _credential: TeamsUserCredential;
+
   /**
    * TeamsFx instance
    *
@@ -62,11 +70,19 @@ export class TeamsFxProvider extends IProvider {
    */
   private _accessToken: string = '';
 
-  constructor(teamsfx: TeamsFx, scopes: string | string[]) {
+  constructor(teamsfx: TeamsFx, scopes: string | string[]);
+  constructor(teamsUserCredential: TeamsUserCredential, scopes: string | string[]);
+  constructor(authConfig: TeamsFx | TeamsUserCredential, scopes: string | string[]) {
     super();
 
-    if (!this._teamsfx) {
-      this._teamsfx = teamsfx;
+    if (!this._teamsfx && !this._credential) {
+      if ((authConfig as TeamsFx).getCredential) {
+        this._teamsfx = authConfig as TeamsFx;
+        this._credential = null;
+      } else {
+        this._credential = authConfig as TeamsUserCredential;
+        this._teamsfx = null;
+      }
     }
 
     this.validateScopesType(scopes);
@@ -90,7 +106,12 @@ export class TeamsFxProvider extends IProvider {
    */
   public async getAccessToken(): Promise<string> {
     try {
-      const accessToken = await this.teamsfx.getCredential().getToken(this.scopes);
+      let accessToken;
+      if (this._teamsfx) {
+        accessToken = await this._teamsfx.getCredential().getToken(this.scopes);
+      } else {
+        accessToken = await this._credential.getToken(this.scopes);
+      }
       this._accessToken = accessToken ? accessToken.token : '';
       if (!this._accessToken) {
         throw new Error('Access token is null');
@@ -113,7 +134,11 @@ export class TeamsFxProvider extends IProvider {
     const token: string = await this.getAccessToken();
 
     if (!token) {
-      await this.teamsfx.login(this.scopes);
+      if (this._teamsfx) {
+        await this._teamsfx.login(this.scopes);
+      } else {
+        await this._credential.login(this.scopes);
+      }
     }
 
     this._accessToken = token ?? (await this.getAccessToken());