diff --git a/packages/console/src/assets/docs/guides/spa-react/README.mdx b/packages/console/src/assets/docs/guides/spa-react/README.mdx index 67bd12a9f..ba3de286e 100644 --- a/packages/console/src/assets/docs/guides/spa-react/README.mdx +++ b/packages/console/src/assets/docs/guides/spa-react/README.mdx @@ -5,6 +5,9 @@ import InlineNotification from '@/ds-components/InlineNotification'; import Steps from '@/mdx-components/Steps'; import Step from '@/mdx-components/Step'; +import Checkpoint from '../../fragments/_checkpoint.md'; +import RedirectUrisWeb, { defaultRedirectUri, defaultPostSignOutUri } from '../../fragments/_redirect-uris-web.mdx'; + - - -```bash -yarn add @logto/react -``` - @@ -32,15 +28,22 @@ yarn add @logto/react pnpm add @logto/react ``` + + + +```bash +yarn add @logto/react +``` + - + -Import and use `LogtoProvider` to provide a Logto context: +Import and use `LogtoProvider` to provide a Logto context to your app: - + {`import { LogtoProvider, LogtoConfig } from '@logto/react'; const config: LogtoConfig = { @@ -57,52 +60,19 @@ const App = () => ( - + - - In the following steps, we assume your app is running on http://localhost:3000. - + -### Configure Redirect URI + -First, let’s enter your redirect URI. E.g. `http://localhost:3000/callback`. + - +After the user signs in, Logto will redirect the user back to the redirect URI configured above. However, there are still things to do to make your application work properly. -### Implement a sign-in button +First let's create a callback page: -We provide two hooks `useHandleSignInCallback()` and `useLogto()` which can help you easily manage the authentication flow. - -Go back to your IDE/editor, use the following code to implement the sign-in button: - - - {`import { useLogto } from '@logto/react'; - -const SignIn = () => { - const { signIn, isAuthenticated } = useLogto(); - - if (isAuthenticated) { - return
Signed in
; - } - - return ( - - ); -};`} - - -### Handle redirect - -We're almost there! In the last step, we use `http://localhost:3000/callback` as the Redirect URI, and now we need to handle it properly. - -First let's create a callback component: - -```tsx +```tsx title="pages/Callback/index.tsx" import { useHandleSignInCallback } from '@logto/react'; const Callback = () => { @@ -114,76 +84,43 @@ const Callback = () => { if (isLoading) { return
Redirecting...
; } + + return null; }; ``` -Finally insert the code below to create a `/callback` route which does NOT require authentication: +Then, insert the code below to create a `/callback` route which does NOT require authentication: -```tsx +```tsx title="App.tsx" // Assuming react-router } /> ``` - + -Calling `.signOut()` will clear all the Logto data in memory and localStorage if they exist. +We provide a hook `useLogto()` which can help you easily manage the authentication flow. -After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:3000` as the Post Sign-out URI below, and use it as the parameter when calling `.signOut()`. + + Before calling `.signIn()`, make sure you have correctly configured Redirect URI in Admin Console. + - + + {`import { useLogto } from '@logto/react'; -### Implement a sign-out button +const Home = () => { + const { signIn, signOut, isAuthenticated } = useLogto(); - - {`const SignOut = () => { - const { signOut } = useLogto(); - - return ( - + return isAuthenticated ? ( + + ) : ( + ); };`} - - - - -In Logto SDK, generally we can use `logtoClient.isAuthenticated` to check the authentication status, if the user is signed in, the value will be `true`, otherwise, the value will be `false`. - -In Logto React SDK, the `isAuthenticated` status can be checked by using the `useLogto` hook. In the example code below, we can use it to programmatically show and hide the sign-in and sign-out buttons. And also use `getIdTokenClaims` to get the id of the currently logged-in user. - -```tsx -const Home = () => { - const { isAuthenticated, getIdTokenClaims, signIn, signOut } = useLogto(); - const [userId, setUserId] = useState(''); - - useEffect(() => { - (async () => { - if (isAuthenticated) { - const claims = await getIdTokenClaims(); - setUserId(claims.sub); - } - })(); - }, [isAuthenticated]); - - return ( -
- {userId &&

Logged in as {userId}

} - {isAuthenticated ? ( - - ) : ( - - )} -
- ); -}; -``` +Calling `.signOut()` will clear all the Logto data in memory and localStorage if they exist. @@ -191,12 +128,54 @@ const Home = () => { title="Checkpoint: Test your application" > -Now, you can test your application: + -1. Run your application, you will see the sign-in button. -2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page. -3. After you signed in, you will be redirected back to your application and see user ID and the sign-out button. -4. Click the sign-out button to sign-out. + + + + +To display the user's information, you can use the `getIdTokenClaims()` method. For example, in your Home page: + +```tsx title="pages/Home/index.tsx" +import { useLogto, type IdTokenClaims } from '@logto/react'; +import { useEffect, useState } from 'react'; + +const Home = () => { + const { isAuthenticated, getIdTokenClaims } = useLogto(); + const [user, setUser] = useState(); + + useEffect(() => { + (async () => { + if (isAuthenticated) { + const claims = await getIdTokenClaims(); + setUser(claims); + } + })(); + }, [getIdTokenClaims, isAuthenticated]); + + return ( + // ... + {isAuthenticated && user && ( + + + + + + + + + {Object.entries(user).map(([key, value]) => ( + + + + + ))} + +
NameValue
{key}{typeof value === 'string' ? value : JSON.stringify(value)}
+ )} + ); +} +``` diff --git a/packages/console/src/components/Guide/index.module.scss b/packages/console/src/components/Guide/index.module.scss index c1fb96bef..e1980587b 100644 --- a/packages/console/src/components/Guide/index.module.scss +++ b/packages/console/src/components/Guide/index.module.scss @@ -57,6 +57,10 @@ hr { border-color: var(--color-border); + + + div { + margin-top: _.unit(4.5); + } } } }