@logto/react 3.0.16 → 4.0.3

package/lib/provider.d.ts

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

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "@logto/react",
-  "version": "3.0.16",
+  "version": "4.0.3",
   "type": "module",
-  "main": "./lib/index.cjs",
   "module": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "exports": {
     "types": "./lib/index.d.ts",
-    "require": "./lib/index.cjs",
     "import": "./lib/index.js",
     "default": "./lib/index.js"
   },
@@ -21,8 +19,8 @@
     "directory": "packages/react"
   },
   "dependencies": {
-    "@silverhand/essentials": "^2.8.7",
-    "@logto/browser": "^2.2.18"
+    "@silverhand/essentials": "^2.9.2",
+    "@logto/browser": "^3.0.3"
   },
   "devDependencies": {
     "@silverhand/eslint-config": "^6.0.1",
@@ -33,12 +31,12 @@
     "@types/react": "^18.2.56",
     "@vitest/coverage-v8": "^1.6.0",
     "eslint": "^8.57.0",
-    "happy-dom": "^14.0.0",
+    "happy-dom": "^15.10.2",
     "lint-staged": "^15.0.0",
     "postcss": "^8.4.31",
     "prettier": "^3.0.0",
     "react": "^18.0.2",
-    "stylelint": "^15.0.0",
+    "stylelint": "^16.0.0",
     "typescript": "^5.3.3",
     "vitest": "^1.6.0"
   },

package/lib/context.cjs

@@ -1,25 +0,0 @@
-'use strict';
-
-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,
-    isLoading: false,
-    error: undefined,
-    setIsAuthenticated: throwContextError,
-    setIsLoading: throwContextError,
-    setError: throwContextError,
-});
-
-exports.LogtoContext = LogtoContext;
-exports.throwContextError = throwContextError;

package/lib/hooks/index.cjs

@@ -1,110 +0,0 @@
-'use strict';
-
-var essentials = require('@silverhand/essentials');
-var react = require('react');
-var context = require('../context.cjs');
-
-const useErrorHandler = () => {
-    const { setError } = react.useContext(context.LogtoContext);
-    const handleError = react.useCallback((error, fallbackErrorMessage) => {
-        if (error instanceof Error) {
-            setError(error);
-        }
-        else if (fallbackErrorMessage) {
-            setError(new Error(fallbackErrorMessage));
-        }
-        console.error(error);
-    }, [setError]);
-    return { handleError };
-};
-const useHandleSignInCallback = (callback) => {
-    const { logtoClient, isAuthenticated, error, setIsAuthenticated, isLoading, setIsLoading } = react.useContext(context.LogtoContext);
-    const { handleError } = useErrorHandler();
-    const callbackRef = react.useRef();
-    react.useEffect(() => {
-        // eslint-disable-next-line @silverhand/fp/no-mutation
-        callbackRef.current = callback; // Update ref to the latest callback.
-    }, [callback]);
-    react.useEffect(() => {
-        if (!logtoClient || isLoading || error) {
-            return;
-        }
-        (async () => {
-            const currentPageUrl = window.location.href;
-            const isRedirected = await logtoClient.isSignInRedirected(currentPageUrl);
-            if (!isAuthenticated && isRedirected) {
-                setIsLoading(true);
-                await essentials.trySafe(async () => {
-                    await logtoClient.handleSignInCallback(currentPageUrl);
-                    setIsAuthenticated(true);
-                    callbackRef.current?.();
-                }, (error) => {
-                    handleError(error, 'Unexpected error occurred while handling sign in callback.');
-                });
-                setIsLoading(false);
-            }
-        })();
-    }, [
-        error,
-        handleError,
-        isAuthenticated,
-        isLoading,
-        logtoClient,
-        setIsAuthenticated,
-        setIsLoading,
-    ]);
-    return {
-        isLoading,
-        isAuthenticated,
-        error,
-    };
-};
-const useLogto = () => {
-    const { logtoClient, isAuthenticated, error, isLoading, setIsLoading } = react.useContext(context.LogtoContext);
-    const { handleError } = useErrorHandler();
-    const client = logtoClient ?? context.throwContextError();
-    const proxy = react.useCallback((run, resetLoadingState = true) => {
-        return async (...args) => {
-            try {
-                setIsLoading(true);
-                return await run(...args);
-            }
-            catch (error) {
-                handleError(error, `Unexpected error occurred while calling ${run.name}.`);
-            }
-            finally {
-                if (resetLoadingState) {
-                    setIsLoading(false);
-                }
-            }
-        };
-    }, [setIsLoading, handleError]);
-    const methods = react.useMemo(() => ({
-        getRefreshToken: proxy(client.getRefreshToken.bind(client)),
-        getAccessToken: proxy(client.getAccessToken.bind(client)),
-        getAccessTokenClaims: proxy(client.getAccessTokenClaims.bind(client)),
-        getOrganizationToken: proxy(client.getOrganizationToken.bind(client)),
-        getOrganizationTokenClaims: proxy(client.getOrganizationTokenClaims.bind(client)),
-        getIdToken: proxy(client.getIdToken.bind(client)),
-        getIdTokenClaims: proxy(client.getIdTokenClaims.bind(client)),
-        // eslint-disable-next-line no-restricted-syntax -- TypeScript cannot infer the correct type.
-        signIn: proxy(client.signIn.bind(client), false),
-        // We deliberately do NOT set isAuthenticated to false in the function below, because the app state
-        // may change immediately even before navigating to the oidc end session endpoint, which might cause
-        // rendering problems.
-        // Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.
-        signOut: proxy(client.signOut.bind(client)),
-        fetchUserInfo: proxy(client.fetchUserInfo.bind(client)),
-        clearAccessToken: proxy(client.clearAccessToken.bind(client)),
-        clearAllTokens: proxy(client.clearAllTokens.bind(client)),
-    }), [client, proxy]);
-    return {
-        isAuthenticated,
-        isLoading,
-        error,
-        ...methods,
-    };
-};
-
-exports.useHandleSignInCallback = useHandleSignInCallback;
-exports.useLogto = useLogto;

