@microsoft/teamsfx-react 2.0.0-alpha.c10b77e4b.0 → 2.0.0-alpha.e033ec4f2.0

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.0-alpha.c10b77e4b.0",
+  "version": "2.0.0-alpha.e033ec4f2.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.0-alpha.c10b77e4b.0",
+    "@microsoft/teamsfx": "^2.0.0-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": "51d26cf18818152e30caa99a2689a8cc50250382"
+  "gitHead": "f585dfeffb10c9351c025ed891a6fe308cd566e1"
 }