@microsoft/teamsfx-react 2.0.1-alpha.e8170e1dc.0 → 2.0.1-rc.0

package/README.md

@@ -73,6 +73,27 @@ const { loading, error, data, reload } = useGraph(
   );
 ```
 
+> Note: `useGraph()` has been deprecated and will be removed in the future release. Please use `useGraphWithCredential()` instead as below:
+
+```ts
+const { loading, error, data, reload } = useGraphWithCredential(
+    async (graph, teamsUserCredential, scope) => {
+      // Call graph api directly to get user profile information
+      const profile = await graph.api("/me").get();
+
+      let photoUrl = "";
+      try {
+        const photo = await graph.api("/me/photo/$value").get();
+        photoUrl = URL.createObjectURL(photo);
+      } catch {
+        // Could not fetch photo from user's profile, return empty string as placeholder.
+      }
+      return { profile, photoUrl };
+    },
+    { scope: ["User.Read"] }
+  );
+```
+
 #### 2. Render Graph data with React
 
 You can bind the `reload` function with a button to refresh data on demand.
@@ -106,11 +127,19 @@ If you want to manually set the initial theme, please pass the config object to
 Initialize TeamsFx and Teams JS SDK, in a development environment, verbose logging message will be printed to console.
 It returns the TeamsFx instance as data.
 If you want to customize TeamsFx like customizing setting, please pass the config object to `useTeamsFx()`.
+> Note: `useTeamsFx()` has been deprecated and will be removed in the future release. Please use `useTeamsUserCredential()` instead as below:
+
+```ts
+const authConfig: TeamsUserCredentialAuthConfig = {
+  clientId: process.env.REACT_APP_CLIENT_ID,
+  initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
+}
+const { loading, theme, themeString, teamsUserCredential } = useTeamsUserCredential(authConfig);
+```
 
 ### useGraph
 This hook function leverage `useData` to call Graph API. It will execute the fetchGraphDataAsync function that the developer passes in first.
-If user has not consented to the scopes of AAD resources, `useGraph()` will automatically call `teamsfx.login()` to pop up the consent dialog.
-So, developers can focus on the business logic of how to fetch Microsoft Graph data.
+If user has not consented to the scopes of AAD resources, `useGraph()`, `useGraphWithCredential` will automatically call login function to pop up the consent dialog. So, developers can focus on the business logic of how to fetch Microsoft Graph data.
 
 ## Next steps
 

package/build/cjs/index.d.ts

@@ -1,5 +1,6 @@
 export { useTeams } from "./useTeams";
 export { useData } from "./useData";
 export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
-export { useGraph } from "./useGraph";
+export { useTeamsUserCredential, TeamsContextWithCredential } from "./useTeamsUserCredential";
+export { useGraph, useGraphWithCredential } from "./useGraph";
 //# sourceMappingURL=index.d.ts.map

package/build/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC"}

package/build/cjs/index.js

@@ -2,12 +2,15 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGraph = exports.useTeamsFx = exports.useData = exports.useTeams = void 0;
+exports.useGraphWithCredential = exports.useGraph = exports.useTeamsUserCredential = exports.useTeamsFx = exports.useData = exports.useTeams = void 0;
 var useTeams_1 = require("./useTeams");
 Object.defineProperty(exports, "useTeams", { enumerable: true, get: function () { return useTeams_1.useTeams; } });
 var useData_1 = require("./useData");
 Object.defineProperty(exports, "useData", { enumerable: true, get: function () { return useData_1.useData; } });
 var useTeamsFx_1 = require("./useTeamsFx");
 Object.defineProperty(exports, "useTeamsFx", { enumerable: true, get: function () { return useTeamsFx_1.useTeamsFx; } });
+var useTeamsUserCredential_1 = require("./useTeamsUserCredential");
+Object.defineProperty(exports, "useTeamsUserCredential", { enumerable: true, get: function () { return useTeamsUserCredential_1.useTeamsUserCredential; } });
 var useGraph_1 = require("./useGraph");
 Object.defineProperty(exports, "useGraph", { enumerable: true, get: function () { return useGraph_1.useGraph; } });
+Object.defineProperty(exports, "useGraphWithCredential", { enumerable: true, get: function () { return useGraph_1.useGraphWithCredential; } });

package/build/cjs/useGraph.d.ts

@@ -1,10 +1,14 @@
 import { Data } from "./useData";
-import { TeamsFx } from "@microsoft/teamsfx";
+import { TeamsFx, TeamsUserCredential, TeamsUserCredentialAuthConfig } from "@microsoft/teamsfx";
 import { Client } from "@microsoft/microsoft-graph-client";
 declare type GraphOption = {
     scope?: string[];
     teamsfx?: TeamsFx;
 };
+declare type GraphOptionWithAuthConfig = {
+    scope?: string[];
+    authConfig?: TeamsUserCredentialAuthConfig;
+};
 /**
  * Helper function to call Microsoft Graph API with authentication.
  *
@@ -15,5 +19,15 @@ declare type GraphOption = {
  * @beta
  */
 export declare function useGraph<T>(fetchGraphDataAsync: (graph: Client, teamsfx: TeamsFx, scope: string[]) => Promise<T>, options?: GraphOption): Data<T>;
+/**
+ * Helper function to call Microsoft Graph API with authentication.
+ *
+ * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
+ * @param options - Authentication configuration and OAuth resource scope.
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+export declare function useGraphWithCredential<T>(fetchGraphDataAsync: (graph: Client, credential: TeamsUserCredential, scope: string[]) => Promise<T>, options?: GraphOptionWithAuthConfig): Data<T>;
 export {};
 //# sourceMappingURL=useGraph.d.ts.map

package/build/cjs/useGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../../src/useGraph.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAW,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,OAAO,EAA6C,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,MAAM,EAAc,MAAM,mCAAmC,CAAC;AAGvE,aAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EACrF,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI,CAAC,CAAC,CAAC,CAkCT"}
+{"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../../src/useGraph.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAW,MAAM,WAAW,CAAC;AAC1C,OAAO,EACL,OAAO,EAGP,mBAAmB,EACnB,6BAA6B,EAE9B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAc,MAAM,mCAAmC,CAAC;AAGvE,aAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,aAAK,yBAAyB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,UAAU,CAAC,EAAE,6BAA6B,CAAC;CAC5C,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EACrF,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI,CAAC,CAAC,CAAC,CAkCT;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,mBAAmB,EAAE,CACnB,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,mBAAmB,EAC/B,KAAK,EAAE,MAAM,EAAE,KACZ,OAAO,CAAC,CAAC,CAAC,EACf,OAAO,CAAC,EAAE,yBAAyB,GAClC,IAAI,CAAC,CAAC,CAAC,CAmDT"}

package/build/cjs/useGraph.js

@@ -2,7 +2,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGraph = void 0;
+exports.useGraphWithCredential = exports.useGraph = void 0;
 var tslib_1 = require("tslib");
 var useData_1 = require("./useData");
 var teamsfx_1 = require("@microsoft/teamsfx");
@@ -70,3 +70,82 @@ function useGraph(fetchGraphDataAsync, options) {
     return { data: data, error: error, loading: loading, reload: reload };
 }
 exports.useGraph = useGraph;
+/**
+ * Helper function to call Microsoft Graph API with authentication.
+ *
+ * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
+ * @param options - Authentication configuration and OAuth resource scope.
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+function useGraphWithCredential(fetchGraphDataAsync, options) {
+    var _this = this;
+    var credential;
+    if (!(options === null || options === void 0 ? void 0 : options.authConfig)) {
+        var authConfig = {
+            clientId: process.env.REACT_APP_CLIENT_ID,
+            initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
+        };
+        credential = new teamsfx_1.TeamsUserCredential(authConfig);
+    }
+    else {
+        credential = new teamsfx_1.TeamsUserCredential(options.authConfig);
+    }
+    var scope;
+    if (!(options === null || options === void 0 ? void 0 : options.scope)) {
+        scope = ["User.Read"];
+    }
+    else {
+        scope = options.scope;
+    }
+    var _a = (0, react_1.useState)(false), needConsent = _a[0], setNeedConsent = _a[1];
+    var _b = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        var err_3, helpLink, graph, graphData, err_4;
+        var _a, _b;
+        return tslib_1.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (!needConsent) return [3 /*break*/, 4];
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, credential.login(scope)];
+                case 2:
+                    _c.sent();
+                    setNeedConsent(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_3 = _c.sent();
+                    if (err_3 instanceof teamsfx_1.ErrorWithCode && ((_a = err_3.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
+                        helpLink = "https://aka.ms/teamsfx-auth-code-flow";
+                        err_3.message +=
+                            '\nIf you see "AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application" ' +
+                                "in the popup window, you may be using unmatched version for TeamsFx SDK (version >= 0.5.0) and Teams Toolkit (version < 3.3.0) or " +
+                                "cli (version < 0.11.0). Please refer to the help link for how to fix the issue: ".concat(helpLink);
+                    }
+                    throw err_3;
+                case 4:
+                    _c.trys.push([4, 6, , 7]);
+                    graph = (0, teamsfx_1.createMicrosoftGraphClientWithCredential)(credential, scope);
+                    return [4 /*yield*/, fetchGraphDataAsync(graph, credential, scope)];
+                case 5:
+                    graphData = _c.sent();
+                    return [2 /*return*/, graphData];
+                case 6:
+                    err_4 = _c.sent();
+                    if (err_4 instanceof microsoft_graph_client_1.GraphError && ((_b = err_4.code) === null || _b === void 0 ? void 0 : _b.includes("UiRequiredError"))) {
+                        // Silently fail for user didn't consent error
+                        setNeedConsent(true);
+                    }
+                    else {
+                        throw err_4;
+                    }
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); }), data = _b.data, error = _b.error, loading = _b.loading, reload = _b.reload;
+    return { data: data, error: error, loading: loading, reload: reload };
+}
+exports.useGraphWithCredential = useGraphWithCredential;

package/build/cjs/useTeamsUserCredential.d.ts

@@ -0,0 +1,42 @@
+import { TeamsUserCredentialAuthConfig, TeamsUserCredential } from "@microsoft/teamsfx";
+import { ThemePrepared } from "@fluentui/react-northstar";
+export declare type TeamsContextWithCredential = {
+    /**
+     * Instance of TeamsUserCredential.
+     */
+    teamsUserCredential?: TeamsUserCredential;
+    /**
+     * Status of data loading.
+     */
+    loading: boolean;
+    /**
+     * Error information.
+     */
+    error: unknown;
+    /**
+     * Indicates that current environment is in Teams
+     */
+    inTeams?: boolean;
+    /**
+     * Teams theme.
+     */
+    theme: ThemePrepared;
+    /**
+     * Teams theme string.
+     */
+    themeString: string;
+    /**
+     * Teams context object.
+     */
+    context?: any;
+};
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param authConfig - custom configuration to override default ones.
+ * @returns TeamsContextWithCredential object
+ *
+ * @beta
+ */
+export declare function useTeamsUserCredential(authConfig: TeamsUserCredentialAuthConfig): TeamsContextWithCredential;
+//# sourceMappingURL=useTeamsUserCredential.d.ts.map

package/build/cjs/useTeamsUserCredential.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTeamsUserCredential.d.ts","sourceRoot":"","sources":["../../src/useTeamsUserCredential.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,6BAA6B,EAC7B,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG1D,oBAAY,0BAA0B,GAAG;IACvC;;OAEG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IAEH,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,6BAA6B,GACxC,0BAA0B,CAY5B"}

package/build/cjs/useTeamsUserCredential.js

@@ -0,0 +1,34 @@
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTeamsUserCredential = void 0;
+var tslib_1 = require("tslib");
+var teamsfx_1 = require("@microsoft/teamsfx");
+var useTeams_1 = require("./useTeams");
+var useData_1 = require("./useData");
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param authConfig - custom configuration to override default ones.
+ * @returns TeamsContextWithCredential object
+ *
+ * @beta
+ */
+function useTeamsUserCredential(authConfig) {
+    var _this = this;
+    var result = (0, useTeams_1.useTeams)({})[0];
+    var _a = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            if (process.env.NODE_ENV === "development") {
+                (0, teamsfx_1.setLogLevel)(teamsfx_1.LogLevel.Verbose);
+                (0, teamsfx_1.setLogFunction)(function (level, message) {
+                    console.log(message);
+                });
+            }
+            return [2 /*return*/, new teamsfx_1.TeamsUserCredential(authConfig)];
+        });
+    }); }), data = _a.data, error = _a.error, loading = _a.loading;
+    return tslib_1.__assign({ teamsUserCredential: data, error: error, loading: loading }, result);
+}
+exports.useTeamsUserCredential = useTeamsUserCredential;

package/build/esm/index.d.ts

@@ -1,5 +1,6 @@
 export { useTeams } from "./useTeams";
 export { useData } from "./useData";
 export { useTeamsFx, TeamsFxContext } from "./useTeamsFx";
-export { useGraph } from "./useGraph";
+export { useTeamsUserCredential, TeamsContextWithCredential } from "./useTeamsUserCredential";
+export { useGraph, useGraphWithCredential } from "./useGraph";
 //# sourceMappingURL=index.d.ts.map

package/build/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC"}

package/build/esm/index.js

@@ -3,4 +3,5 @@
 export { useTeams } from "./useTeams";
 export { useData } from "./useData";
 export { useTeamsFx } from "./useTeamsFx";
-export { useGraph } from "./useGraph";
+export { useTeamsUserCredential } from "./useTeamsUserCredential";
+export { useGraph, useGraphWithCredential } from "./useGraph";

package/build/esm/useGraph.d.ts

@@ -1,10 +1,14 @@
 import { Data } from "./useData";
-import { TeamsFx } from "@microsoft/teamsfx";
+import { TeamsFx, TeamsUserCredential, TeamsUserCredentialAuthConfig } from "@microsoft/teamsfx";
 import { Client } from "@microsoft/microsoft-graph-client";
 declare type GraphOption = {
     scope?: string[];
     teamsfx?: TeamsFx;
 };
+declare type GraphOptionWithAuthConfig = {
+    scope?: string[];
+    authConfig?: TeamsUserCredentialAuthConfig;
+};
 /**
  * Helper function to call Microsoft Graph API with authentication.
  *
@@ -15,5 +19,15 @@ declare type GraphOption = {
  * @beta
  */
 export declare function useGraph<T>(fetchGraphDataAsync: (graph: Client, teamsfx: TeamsFx, scope: string[]) => Promise<T>, options?: GraphOption): Data<T>;
+/**
+ * Helper function to call Microsoft Graph API with authentication.
+ *
+ * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
+ * @param options - Authentication configuration and OAuth resource scope.
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+export declare function useGraphWithCredential<T>(fetchGraphDataAsync: (graph: Client, credential: TeamsUserCredential, scope: string[]) => Promise<T>, options?: GraphOptionWithAuthConfig): Data<T>;
 export {};
 //# sourceMappingURL=useGraph.d.ts.map

package/build/esm/useGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../../src/useGraph.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAW,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,OAAO,EAA6C,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,MAAM,EAAc,MAAM,mCAAmC,CAAC;AAGvE,aAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EACrF,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI,CAAC,CAAC,CAAC,CAkCT"}
+{"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../../src/useGraph.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAW,MAAM,WAAW,CAAC;AAC1C,OAAO,EACL,OAAO,EAGP,mBAAmB,EACnB,6BAA6B,EAE9B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAc,MAAM,mCAAmC,CAAC;AAGvE,aAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,aAAK,yBAAyB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,UAAU,CAAC,EAAE,6BAA6B,CAAC;CAC5C,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EACrF,OAAO,CAAC,EAAE,WAAW,GACpB,IAAI,CAAC,CAAC,CAAC,CAkCT;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,mBAAmB,EAAE,CACnB,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,mBAAmB,EAC/B,KAAK,EAAE,MAAM,EAAE,KACZ,OAAO,CAAC,CAAC,CAAC,EACf,OAAO,CAAC,EAAE,yBAAyB,GAClC,IAAI,CAAC,CAAC,CAAC,CAmDT"}

package/build/esm/useGraph.js

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 import { __assign, __awaiter, __generator } from "tslib";
 import { useData } from "./useData";
-import { TeamsFx, createMicrosoftGraphClient, ErrorWithCode } from "@microsoft/teamsfx";
+import { TeamsFx, createMicrosoftGraphClient, ErrorWithCode, TeamsUserCredential, createMicrosoftGraphClientWithCredential, } from "@microsoft/teamsfx";
 import { GraphError } from "@microsoft/microsoft-graph-client";
 import { useState } from "react";
 /**
@@ -66,3 +66,81 @@ export function useGraph(fetchGraphDataAsync, options) {
     }); }), data = _c.data, error = _c.error, loading = _c.loading, reload = _c.reload;
     return { data: data, error: error, loading: loading, reload: reload };
 }
+/**
+ * Helper function to call Microsoft Graph API with authentication.
+ *
+ * @param fetchGraphDataAsync - async function of how to call Graph API and fetch data.
+ * @param options - Authentication configuration and OAuth resource scope.
+ * @returns data, loading status, error and reload function
+ *
+ * @beta
+ */
+export function useGraphWithCredential(fetchGraphDataAsync, options) {
+    var _this = this;
+    var credential;
+    if (!(options === null || options === void 0 ? void 0 : options.authConfig)) {
+        var authConfig = {
+            clientId: process.env.REACT_APP_CLIENT_ID,
+            initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
+        };
+        credential = new TeamsUserCredential(authConfig);
+    }
+    else {
+        credential = new TeamsUserCredential(options.authConfig);
+    }
+    var scope;
+    if (!(options === null || options === void 0 ? void 0 : options.scope)) {
+        scope = ["User.Read"];
+    }
+    else {
+        scope = options.scope;
+    }
+    var _a = useState(false), needConsent = _a[0], setNeedConsent = _a[1];
+    var _b = useData(function () { return __awaiter(_this, void 0, void 0, function () {
+        var err_3, helpLink, graph, graphData, err_4;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (!needConsent) return [3 /*break*/, 4];
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, credential.login(scope)];
+                case 2:
+                    _c.sent();
+                    setNeedConsent(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_3 = _c.sent();
+                    if (err_3 instanceof ErrorWithCode && ((_a = err_3.message) === null || _a === void 0 ? void 0 : _a.includes("CancelledByUser"))) {
+                        helpLink = "https://aka.ms/teamsfx-auth-code-flow";
+                        err_3.message +=
+                            '\nIf you see "AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application" ' +
+                                "in the popup window, you may be using unmatched version for TeamsFx SDK (version >= 0.5.0) and Teams Toolkit (version < 3.3.0) or " +
+                                "cli (version < 0.11.0). Please refer to the help link for how to fix the issue: ".concat(helpLink);
+                    }
+                    throw err_3;
+                case 4:
+                    _c.trys.push([4, 6, , 7]);
+                    graph = createMicrosoftGraphClientWithCredential(credential, scope);
+                    return [4 /*yield*/, fetchGraphDataAsync(graph, credential, scope)];
+                case 5:
+                    graphData = _c.sent();
+                    return [2 /*return*/, graphData];
+                case 6:
+                    err_4 = _c.sent();
+                    if (err_4 instanceof GraphError && ((_b = err_4.code) === null || _b === void 0 ? void 0 : _b.includes("UiRequiredError"))) {
+                        // Silently fail for user didn't consent error
+                        setNeedConsent(true);
+                    }
+                    else {
+                        throw err_4;
+                    }
+                    return [3 /*break*/, 7];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); }), data = _b.data, error = _b.error, loading = _b.loading, reload = _b.reload;
+    return { data: data, error: error, loading: loading, reload: reload };
+}

package/build/esm/useTeamsUserCredential.d.ts

@@ -0,0 +1,42 @@
+import { TeamsUserCredentialAuthConfig, TeamsUserCredential } from "@microsoft/teamsfx";
+import { ThemePrepared } from "@fluentui/react-northstar";
+export declare type TeamsContextWithCredential = {
+    /**
+     * Instance of TeamsUserCredential.
+     */
+    teamsUserCredential?: TeamsUserCredential;
+    /**
+     * Status of data loading.
+     */
+    loading: boolean;
+    /**
+     * Error information.
+     */
+    error: unknown;
+    /**
+     * Indicates that current environment is in Teams
+     */
+    inTeams?: boolean;
+    /**
+     * Teams theme.
+     */
+    theme: ThemePrepared;
+    /**
+     * Teams theme string.
+     */
+    themeString: string;
+    /**
+     * Teams context object.
+     */
+    context?: any;
+};
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param authConfig - custom configuration to override default ones.
+ * @returns TeamsContextWithCredential object
+ *
+ * @beta
+ */
+export declare function useTeamsUserCredential(authConfig: TeamsUserCredentialAuthConfig): TeamsContextWithCredential;
+//# sourceMappingURL=useTeamsUserCredential.d.ts.map

package/build/esm/useTeamsUserCredential.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTeamsUserCredential.d.ts","sourceRoot":"","sources":["../../src/useTeamsUserCredential.ts"],"names":[],"mappings":"AAGA,OAAO,EAIL,6BAA6B,EAC7B,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG1D,oBAAY,0BAA0B,GAAG;IACvC;;OAEG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IAEH,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,6BAA6B,GACxC,0BAA0B,CAY5B"}

package/build/esm/useTeamsUserCredential.js

@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { __assign, __awaiter, __generator } from "tslib";
+import { LogLevel, setLogLevel, setLogFunction, TeamsUserCredential, } from "@microsoft/teamsfx";
+import { useTeams } from "./useTeams";
+import { useData } from "./useData";
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param authConfig - custom configuration to override default ones.
+ * @returns TeamsContextWithCredential object
+ *
+ * @beta
+ */
+export function useTeamsUserCredential(authConfig) {
+    var _this = this;
+    var result = useTeams({})[0];
+    var _a = useData(function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            if (process.env.NODE_ENV === "development") {
+                setLogLevel(LogLevel.Verbose);
+                setLogFunction(function (level, message) {
+                    console.log(message);
+                });
+            }
+            return [2 /*return*/, new TeamsUserCredential(authConfig)];
+        });
+    }); }), data = _a.data, error = _a.error, loading = _a.loading;
+    return __assign({ teamsUserCredential: data, error: error, loading: loading }, result);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/teamsfx-react",
-  "version": "2.0.1-alpha.e8170e1dc.0",
+  "version": "2.0.1-rc.0",
   "description": "React helper functions for Microsoft TeamsFx",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.js",
@@ -32,7 +32,7 @@
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@microsoft/microsoft-graph-client": "^3.0.1",
     "@microsoft/teams-js": "^2.0.0",
-    "@microsoft/teamsfx": "2.0.1-alpha.e8170e1dc.0",
+    "@microsoft/teamsfx": "^2.0.1-rc.0",
     "@testing-library/react": "^12.1.1",
     "@testing-library/react-hooks": "^7.0.2",
     "@types/enzyme": "^3.10.10",
@@ -72,7 +72,7 @@
     "@fluentui/react-northstar": "^0.62.0",
     "@microsoft/microsoft-graph-client": "^3.0.1",
     "@microsoft/teams-js": "^2.0.0",
-    "@microsoft/teamsfx": "^2.0.0",
+    "@microsoft/teamsfx": ">2.0.0-alpha",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
@@ -84,5 +84,5 @@
       "npx eslint --cache --fix --quiet"
     ]
   },
-  "gitHead": "57481079720df3a9b5a0d8e44a3258775a15e462"
+  "gitHead": "e24cd78ce4f871c771845a1d2c9022a06ad82c3f"
 }