@logto/react 2.2.4 → 3.0.0

package/README.md

@@ -1,9 +1,12 @@
 # Logto React SDK
+
 [![Version](https://img.shields.io/npm/v/@logto/react)](https://www.npmjs.com/package/@logto/react)
 [![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml)
 [![Codecov](https://img.shields.io/codecov/c/github/logto-io/js)](https://app.codecov.io/gh/logto-io/js?branch=master)
 
-The Logto React SDK written in TypeScript. Check out our [integration guide](https://docs.logto.io/docs/recipes/integrate-logto/react) or [docs](https://docs.logto.io/sdk/JavaScript/react/) for more information.
+The Logto React SDK written in TypeScript.
+
+Check out our [docs](https://docs.logto.io/sdk/react/) for more information.
 
 ## Installation
 
@@ -29,14 +32,15 @@ pnpm add @logto/react
 
 A sample project can be found at [React Sample](https://github.com/logto-io/js/tree/master/packages/react-sample)
 
-Check out the source code and try it with ease.
+Check out the full JS repo and try it with ease.
 
-```
-pnpm i && pnpm start
+```bash
+pnpm i && pnpm build
+cd packages/react-sample && pnpm start
 ```
 
 ## Resources
 
 [![Website](https://img.shields.io/badge/website-logto.io-8262F8.svg)](https://logto.io/)
-[![Docs](https://img.shields.io/badge/docs-logto.io-green.svg)](https://docs.logto.io/sdk/JavaScript/react/)
+[![Docs](https://img.shields.io/badge/docs-logto.io-green.svg)](https://docs.logto.io/)
 [![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)

package/lib/context.cjs

@@ -5,13 +5,19 @@ var react = require('react');
 const throwContextError = () => {
     throw new Error('Must be used inside <LogtoProvider> context.');
 };
+/**
+ * The context for the LogtoProvider.
+ *
+ * @remarks
+ * Instead of using this context directly, in most cases you should use the `useLogto` hook.
+ */
 const LogtoContext = react.createContext({
     logtoClient: undefined,
     isAuthenticated: false,
-    loadingCount: 0,
+    isLoading: false,
     error: undefined,
     setIsAuthenticated: throwContextError,
-    setLoadingCount: throwContextError,
+    setIsLoading: throwContextError,
     setError: throwContextError,
 });
 

package/lib/context.d.ts

@@ -1,13 +1,36 @@
 /// <reference types="react" />
 import type LogtoClient from '@logto/browser';
 export type LogtoContextProps = {
+    /** The underlying LogtoClient instance (from `@logto/browser`). */
     logtoClient?: LogtoClient;
+    /** Whether the user is authenticated or not. */
     isAuthenticated: boolean;
-    loadingCount: number;
+    /** Whether the context has any pending requests. It will be `true` if there is at least one request pending. */
+    isLoading: boolean;
+    /** The error that occurred during the last request. If there was no error, this will be `undefined`. */
     error?: Error;
+    /** Sets the authentication state. */
     setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>;
-    setLoadingCount: React.Dispatch<React.SetStateAction<number>>;
+    /**
+     * Sets the loading state.
+     *
+     * @remarks
+     * Instead of directly setting the boolean value, this function will increment or decrement the
+     * loading count.
+     *
+     * - If the `state` is `true`, the loading count will be incremented by 1.
+     * - If the `state` is `false`, the loading count will be decremented by 1. If the loading count
+     *   is already 0, it will be set to 0.
+     */
+    setIsLoading: (state: boolean) => void;
+    /** Sets the error state. To clear the error, set this to `undefined`. */
     setError: React.Dispatch<React.SetStateAction<Error | undefined>>;
 };
 export declare const throwContextError: () => never;
+/**
+ * The context for the LogtoProvider.
+ *
+ * @remarks
+ * Instead of using this context directly, in most cases you should use the `useLogto` hook.
+ */
 export declare const LogtoContext: import("react").Context<LogtoContextProps>;

package/lib/context.js

@@ -3,13 +3,19 @@ import { createContext } from 'react';
 const throwContextError = () => {
     throw new Error('Must be used inside <LogtoProvider> context.');
 };
+/**
+ * The context for the LogtoProvider.
+ *
+ * @remarks
+ * Instead of using this context directly, in most cases you should use the `useLogto` hook.
+ */
 const LogtoContext = createContext({
     logtoClient: undefined,
     isAuthenticated: false,
-    loadingCount: 0,
+    isLoading: false,
     error: undefined,
     setIsAuthenticated: throwContextError,
-    setLoadingCount: throwContextError,
+    setIsLoading: throwContextError,
     setError: throwContextError,
 });
 

package/lib/hooks/index.cjs

@@ -4,19 +4,6 @@ var essentials = require('@silverhand/essentials');
 var react = require('react');
 var context = require('../context.cjs');
 
-const useLoadingState = () => {
-    const { loadingCount, setLoadingCount } = react.useContext(context.LogtoContext);
-    const isLoading = loadingCount > 0;
-    const setLoadingState = react.useCallback((state) => {
-        if (state) {
-            setLoadingCount((count) => count + 1);
-        }
-        else {
-            setLoadingCount((count) => Math.max(0, count - 1));
-        }
-    }, [setLoadingCount]);
-    return { isLoading, setLoadingState };
-};
 const useErrorHandler = () => {
     const { setError } = react.useContext(context.LogtoContext);
     const handleError = react.useCallback((error, fallbackErrorMessage) => {
@@ -31,8 +18,7 @@ const useErrorHandler = () => {
     return { handleError };
 };
 const useHandleSignInCallback = (callback) => {
-    const { logtoClient, isAuthenticated, error, setIsAuthenticated } = react.useContext(context.LogtoContext);
-    const { isLoading, setLoadingState } = useLoadingState();
+    const { logtoClient, isAuthenticated, error, setIsAuthenticated, isLoading, setIsLoading } = react.useContext(context.LogtoContext);
     const { handleError } = useErrorHandler();
     const callbackRef = react.useRef();
     react.useEffect(() => {
@@ -47,7 +33,7 @@ const useHandleSignInCallback = (callback) => {
             const currentPageUrl = window.location.href;
             const isRedirected = await logtoClient.isSignInRedirected(currentPageUrl);
             if (!isAuthenticated && isRedirected) {
-                setLoadingState(true);
+                setIsLoading(true);
                 await essentials.trySafe(async () => {
                     await logtoClient.handleSignInCallback(currentPageUrl);
                     setIsAuthenticated(true);
@@ -55,7 +41,7 @@ const useHandleSignInCallback = (callback) => {
                 }, (error) => {
                     handleError(error, 'Unexpected error occurred while handling sign in callback.');
                 });
-                setLoadingState(false);
+                setIsLoading(false);
             }
         })();
     }, [
@@ -65,7 +51,7 @@ const useHandleSignInCallback = (callback) => {
         isLoading,
         logtoClient,
         setIsAuthenticated,
-        setLoadingState,
+        setIsLoading,
     ]);
     return {
         isLoading,
@@ -74,15 +60,13 @@ const useHandleSignInCallback = (callback) => {
     };
 };
 const useLogto = () => {
-    const { logtoClient, loadingCount, isAuthenticated, error } = react.useContext(context.LogtoContext);
-    const { setLoadingState } = useLoadingState();
+    const { logtoClient, isAuthenticated, error, isLoading, setIsLoading } = react.useContext(context.LogtoContext);
     const { handleError } = useErrorHandler();
-    const isLoading = loadingCount > 0;
     const client = logtoClient ?? context.throwContextError();
     const proxy = react.useCallback((run, resetLoadingState = true) => {
         return async (...args) => {
             try {
-                setLoadingState(true);
+                setIsLoading(true);
                 return await run(...args);
             }
             catch (error) {
@@ -90,11 +74,11 @@ const useLogto = () => {
             }
             finally {
                 if (resetLoadingState) {
-                    setLoadingState(false);
+                    setIsLoading(false);
                 }
             }
         };
-    }, [setLoadingState, handleError]);
+    }, [setIsLoading, handleError]);
     const methods = react.useMemo(() => ({
         getRefreshToken: proxy(client.getRefreshToken.bind(client)),
         getAccessToken: proxy(client.getAccessToken.bind(client)),

package/lib/hooks/index.js

@@ -2,19 +2,6 @@ import { trySafe } from '@silverhand/essentials';
 import { useContext, useRef, useEffect, useCallback, useMemo } from 'react';
 import { LogtoContext, throwContextError } from '../context.js';
 
-const useLoadingState = () => {
-    const { loadingCount, setLoadingCount } = useContext(LogtoContext);
-    const isLoading = loadingCount > 0;
-    const setLoadingState = useCallback((state) => {
-        if (state) {
-            setLoadingCount((count) => count + 1);
-        }
-        else {
-            setLoadingCount((count) => Math.max(0, count - 1));
-        }
-    }, [setLoadingCount]);
-    return { isLoading, setLoadingState };
-};
 const useErrorHandler = () => {
     const { setError } = useContext(LogtoContext);
     const handleError = useCallback((error, fallbackErrorMessage) => {
@@ -29,8 +16,7 @@ const useErrorHandler = () => {
     return { handleError };
 };
 const useHandleSignInCallback = (callback) => {
-    const { logtoClient, isAuthenticated, error, setIsAuthenticated } = useContext(LogtoContext);
-    const { isLoading, setLoadingState } = useLoadingState();
+    const { logtoClient, isAuthenticated, error, setIsAuthenticated, isLoading, setIsLoading } = useContext(LogtoContext);
     const { handleError } = useErrorHandler();
     const callbackRef = useRef();
     useEffect(() => {
@@ -45,7 +31,7 @@ const useHandleSignInCallback = (callback) => {
             const currentPageUrl = window.location.href;
             const isRedirected = await logtoClient.isSignInRedirected(currentPageUrl);
             if (!isAuthenticated && isRedirected) {
-                setLoadingState(true);
+                setIsLoading(true);
                 await trySafe(async () => {
                     await logtoClient.handleSignInCallback(currentPageUrl);
                     setIsAuthenticated(true);
@@ -53,7 +39,7 @@ const useHandleSignInCallback = (callback) => {
                 }, (error) => {
                     handleError(error, 'Unexpected error occurred while handling sign in callback.');
                 });
-                setLoadingState(false);
+                setIsLoading(false);
             }
         })();
     }, [
@@ -63,7 +49,7 @@ const useHandleSignInCallback = (callback) => {
         isLoading,
         logtoClient,
         setIsAuthenticated,
-        setLoadingState,
+        setIsLoading,
     ]);
     return {
         isLoading,
@@ -72,15 +58,13 @@ const useHandleSignInCallback = (callback) => {
     };
 };
 const useLogto = () => {
-    const { logtoClient, loadingCount, isAuthenticated, error } = useContext(LogtoContext);
-    const { setLoadingState } = useLoadingState();
+    const { logtoClient, isAuthenticated, error, isLoading, setIsLoading } = useContext(LogtoContext);
     const { handleError } = useErrorHandler();
-    const isLoading = loadingCount > 0;
     const client = logtoClient ?? throwContextError();
     const proxy = useCallback((run, resetLoadingState = true) => {
         return async (...args) => {
             try {
-                setLoadingState(true);
+                setIsLoading(true);
                 return await run(...args);
             }
             catch (error) {
@@ -88,11 +72,11 @@ const useLogto = () => {
             }
             finally {
                 if (resetLoadingState) {
-                    setLoadingState(false);
+                    setIsLoading(false);
                 }
             }
         };
-    }, [setLoadingState, handleError]);
+    }, [setIsLoading, handleError]);
     const methods = useMemo(() => ({
         getRefreshToken: proxy(client.getRefreshToken.bind(client)),
         getAccessToken: proxy(client.getAccessToken.bind(client)),

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-export type { LogtoContextProps } from './context.js';
+export type { LogtoContextProps, LogtoContext } from './context.js';
 export type { LogtoConfig, IdTokenClaims, UserInfoResponse, LogtoErrorCode, LogtoClientErrorCode, InteractionMode, } from '@logto/browser';
 export { LogtoError, LogtoRequestError, LogtoClientError, OidcError, Prompt, ReservedScope, ReservedResource, UserScope, organizationUrnPrefix, buildOrganizationUrn, getOrganizationIdFromUrn, PersistKey, } from '@logto/browser';
 export * from './provider.js';

package/lib/provider.cjs

@@ -14,6 +14,15 @@ const LogtoProvider = ({ config, children, unstable_enableCache = false, }) => {
     const memorizedLogtoClient = react.useMemo(() => ({ logtoClient: new LogtoClient__default.default(config, unstable_enableCache) }), [config, unstable_enableCache]);
     const [isAuthenticated, setIsAuthenticated] = react.useState(false);
     const [error, setError] = react.useState();
+    const isLoading = react.useMemo(() => loadingCount > 0, [loadingCount]);
+    const setIsLoading = react.useCallback((state) => {
+        if (state) {
+            setLoadingCount((count) => count + 1);
+        }
+        else {
+            setLoadingCount((count) => Math.max(0, count - 1));
+        }
+    }, [setLoadingCount]);
     react.useEffect(() => {
         (async () => {
             const isAuthenticated = await memorizedLogtoClient.logtoClient.isAuthenticated();
@@ -25,11 +34,11 @@ const LogtoProvider = ({ config, children, unstable_enableCache = false, }) => {
         ...memorizedLogtoClient,
         isAuthenticated,
         setIsAuthenticated,
-        loadingCount,
-        setLoadingCount,
+        isLoading,
+        setIsLoading,
         error,
         setError,
-    }), [memorizedLogtoClient, isAuthenticated, loadingCount, error]);
+    }), [memorizedLogtoClient, isAuthenticated, isLoading, setIsLoading, error]);
     return jsxRuntime.jsx(context.LogtoContext.Provider, { value: memorizedContextValue, children: children });
 };
 

package/lib/provider.d.ts

@@ -9,4 +9,4 @@ export type LogtoProviderProps = {
     unstable_enableCache?: boolean;
     children?: ReactNode;
 };
-export declare const LogtoProvider: ({ config, children, unstable_enableCache, }: LogtoProviderProps) => JSX.Element;
+export declare const LogtoProvider: ({ config, children, unstable_enableCache, }: LogtoProviderProps) => import("react/jsx-runtime.js").JSX.Element;

package/lib/provider.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import LogtoClient from '@logto/browser';
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import { LogtoContext } from './context.js';
 
 const LogtoProvider = ({ config, children, unstable_enableCache = false, }) => {
@@ -8,6 +8,15 @@ const LogtoProvider = ({ config, children, unstable_enableCache = false, }) => {
     const memorizedLogtoClient = useMemo(() => ({ logtoClient: new LogtoClient(config, unstable_enableCache) }), [config, unstable_enableCache]);
     const [isAuthenticated, setIsAuthenticated] = useState(false);
     const [error, setError] = useState();
+    const isLoading = useMemo(() => loadingCount > 0, [loadingCount]);
+    const setIsLoading = useCallback((state) => {
+        if (state) {
+            setLoadingCount((count) => count + 1);
+        }
+        else {
+            setLoadingCount((count) => Math.max(0, count - 1));
+        }
+    }, [setLoadingCount]);
     useEffect(() => {
         (async () => {
             const isAuthenticated = await memorizedLogtoClient.logtoClient.isAuthenticated();
@@ -19,11 +28,11 @@ const LogtoProvider = ({ config, children, unstable_enableCache = false, }) => {
         ...memorizedLogtoClient,
         isAuthenticated,
         setIsAuthenticated,
-        loadingCount,
-        setLoadingCount,
+        isLoading,
+        setIsLoading,
         error,
         setError,
-    }), [memorizedLogtoClient, isAuthenticated, loadingCount, error]);
+    }), [memorizedLogtoClient, isAuthenticated, isLoading, setIsLoading, error]);
     return jsx(LogtoContext.Provider, { value: memorizedContextValue, children: children });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logto/react",
-  "version": "2.2.4",
+  "version": "3.0.0",
   "type": "module",
   "main": "./lib/index.cjs",
   "module": "./lib/index.js",
@@ -21,7 +21,7 @@
     "directory": "packages/react"
   },
   "dependencies": {
-    "@logto/browser": "^2.2.2",
+    "@logto/browser": "^2.2.3",
     "@silverhand/essentials": "^2.8.7"
   },
   "devDependencies": {
@@ -31,9 +31,9 @@
     "@silverhand/ts-config-react": "^5.0.0",
     "@swc/core": "^1.3.50",
     "@swc/jest": "^0.2.24",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.2.1",
     "@types/jest": "^29.5.0",
-    "@types/react": "^18.2.0",
+    "@types/react": "^18.2.56",
     "eslint": "^8.44.0",
     "jest": "^29.5.0",
     "lint-staged": "^15.0.0",
@@ -41,7 +41,7 @@
     "prettier": "^3.0.0",
     "react": "^18.0.2",
     "stylelint": "^16.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0"