docs(console): update the expo SDK integration guide (#6126)

* docs(console): update the expo SDK integration guide update the expo SDK integrtion guide * chore(console): update rn guide section title update rn guide section title * refactor(console): improve content --------- Co-authored-by: Gao Sun <[email protected]>
logto-io · Jul 1, 2024 · 5c4ddee · 5c4ddee
1 parent f6e10f8
commit 5c4ddee
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 36 deletions.
diff --git a/packages/console/src/assets/docs/fragments/_redirect-uris-native.mdx b/packages/console/src/assets/docs/fragments/_redirect-uris-native.mdx
@@ -3,8 +3,10 @@ import UriInputField from '@/mdx-components/UriInputField';
 
 import ExperienceOverview from './_experience-overview.md';
 
+export const defaultRedirectUri = 'io.logto://callback';
+
 <ExperienceOverview />
 
-Now, let's configure your redirect URI. E.g. {`${props.defaultUri ?? 'http://localhost:3000/callback'}`}.
+Now, let's configure your redirect URI. E.g. {`${props.defaultUri ?? defaultRedirectUri}`}.
 
 <UriInputField name="redirectUris" />
diff --git a/packages/console/src/assets/docs/guides/native-expo/README.mdx b/packages/console/src/assets/docs/guides/native-expo/README.mdx
@@ -5,11 +5,12 @@ 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 RedirectUrisNative, { defaultRedirectUri } from '../../fragments/_redirect-uris-native.mdx';
 
 <Steps>
 
 <Step
-  title="Installation"
+  title="Install SDK"
   subtitle="Install Logto SDK and peer dependencies"
 >
 
@@ -56,7 +57,7 @@ If you're installing this in a [bare React Native app](https://docs.expo.dev/bar
 
 Import and use `LogtoProvider` to provide a Logto context:
 
-<Code className="language-tsx">
+<Code className="language-tsx" title="App.tsx">
     {`import { LogtoProvider, LogtoConfig } from '@logto/rn';
 
 const config: LogtoConfig = {
@@ -73,16 +74,14 @@ const App = () => (
 
 </Step>
 
-<Step title="Implement sign-in and sign-out">
-
-Add a native redirect URI (for example, `io.logto://callback`), then click "Save".
+<Step title="Configure redirect URIs">
 
-<UriInputField name="redirectUris" />
+<RedirectUrisNative />
 
 - For iOS, the redirect URI scheme does not really matter since the `ASWebAuthenticationSession` class will listen to the redirect URI regardless of if it's registered.
 - For Android, the redirect URI scheme must be filled in Expo's `app.json` file, for example:
 
-  ```json
+  ```json title="app.json"
   {
     "expo": {
       "scheme": "io.logto"
@@ -98,7 +97,7 @@ The redirect URI is used to redirect the user back to your app after they sign i
 
 You can use `useLogto` hook to sign in and sign out:
 
-<Code className="language-tsx">
+<Code className="language-tsx" title="App.tsx">
     {`import { useLogto } from '@logto/rn';
 import { Button } from 'react-native';
 
@@ -111,7 +110,7 @@ const Content = () => {
         <Button title="Sign out" onPress={async () => signOut()} />
       ) : (
         <Button title="Sign in" onPress={async () => signIn('${
-          props.redirectUris[0] ?? 'io.logto://callback'
+          props.redirectUris[0] || defaultRedirectUri
         }')} />
       )}
     </div>
@@ -121,11 +120,17 @@ const Content = () => {
 
 </Step>
 
+<Step title="Checkpoint: Test your app">
+
+<Checkpoint />
+
+</Step>
+
 <Step title="Display user information">
 
 To display the user's information, you can use the `getIdTokenClaims()` method:
 
-<Code className="language-tsx">
+<Code className="language-tsx" title="App.tsx">
     {`import { useLogto } from '@logto/rn';
 import { Button, Text } from 'react-native';
 
@@ -136,43 +141,22 @@ const Content = () => {
   useEffect(() => {
     if (isAuthenticated) {
       getIdTokenClaims().then((claims) => {
-        setUser(claims);
+        setUser(claims); // { sub: '...', ... }
       });
     }
-  }, [isAuthenticated]);
+  }, [isAuthenticated, getIdTokenClaims]);
 
-  return (
-    <div>
-      {isAuthenticated ? (
-        <>
-          <Text>{user?.name}</Text>
-          <Text>{user?.email}</Text>
-          <Button title="Sign out" onPress={async () => signOut()} />
-        </>
-      ) : (
-        <Button title="Sign in" onPress={async () => signIn('${
-          props.redirectUris[0] ?? 'io.logto://callback'
-        }')} />
-      )}
-    </div>
-  );
+ // ...
 };`}
 </Code>
 
 </Step>
 
-<Step title="Checkpoint: Test your app">
-
-<Checkpoint />
-
-</Step>
-
 <Step title="Troubleshooting">
 
 For Expo projects, if you encounter the error `Unable to resolve "@logto/client/shim" from "node_modules/@logto/rn/lib/index.js"`, you can resolve it by adding the following to your `metro.config.js` file:
 
-```js
-// metro.config.js
+```js title="metro.config.js"
 const config = {
   // ...
   resolver: {