refactor(console): update swift guide (#6123)

packages/console/src/assets/docs/fragments/_redirect_uris.mdx → packages/console/src/assets/docs/fragments/_experience-overview.md

@@ -1,6 +1,3 @@
-import InlineNotification from '@/ds-components/InlineNotification';
-import UriInputField from '@/mdx-components/UriInputField';
-
 Before we dive into the details, here's a quick overview of the end-user experience. The sign-in process can be simplified as follows:
 
 ```mermaid
@@ -21,15 +18,3 @@ Regarding redirect-based sign-in:
 To learn more about the rationale and benefits of redirect-based sign-in, see [Logto sign-in experience explained](https://docs.logto.io/docs/tutorials/get-started/sign-in-experience).
 
 ---
-
-<InlineNotification>
-  In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
-</InlineNotification>
-
-Now, let's enter your redirect URI. E.g. {`${props.callbackUri ?? 'http://localhost:3000/callback'}`}.
-
-<UriInputField name="redirectUris" />
-
-Just like signing in, users should be redirected to Logto for signing out of the shared session. Once finished, it would be great to redirect the user back to your website. For example, add `http://localhost:3000` as the post sign-out redirect URI below.
-
-<UriInputField name="postLogoutRedirectUris" />

packages/console/src/assets/docs/fragments/_redirect-uris-native.mdx

@@ -0,0 +1,10 @@
+import InlineNotification from '@/ds-components/InlineNotification';
+import UriInputField from '@/mdx-components/UriInputField';
+
+import ExperienceOverview from './_experience-overview.md';
+
+<ExperienceOverview />
+
+Now, let's configure your redirect URI. E.g. {`${props.defaultUri ?? 'http://localhost:3000/callback'}`}.
+
+<UriInputField name="redirectUris" />

packages/console/src/assets/docs/fragments/_redirect-uris-web.mdx

@@ -0,0 +1,18 @@
+import InlineNotification from '@/ds-components/InlineNotification';
+import UriInputField from '@/mdx-components/UriInputField';
+
+import ExperienceOverview from './_experience-overview.md';
+
+<ExperienceOverview />
+
+<InlineNotification>
+  In the following steps, we assume your app is running on <code>http://localhost:3000</code>.
+</InlineNotification>
+
+Now, let's configure your redirect URI. E.g. {`${props.defaultUri ?? 'http://localhost:3000/callback'}`}.
+
+<UriInputField name="redirectUris" />
+
+Just like signing in, users should be redirected to Logto for signing out of the shared session. Once finished, it would be great to redirect the user back to your website. For example, add `http://localhost:3000` as the post sign-out redirect URI below.
+
+<UriInputField name="postLogoutRedirectUris" />

packages/console/src/assets/docs/guides/native-ios-swift/README.mdx

@@ -4,6 +4,8 @@ import TabItem from '@mdx/components/TabItem';
 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 from '../../fragments/_redirect-uris-native.mdx';
 
 <Steps>
 
@@ -44,6 +46,8 @@ CocoaPods [does not support local dependency](https://github.com/CocoaPods/Cocoa
   subtitle="1 step"
 >
 
+You can initialize `LogtoClient` in a proper place of your app that can be accessed globally:
+
 <Code className="language-swift">
     {`import Logto
 import LogtoClient
@@ -68,50 +72,93 @@ let config = try? LogtoConfig(
 
 </Step>
 
-<Step
-  title="Sign in"
-  subtitle="2 steps"
->
-
-### Configure Redirect URI
+<Step title="Configure redirect URI">
 
-First, let’s configure your redirect URI scheme. E.g. `io.logto://callback`
-
-<UriInputField name="redirectUris" />
+<RedirectUrisNative />
 
 <InlineNotification>
-  The Redirect URI in iOS SDK is only for internal use. There's <em>NO NEED</em> to add a{' '}
-  <a href="https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app">
-    Custom URL Scheme
-  </a>{' '}
-  until a connector asks.
+  The Redirect URI in iOS SDK is only for internal use. There's <em>NO NEED</em> to add a [Custom URL Scheme](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) until a connector asks.
 </InlineNotification>
 
-Go back to Xcode, use the following code to implement sign-in:
+</Step>
 
-<Code className="language-swift">
-    {`do {
-  try await client.signInWithBrowser(redirectUri: "${
-    props.redirectUris[0] ?? 'io.logto://callback'
-  }")
-  print(client.isAuthenticated) // true
-} catch let error as LogtoClientErrors.SignIn {
-  // error occured during sign in
+<Step title="Implement sign-in and sign-out">
+
+You can use `client.signInWithBrowser(redirectUri:)` to sign in the user and `client.signOut()` to sign out the user.
+
+For example, in a SwiftUI app:
+
+<Code title="ContentView.swift" className="language-swift">
+    {`struct ContentView: View {
+  @State var isAuthenticated: Bool
+
+  init() {
+    isAuthenticated = client.isAuthenticated
+  }
+
+  var body: some View {
+    VStack {
+      if isAuthenticated {
+        Button("Sign Out") {
+          Task { [self] in
+            await client.signOut()
+            isAuthenticated = false
+          }
+        }
+      } else {
+        Button("Sign In") {
+          Task { [self] in
+            do {
+              try await client.signInWithBrowser(redirectUri: "${
+                props.redirectUris[0] ?? 'io.logto://callback'
+              }")
+              isAuthenticated = true
+            } catch let error as LogtoClientErrors.SignIn {
+              // error occured during sign in
+            } catch {
+              // other errors
+            }
+          }
+        }
+      }
+    }
+  }
 }`}
 </Code>
 
 </Step>
 
-<Step
-  title="Sign out"
-  subtitle="1 step"
->
+<Step title="Checkpoint: Test your app">
 
-Calling `.signOut()` will clean all the Logto data in Keychain, if they exist.
+<Checkpoint />
 
-```swift
-await client.signOut()
-```
+</Step>
+
+<Step title="Display user information">
+
+To display the user's information, you can use the `client.getIdTokenClaims()` method. For example, in a SwiftUI app:
+
+<Code title="ContentView.swift" className="language-swift">
+    {`struct ContentView: View {
+  @State var isAuthenticated: Bool
+  @State var name: String?
+
+  init() {
+    isAuthenticated = client.isAuthenticated
+    name = try? client.getIdTokenClaims().name
+  }
+
+  var body: some View {
+    VStack {
+      if isAuthenticated {
+        Text("Welcome, \(name)")
+      } else {
+        Text("Please sign in")
+      }
+    }
+  }
+}`}
+</Code>
 
 </Step>
 

packages/console/src/assets/docs/guides/native-ios-swift/index.ts

@@ -10,6 +10,7 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     repo: 'swift',
     path: 'Demos/SwiftUI%20Demo',
   },
+  fullGuide: 'swift',
 });
 
 export default metadata;

packages/console/src/assets/docs/guides/web-next-app-router/README.mdx

@@ -4,7 +4,7 @@ import { generateStandardSecret } from '@logto/shared/universal';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
 import Checkpoint from '../../fragments/_checkpoint.md';
-import RedirectUris from '../../fragments/_redirect_uris.mdx';
+import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
 
 <Steps>
 
@@ -84,7 +84,7 @@ export async function GET(request: NextRequest) {
   subtitle="2 URIs"
 >
 
-<RedirectUris />
+<RedirectUrisWeb />
 
 </Step>
 

packages/console/src/assets/docs/guides/web-next/README.mdx

@@ -4,7 +4,7 @@ import { generateStandardSecret } from '@logto/shared/universal';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
 import Checkpoint from '../../fragments/_checkpoint.md';
-import RedirectUris from '../../fragments/_redirect_uris.mdx';
+import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
 
 <Steps>
 
@@ -85,7 +85,7 @@ This will create 4 routes automatically:
   subtitle="2 URIs"
 >
 
-<RedirectUris callbackUri="http://localhost:3000/api/logto/sign-in-callback" />
+<RedirectUrisWeb defaultUri="http://localhost:3000/api/logto/sign-in-callback" />
 
 </Step>
 

packages/console/src/assets/docs/guides/web-nuxt/README.mdx

@@ -5,7 +5,7 @@ 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 RedirectUris from '../../fragments/_redirect_uris.mdx';
+import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
 import { generateStandardSecret } from '@logto/shared/universal';
 
 export const cookieEncryptionKey = generateStandardSecret();
@@ -84,7 +84,7 @@ See [runtime config](https://nuxt.com/docs/guide/going-further/runtime-config) f
   subtitle="2 URIs"
 >
 
-<RedirectUris />
+<RedirectUrisWeb />
 
 When registering `@logto/nuxt` module, it will do the following:
 

packages/console/src/assets/docs/guides/web-ruby/README.mdx

@@ -1,7 +1,7 @@
 import UriInputField from '@/mdx-components/UriInputField';
 import InlineNotification from '@/ds-components/InlineNotification';
 import { generateStandardSecret } from '@logto/shared/universal';
-import RedirectUris from '../../fragments/_redirect_uris.mdx';
+import RedirectUrisWeb from '../../fragments/_redirect-uris-web.mdx';
 import Checkpoint from '../../fragments/_checkpoint.md';
 import Steps from '@/mdx-components/Steps';
 import Step from '@/mdx-components/Step';
@@ -82,7 +82,7 @@ end`}
   subtitle="2 URIs"
 >
 
-<RedirectUris />
+<RedirectUrisWeb />
 
 </Step>
 

packages/console/src/assets/docs/guides/web-ruby/index.ts

@@ -12,6 +12,7 @@ const metadata: Readonly<GuideMetadata> = Object.freeze({
     repo: 'ruby',
     path: 'logto-sample',
   },
+  fullGuide: 'ruby',
 });
 
 export default metadata;