@logto/react 0.1.14 → 0.1.17

package/README.md

@@ -0,0 +1,132 @@
+# 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/integrate-sdk/react) or [docs](https://docs.logto.io/sdk/react) for more information.
+
+We also provide [集成指南](https://docs.logto.io/zh-cn/integrate-sdk/react) and [文档](https://docs.logto.io/zh-cn/sdk/react) in Simplified Chinese.
+
+## Installation
+
+### Using npm
+
+```bash
+npm install @logto/react
+```
+
+### Using yarn
+
+```bash
+yarn add @logto/react
+```
+
+### Using pnpm
+
+```bash
+pnpm install @logto/react
+```
+
+### Using CDN
+
+```bash
+<script src="https://logto.io/js/logto-sdk-react/0.1.0/logto-sdk-react.production.js" />
+```
+
+## Get Started
+
+A sample project with the following code snippets 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 yourself. (We use [pnpm](https://pnpm.io/) for package management)
+
+```bash
+pnpm i && pnpm start
+```
+
+### Initiate LogtoClient
+
+```tsx
+import { LogtoProvider, LogtoConfig } from '@logto/react';
+
+const App = () => {
+  const config: LogtoConfig = {
+    clientId: 'foo',
+    endpoint: 'https://your-endpoint-domain.com'
+  };
+
+  return (
+    <BrowserRouter>
+      <LogtoProvider config={config}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/callback" element={<Callback />} />
+          <Route
+            path="/protected-resource"
+            element={
+              <RequireAuth>
+                <ProtectedResource />
+              </RequireAuth>
+            }
+          />
+        </Routes>
+      </LogtoProvider>
+    </BrowserRouter>
+  );
+};
+```
+
+### Setup your sign-in
+
+```tsx
+import { useLogto } from '@logto/react';
+
+const SignInButton = () => {
+  const { signIn } = useLogto();
+  const redirectUrl = window.location.origin + '/callback';
+
+  return <button onClick={() => signIn(redirectUrl)}>Sign In</button>;
+};
+
+export default SignInButton;
+```
+
+### Retrieve Auth Status
+
+```tsx
+import { useLogto } from '@logto/react';
+
+const App = () => {
+  const { isAuthenticated, signIn } = useLogto();
+
+  if !(isAuthenticated) {
+    return <SignInButton />
+  }
+
+  return <>
+    <AppContent />
+    <SignOutButton />
+  </>
+};
+```
+
+### Sign out
+
+```tsx
+import React from 'react';
+import { useLogto } from '@logto/react';
+
+const SignOutButton = () => {
+  const { signOut } = useLogto();
+  const postLogoutRedirectUri = window.location.origin;
+
+  return <button onClick={() => signOut(postLogoutRedirectUri)}>Sign out</button>;
+};
+
+export default SignOutButton;
+```
+
+## 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/docs/sdk/swift/)
+[![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)

package/lib/hooks/index.d.ts

@@ -9,7 +9,7 @@ declare type Logto = {
     signIn: (redirectUri: string) => Promise<void>;
     signOut: (postLogoutRedirectUri: string) => Promise<void>;
 };
-declare const useHandleSignInCallback: (returnToPageUrl?: string) => {
+declare const useHandleSignInCallback: (callback?: (() => void) | undefined) => {
     isLoading: boolean;
     isAuthenticated: boolean;
     error: Error | undefined;

package/lib/hooks/index.js

@@ -29,10 +29,15 @@ const useErrorHandler = () => {
     }, [setError]);
     return { handleError };
 };
-const useHandleSignInCallback = (returnToPageUrl = window.location.origin) => {
-    const { logtoClient, isAuthenticated, error } = (0, react_1.useContext)(context_1.LogtoContext);
+const useHandleSignInCallback = (callback) => {
+    const { logtoClient, isAuthenticated, error, setIsAuthenticated } = (0, react_1.useContext)(context_1.LogtoContext);
     const { isLoading, setLoadingState } = useLoadingState();
     const { handleError } = useErrorHandler();
+    const callbackRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        // eslint-disable-next-line @silverhand/fp/no-mutation
+        callbackRef.current = callback; // Update ref to the latest callback.
+    }, [callback]);
     const handleSignInCallback = (0, react_1.useCallback)(async (callbackUri) => {
         if (!logtoClient) {
             return (0, context_1.throwContextError)();
@@ -40,10 +45,8 @@ const useHandleSignInCallback = (returnToPageUrl = window.location.origin) => {
         try {
             setLoadingState(true);
             await logtoClient.handleSignInCallback(callbackUri);
-            // We deliberately do NOT set isAuthenticated to true here, because the app state may change immediately
-            // even before navigating to the return page URL, which might cause rendering problems.
-            // Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.
-            window.location.assign(returnToPageUrl);
+            setIsAuthenticated(true);
+            callbackRef.current?.();
         }
         catch (error) {
             handleError(error, 'Unexpected error occurred while handling sign in callback.');
@@ -51,10 +54,11 @@ const useHandleSignInCallback = (returnToPageUrl = window.location.origin) => {
         finally {
             setLoadingState(false);
         }
-    }, [logtoClient, returnToPageUrl, setLoadingState, handleError]);
+    }, [logtoClient, setLoadingState, setIsAuthenticated, handleError]);
     (0, react_1.useEffect)(() => {
-        if (!isAuthenticated && logtoClient?.isSignInRedirected(window.location.href)) {
-            void handleSignInCallback(window.location.href);
+        const currentPageUrl = window.location.href;
+        if (!isAuthenticated && logtoClient?.isSignInRedirected(currentPageUrl)) {
+            void handleSignInCallback(currentPageUrl);
         }
     }, [handleSignInCallback, isAuthenticated, logtoClient]);
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logto/react",
-  "version": "0.1.14",
+  "version": "0.1.17",
   "main": "./lib/index.js",
   "exports": "./lib/index.js",
   "typings": "./lib/index.d.ts",
@@ -15,7 +15,6 @@
   },
   "scripts": {
     "dev:tsc": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
-    "preinstall": "npx only-allow pnpm",
     "precommit": "lint-staged",
     "build": "rm -rf lib/ && tsc -p tsconfig.build.json",
     "lint": "eslint --ext .ts --ext .tsx src",
@@ -24,7 +23,7 @@
     "prepack": "pnpm test"
   },
   "dependencies": {
-    "@logto/browser": "^0.1.14",
+    "@logto/browser": "^0.1.17",
     "@silverhand/essentials": "^1.1.6"
   },
   "devDependencies": {
@@ -56,5 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5d05c6bd23dc35d7217031edccc01db2bae33b7b"
+  "gitHead": "57e93385829eceb3c1b2ffb92b90901aa174a59a"
 }