feat(docs): init React SDK tutorial (#516)

packages/docs/docs/integrate-sdk/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Integrate SDK"
+}

packages/docs/docs/integrate-sdk/react/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "React"
+}

packages/docs/docs/integrate-sdk/react/_step-1.mdx

@@ -0,0 +1,43 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## Install SDK
+
+_Option 1: Install your SDK dependency_
+
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash
+npm i @logto/react
+```
+
+</TabItem>
+<TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @logto/react
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @logto/react
+```
+
+</TabItem>
+</Tabs>
+
+_Option 2: Add script tag to your HTML_
+
+```html
+<script src="https://logto.io/js/logto-sdk-react/0.1.0/logto-sdk-react.production.js" />
+```
+
+_Option 3: Fork your own from GitHub_
+
+```bash
+git clone https://github.com/logto-io/js.git
+pnpm build
+```

packages/docs/docs/integrate-sdk/react/_step-2.md

@@ -0,0 +1,33 @@
+## Initiate LogtoClient
+
+Add the following code to your main html file. You may need client ID and authorization domain.
+
+```tsx
+import { LogtoProvider, LogtoConfig } from '@logto/react';
+import React from '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>
+  );
+};
+```

packages/docs/docs/integrate-sdk/react/_step-3.md

@@ -0,0 +1,45 @@
+## Sign In
+
+### Setup your login
+
+The Logto React SDK provides you tools and hooks to quickly implement your own authorization flow.  First, let’s enter your redirect URI
+
+```redirectUris
+Redirect URI
+```
+
+Add the following code to your web app
+
+```typescript
+import React from "react";
+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 React from "react";
+import { useLogto } from '@logto/react';
+
+const App = () => {
+	const { isAuthenticated, signIn } = useLogto();
+
+  if !(isAuthenticated) {
+		return <SignInButton />
+  }
+
+	return <>
+		<AppContent />
+		<SignOutButton />
+	</>
+};
+```

packages/docs/docs/integrate-sdk/react/_step-4.md

@@ -0,0 +1,24 @@
+## Sign Out
+
+Execute signOut() methods will redirect users to the Logto sign out page. After a success sign out, all use session data and auth status will be cleared. 
+
+```postLogoutRedirectUris
+Post sign out redirect URI
+```
+
+Add the following code to your web app
+
+```tsx
+import React from "react";
+import { useLogto } from '@logto/react';
+
+const SignOutButton = () => {
+  const { signOut } = useLogto();
+
+  return (
+    <button onClick={() => signOut(window.location.origin)}>Sign out</button>
+  );
+};
+
+export default SignOutButton;
+```

packages/docs/docs/integrate-sdk/react/_step-5.md

@@ -0,0 +1,5 @@
+## 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)

packages/docs/docs/integrate-sdk/react/index.mdx

@@ -0,0 +1,13 @@
+import Step1 from './_step-1.mdx'
+import Step2 from './_step-2.md'
+import Step3 from './_step-3.md'
+import Step4 from './_step-4.md'
+import Step5 from './_step-5.md'
+
+# Integrate `@logto/react`
+
+<Step1 />
+<Step2 />
+<Step3 />
+<Step4 />
+<Step5 />

packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current.json

@@ -0,0 +1,10 @@
+{
+  "version.label": {
+    "message": "下一个",
+    "description": "The label for version current"
+  },
+  "sidebar.tutorialSidebar.category.Integrate SDK": {
+    "message": "集成 SDK",
+    "description": "The label for category Integrate SDK in sidebar tutorialSidebar"
+  }
+}

packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/integrate-sdk/react/_step-1.mdx

@@ -0,0 +1,43 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## 安装 Logto SDK
+
+_方案 1: 安装 SDK 依赖包_
+
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash
+npm i @logto/react
+```
+
+</TabItem>
+<TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @logto/react
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @logto/react
+```
+
+</TabItem>
+</Tabs>
+
+_方案 2: Add script tag to your HTML_
+
+```html
+<script src="https://logto.io/js/logto-sdk-react/0.1.0/logto-sdk-react.production.js" />
+```
+
+_方案 3: Fork your own from GitHub_
+
+```bash
+git clone https://github.com/logto-io/js.git
+pnpm build
+```

packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/integrate-sdk/react/_step-2.md

@@ -0,0 +1,33 @@
+## 初始化 LogtoClient
+
+Add the following code to your main html file. You may need client ID and authorization domain.
+
+```tsx
+import { LogtoProvider, LogtoConfig } from '@logto/react';
+import React from '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>
+  );
+};
+```

packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/integrate-sdk/react/_step-3.md

@@ -0,0 +1,45 @@
+## 登录
+
+### Setup your login
+
+The Logto React SDK provides you tools and hooks to quickly implement your own authorization flow.  First, let’s enter your redirect URI
+
+```redirectUris
+Redirect URI
+```
+
+Add the following code to your web app
+
+```tsx
+import React from "react";
+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 React from "react";
+import { useLogto } from '@logto/react';
+
+const App = () => {
+	const { isAuthenticated, signIn } = useLogto();
+
+  if !(isAuthenticated) {
+		return <SignInButton />
+  }
+
+	return <>
+		<AppContent />
+		<SignOutButton />
+	</>
+};
+```

packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/integrate-sdk/react/_step-4.md

@@ -0,0 +1,24 @@
+## 登出
+
+Execute signOut() methods will redirect users to the Logto sign out page. After a success sign out, all use session data and auth status will be cleared. 
+
+```postLogoutRedirectUris
+Post sign out redirect URI
+```
+
+Add the following code to your web app
+
+```tsx
+import React from "react";
+import { useLogto } from '@logto/react';
+
+const SignOutButton = () => {
+  const { signOut } = useLogto();
+
+  return (
+    <button onClick={() => signOut(window.location.origin)}>Sign out</button>
+  );
+};
+
+export default SignOutButton;
+```

packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/integrate-sdk/react/_step-5.md

@@ -0,0 +1,5 @@
+## 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)

packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/integrate-sdk/react/index.mdx

@@ -0,0 +1,13 @@
+import Step1 from './_step-1.mdx'
+import Step2 from './_step-2.md'
+import Step3 from './_step-3.md'
+import Step4 from './_step-4.md'
+import Step5 from './_step-5.md'
+
+# 集成 `@logto/react`
+
+<Step1 />
+<Step2 />
+<Step3 />
+<Step4 />
+<Step5 />