@logto/react 0.1.2 → 0.1.3

package/lib/context.d.ts

@@ -2,7 +2,9 @@
 import LogtoClient from '@logto/browser';
 export declare type LogtoContextProps = {
     logtoClient?: LogtoClient;
+    isAuthenticated: boolean;
     loadingCount: number;
+    setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>;
     setLoadingCount: React.Dispatch<React.SetStateAction<number>>;
 };
 export declare const throwContextError: () => never;

package/lib/context.js

@@ -8,6 +8,8 @@ const throwContextError = () => {
 exports.throwContextError = throwContextError;
 exports.LogtoContext = (0, react_1.createContext)({
     logtoClient: undefined,
+    isAuthenticated: false,
     loadingCount: 0,
+    setIsAuthenticated: exports.throwContextError,
     setLoadingCount: exports.throwContextError,
 });

package/lib/hooks/index.d.ts

@@ -9,5 +9,6 @@ declare type Logto = {
     signIn: (redirectUri: string) => Promise<void>;
     signOut: (postLogoutRedirectUri: string) => Promise<void>;
 };
-export default function useLogto(): Logto;
-export {};
+declare const useHandleSignInCallback: () => void;
+declare const useLogto: () => Logto;
+export { useLogto, useHandleSignInCallback };

package/lib/hooks/index.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHandleSignInCallback = exports.useLogto = void 0;
 const react_1 = require("react");
 const context_1 = require("../context");
-function useLogto() {
-    const { logtoClient, loadingCount, setLoadingCount } = (0, react_1.useContext)(context_1.LogtoContext);
-    const [isAuthenticated, setIsAuthenticated] = (0, react_1.useState)(logtoClient?.isAuthenticated ?? false);
-    const isLoading = loadingCount > 0;
+const useLoadingState = () => {
+    const { setLoadingCount } = (0, react_1.useContext)(context_1.LogtoContext);
     const setLoadingState = (0, react_1.useCallback)((state) => {
         if (state) {
             setLoadingCount((count) => count + 1);
@@ -14,22 +13,38 @@ function useLogto() {
             setLoadingCount((count) => Math.max(0, count - 1));
         }
     }, [setLoadingCount]);
-    const signIn = (0, react_1.useCallback)(async (redirectUri) => {
+    return setLoadingState;
+};
+const useHandleSignInCallback = () => {
+    const { logtoClient, isAuthenticated, setIsAuthenticated } = (0, react_1.useContext)(context_1.LogtoContext);
+    const setLoadingState = useLoadingState();
+    const handleSignInCallback = (0, react_1.useCallback)(async (callbackUri) => {
         if (!logtoClient) {
             return (0, context_1.throwContextError)();
         }
         setLoadingState(true);
-        await logtoClient.signIn(redirectUri);
+        await logtoClient.handleSignInCallback(callbackUri);
         setLoadingState(false);
-    }, [logtoClient, setLoadingState]);
-    const handleSignInCallback = (0, react_1.useCallback)(async (callbackUri) => {
+        setIsAuthenticated(true);
+    }, [logtoClient, setIsAuthenticated, setLoadingState]);
+    (0, react_1.useEffect)(() => {
+        if (!isAuthenticated && logtoClient?.isSignInRedirected(window.location.href)) {
+            void handleSignInCallback(window.location.href);
+        }
+    }, [handleSignInCallback, isAuthenticated, logtoClient]);
+};
+exports.useHandleSignInCallback = useHandleSignInCallback;
+const useLogto = () => {
+    const { logtoClient, loadingCount, isAuthenticated, setIsAuthenticated } = (0, react_1.useContext)(context_1.LogtoContext);
+    const setLoadingState = useLoadingState();
+    const isLoading = loadingCount > 0;
+    const signIn = (0, react_1.useCallback)(async (redirectUri) => {
         if (!logtoClient) {
             return (0, context_1.throwContextError)();
         }
         setLoadingState(true);
-        await logtoClient.handleSignInCallback(callbackUri);
+        await logtoClient.signIn(redirectUri);
         setLoadingState(false);
-        setIsAuthenticated(true);
     }, [logtoClient, setLoadingState]);
     const signOut = (0, react_1.useCallback)(async (postLogoutRedirectUri) => {
         if (!logtoClient) {
@@ -39,7 +54,7 @@ function useLogto() {
         await logtoClient.signOut(postLogoutRedirectUri);
         setLoadingState(false);
         setIsAuthenticated(false);
-    }, [logtoClient, setLoadingState]);
+    }, [logtoClient, setIsAuthenticated, setLoadingState]);
     const fetchUserInfo = (0, react_1.useCallback)(async () => {
         if (!logtoClient) {
             return (0, context_1.throwContextError)();
@@ -49,12 +64,12 @@ function useLogto() {
         setLoadingState(false);
         return userInfo;
     }, [logtoClient, setLoadingState]);
-    const getAccessToken = (0, react_1.useCallback)(async () => {
+    const getAccessToken = (0, react_1.useCallback)(async (resource) => {
         if (!logtoClient) {
             return (0, context_1.throwContextError)();
         }
         setLoadingState(true);
-        const accessToken = await logtoClient.getAccessToken();
+        const accessToken = await logtoClient.getAccessToken(resource);
         setLoadingState(false);
         return accessToken;
     }, [logtoClient, setLoadingState]);
@@ -64,11 +79,6 @@ function useLogto() {
         }
         return logtoClient.getIdTokenClaims();
     }, [logtoClient]);
-    (0, react_1.useEffect)(() => {
-        if (!isAuthenticated && logtoClient?.isSignInRedirected(window.location.href)) {
-            void handleSignInCallback(window.location.href);
-        }
-    }, [handleSignInCallback, isAuthenticated, logtoClient]);
     if (!logtoClient) {
         return (0, context_1.throwContextError)();
     }
@@ -81,5 +91,5 @@ function useLogto() {
         getAccessToken,
         getIdTokenClaims,
     };
-}
-exports.default = useLogto;
+};
+exports.useLogto = useLogto;

package/lib/index.d.ts

@@ -1,4 +1,4 @@
 export type { LogtoContextProps } from './context';
-export type { IdTokenClaims, UserInfoResponse } from '@logto/browser';
+export type { LogtoConfig, IdTokenClaims, UserInfoResponse } from '@logto/browser';
 export * from './provider';
-export { default as useLogto } from './hooks';
+export { useLogto, useHandleSignInCallback } from './hooks';

package/lib/index.js

@@ -13,11 +13,9 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLogto = void 0;
+exports.useHandleSignInCallback = exports.useLogto = void 0;
 __exportStar(require("./provider"), exports);
 var hooks_1 = require("./hooks");
-Object.defineProperty(exports, "useLogto", { enumerable: true, get: function () { return __importDefault(hooks_1).default; } });
+Object.defineProperty(exports, "useLogto", { enumerable: true, get: function () { return hooks_1.useLogto; } });
+Object.defineProperty(exports, "useHandleSignInCallback", { enumerable: true, get: function () { return hooks_1.useHandleSignInCallback; } });

package/lib/provider.d.ts

@@ -1,7 +1,7 @@
 import { LogtoConfig } from '@logto/browser';
-import React from 'react';
+import { ReactNode } from 'react';
 export declare type LogtoProviderProps = {
-    logtoConfig: LogtoConfig;
-    children?: React.ReactNode;
+    config: LogtoConfig;
+    children?: ReactNode;
 };
-export declare const LogtoProvider: ({ logtoConfig, children }: LogtoProviderProps) => JSX.Element;
+export declare const LogtoProvider: ({ config, children }: LogtoProviderProps) => JSX.Element;

package/lib/provider.js

@@ -30,14 +30,17 @@ exports.LogtoProvider = void 0;
 const browser_1 = __importDefault(require("@logto/browser"));
 const react_1 = __importStar(require("react"));
 const context_1 = require("./context");
-const LogtoProvider = ({ logtoConfig, children }) => {
+const LogtoProvider = ({ config, children }) => {
     const [loadingCount, setLoadingCount] = (0, react_1.useState)(0);
-    const memorizedLogtoClient = (0, react_1.useMemo)(() => ({ logtoClient: new browser_1.default(logtoConfig) }), [logtoConfig]);
+    const memorizedLogtoClient = (0, react_1.useMemo)(() => ({ logtoClient: new browser_1.default(config) }), [config]);
+    const [isAuthenticated, setIsAuthenticated] = (0, react_1.useState)(memorizedLogtoClient.logtoClient.isAuthenticated);
     const memorizedContextValue = (0, react_1.useMemo)(() => ({
         ...memorizedLogtoClient,
+        isAuthenticated,
+        setIsAuthenticated,
         loadingCount,
         setLoadingCount,
-    }), [memorizedLogtoClient, loadingCount]);
+    }), [memorizedLogtoClient, isAuthenticated, loadingCount]);
     return react_1.default.createElement(context_1.LogtoContext.Provider, { value: memorizedContextValue }, children);
 };
 exports.LogtoProvider = LogtoProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logto/react",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "./lib/index.js",
   "exports": "./lib/index.js",
   "typings": "./lib/index.d.ts",
@@ -8,6 +8,11 @@
     "lib"
   ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/logto-io/js.git",
+    "directory": "packages/react"
+  },
   "scripts": {
     "dev:tsc": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
     "preinstall": "npx only-allow pnpm",
@@ -19,7 +24,7 @@
     "prepack": "pnpm test && pnpm build"
   },
   "dependencies": {
-    "@logto/browser": "^0.1.2",
+    "@logto/browser": "^0.1.3",
     "@silverhand/essentials": "^1.1.6"
   },
   "devDependencies": {
@@ -50,5 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "74bd01ec73a5215b26a96f426b874de9ad474dae"
+  "gitHead": "2a59d35046744dd1284eb81804cf0ef9a35f41e6"
 }