From c535d90ff139459a8a8e2ccfbca547b1b45d06b2 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Sat, 7 May 2022 17:13:29 +0800
Subject: [PATCH] docs: integrate iOS SDK (#748)

* docs: integrate iOS SDK

* fix: change title

* docs: remove unused import
---
 .../docs/tutorial/integrate-sdk/README.md     |  2 +-
 .../docs/docs/tutorial/integrate-sdk/ios.mdx  | 86 +++++++++++++++++++
 .../docs/tutorial/integrate-sdk/react.mdx     | 13 ++-
 3 files changed, 93 insertions(+), 8 deletions(-)
 create mode 100644 packages/docs/docs/tutorial/integrate-sdk/ios.mdx

diff --git a/packages/docs/docs/tutorial/integrate-sdk/README.md b/packages/docs/docs/tutorial/integrate-sdk/README.md
index 7dc6904ff..5820f817b 100644
--- a/packages/docs/docs/tutorial/integrate-sdk/README.md
+++ b/packages/docs/docs/tutorial/integrate-sdk/README.md
@@ -12,5 +12,5 @@ If the list doesn't cover your desired platform/framework, please file a feature
 
 ## Native
 
-- iOS
+- [iOS](./ios)
 - [Android](./android)
diff --git a/packages/docs/docs/tutorial/integrate-sdk/ios.mdx b/packages/docs/docs/tutorial/integrate-sdk/ios.mdx
new file mode 100644
index 000000000..bd66c6d31
--- /dev/null
+++ b/packages/docs/docs/tutorial/integrate-sdk/ios.mdx
@@ -0,0 +1,86 @@
+---
+sidebar_label: iOS
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Integrate Logto Swift SDK for iOS
+
+:::note
+This tutorial assumes you have created a Native App in Admin Console. If you are not ready, read this one before continuing.
+:::
+
+## Add Logto SDK as a Dependency
+
+Use the following URL to add Logto SDK as a dependency in Swift Package Manager.
+
+```bash
+https://github.com/logto-io/swift.git
+```
+
+Since Xcode 11, you can [directly import a swift package](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app) w/o any additional tool.
+
+We do not support **Carthage** and **CocoaPods** at the time due to some technical issues.
+
+<details>
+  <summary>Carthage</summary>
+  Carthage <a href="https://github.com/Carthage/Carthage/issues/1226#issuecomment-290931385">needs a `xcodeproj` file to build</a>, but `swift package generate-xcodeproj` will report a failure since we are using binary targets for native social plugins. We will try to find a workaround later.
+</details>
+
+<details>
+  <summary>CocoaPods</summary>
+  CocoaPods <a href="https://github.com/CocoaPods/CocoaPods/issues/3276">does not support local dependency</a> and monorepo, thus it's hard to create a `.podspec` for this repo.
+</details>
+
+## Init `LogtoClient`
+
+```swift
+import Logto
+
+let config = try? LogtoConfig(
+  endpoint: "<your-logto-endpoint>",
+  appId: "<your-application-id>"
+)
+let logtoClient = LogtoClient(useConfig: config)
+```
+
+By default, we store credentials like ID Token and Refresh Token in Keychain. Thus the user doesn't need to sign in again when he returns.
+
+To turn off this behavior, set `usingPersistStorage` to `false`:
+
+```swift
+let config = try? LogtoConfig(
+  // ...
+  usingPersistStorage: false
+)
+```
+
+## Sign In
+
+:::note
+Before calling `.signInWithBrowser(redirectUri:)`, make sure you have correctly [configured Redirect URI](https://logto.io) in Admin Console.
+:::
+
+```swift
+do {
+  try await client.signInWithBrowser(redirectUri: "<your-redirect-uri>")
+  print(client.isAuthenticated) // true
+} catch let error as LogtoClientErrors.SignIn {
+  // error occured during sign in
+}
+```
+
+## Sign Out
+
+```swift
+await client.signOut()
+```
+
+This will clean all the Logto data in Keychain, if it has.
+
+## Further Readings
+
+- [SDK Documentation](https://link-url-here.org)
+- [OIDC Documentation](https://link-url-here.org)
+- [Calling API to fetch accessToken](https://link-url-here.org)
diff --git a/packages/docs/docs/tutorial/integrate-sdk/react.mdx b/packages/docs/docs/tutorial/integrate-sdk/react.mdx
index 503f71638..55ff29b5a 100644
--- a/packages/docs/docs/tutorial/integrate-sdk/react.mdx
+++ b/packages/docs/docs/tutorial/integrate-sdk/react.mdx
@@ -2,8 +2,7 @@
 sidebar_label: React
 ---
 
-// Wait for AC update
-// import Step from '@components/Step';
+import Step from '@components/Step';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -67,14 +66,14 @@ pnpm build
 
 Add the following code to your main html file. You may need client ID and authorization domain.
 
-```typescript
+```tsx
 import { LogtoProvider, LogtoConfig } from '@logto/react';
 import React from 'react';
 
 //...
 
 const App = () => {
-  const config: LogtoConfig = { clientId: 'foo', endpoint: 'https://your-endpoint-domain.com' };
+  const config: LogtoConfig = { appId: '<your-application-id>', endpoint: '<your-logto-endpoint>' };
 
   return (
     <BrowserRouter>
@@ -115,7 +114,7 @@ The Logto React SDK provides you tools and hooks to quickly implement your own a
 
 Add the following code to your web app
 
-```typescript
+```tsx
 import React from 'react';
 import { useLogto } from '@logto/react';
 
@@ -131,7 +130,7 @@ export default SignInButton;
 
 ### Retrieve Auth Status
 
-```typescript
+```tsx
 import React from "react";
 import { useLogto } from '@logto/react';
 
@@ -165,7 +164,7 @@ Execute signOut() methods will redirect users to the Logto sign out page. After
 
 Add the following code to your web app
 
-```typescript
+```tsx
 import React from 'react';
 import { useLogto } from '@logto/react';