package/lib/index.cjs

@@ -1,59 +0,0 @@
-'use strict';
-
-var LogtoClient = require('@logto/browser');
-var provider = require('./provider.cjs');
-var index = require('./hooks/index.cjs');
-
-
-
-Object.defineProperty(exports, "LogtoClientError", {
-	enumerable: true,
-	get: function () { return LogtoClient.LogtoClientError; }
-});
-Object.defineProperty(exports, "LogtoError", {
-	enumerable: true,
-	get: function () { return LogtoClient.LogtoError; }
-});
-Object.defineProperty(exports, "LogtoRequestError", {
-	enumerable: true,
-	get: function () { return LogtoClient.LogtoRequestError; }
-});
-Object.defineProperty(exports, "OidcError", {
-	enumerable: true,
-	get: function () { return LogtoClient.OidcError; }
-});
-Object.defineProperty(exports, "PersistKey", {
-	enumerable: true,
-	get: function () { return LogtoClient.PersistKey; }
-});
-Object.defineProperty(exports, "Prompt", {
-	enumerable: true,
-	get: function () { return LogtoClient.Prompt; }
-});
-Object.defineProperty(exports, "ReservedResource", {
-	enumerable: true,
-	get: function () { return LogtoClient.ReservedResource; }
-});
-Object.defineProperty(exports, "ReservedScope", {
-	enumerable: true,
-	get: function () { return LogtoClient.ReservedScope; }
-});
-Object.defineProperty(exports, "UserScope", {
-	enumerable: true,
-	get: function () { return LogtoClient.UserScope; }
-});
-Object.defineProperty(exports, "buildOrganizationUrn", {
-	enumerable: true,
-	get: function () { return LogtoClient.buildOrganizationUrn; }
-});
-Object.defineProperty(exports, "getOrganizationIdFromUrn", {
-	enumerable: true,
-	get: function () { return LogtoClient.getOrganizationIdFromUrn; }
-});
-Object.defineProperty(exports, "organizationUrnPrefix", {
-	enumerable: true,
-	get: function () { return LogtoClient.organizationUrnPrefix; }
-});
-exports.LogtoProvider = provider.LogtoProvider;
-exports.useHandleSignInCallback = index.useHandleSignInCallback;
-exports.useLogto = index.useLogto;

package/lib/provider.cjs

@@ -1,45 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var LogtoClient = require('@logto/browser');
-var react = require('react');
-var context = require('./context.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var LogtoClient__default = /*#__PURE__*/_interopDefault(LogtoClient);
-
-const LogtoProvider = ({ config, LogtoClientClass = LogtoClient__default.default, children, unstable_enableCache = false, }) => {
-    const [loadingCount, setLoadingCount] = react.useState(1);
-    const memorizedLogtoClient = react.useMemo(() => ({ logtoClient: new LogtoClientClass(config, unstable_enableCache) }), [LogtoClientClass, 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();
-            setIsAuthenticated(isAuthenticated);
-            setLoadingCount((count) => Math.max(0, count - 1));
-        })();
-    }, [memorizedLogtoClient]);
-    const memorizedContextValue = react.useMemo(() => ({
-        ...memorizedLogtoClient,
-        isAuthenticated,
-        setIsAuthenticated,
-        isLoading,
-        setIsLoading,
-        error,
-        setError,
-    }), [memorizedLogtoClient, isAuthenticated, isLoading, setIsLoading, error]);
-    return jsxRuntime.jsx(context.LogtoContext.Provider, { value: memorizedContextValue, children: children });
-};
-
-exports.LogtoProvider = LogtoProvider;