diff --git a/.gitignore b/.gitignore
index 302bee1a0..9132715ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,9 +17,6 @@ node_modules
/packages/*/lib
/packages/*/dist
-# docs copied to admin console
-/packages/console/**/*.mdx
-
# logs
logs
*.log*
diff --git a/packages/console/package.json b/packages/console/package.json
index 8836997b0..11ec09e30 100644
--- a/packages/console/package.json
+++ b/packages/console/package.json
@@ -8,11 +8,10 @@
"scripts": {
"preinstall": "npx only-allow pnpm",
"precommit": "lint-staged",
- "copyfiles": "copyfiles -u 2 \"../docs/**/*.mdx\" src/assets",
- "start": "pnpm copyfiles && parcel src/index.html",
- "dev": "pnpm copyfiles && PORT=5002 parcel src/index.html --public-url /console --no-cache --hmr-port 6002",
+ "start": "parcel src/index.html",
+ "dev": "PORT=5002 parcel src/index.html --public-url /console --no-cache --hmr-port 6002",
"check": "tsc --noEmit",
- "build": "pnpm check && rm -rf dist && pnpm copyfiles && parcel build src/index.html --no-autoinstall --no-cache --public-url /console",
+ "build": "pnpm check && rm -rf dist && parcel build src/index.html --no-autoinstall --no-cache --public-url /console",
"lint": "eslint --ext .ts --ext .tsx src",
"lint:report": "pnpm lint --format json --output-file report.json",
"stylelint": "stylelint \"src/**/*.scss\""
@@ -39,7 +38,6 @@
"@types/react-dom": "^17.0.9",
"@types/react-modal": "^3.13.1",
"classnames": "^2.3.1",
- "copyfiles": "^2.4.1",
"csstype": "^3.0.11",
"dayjs": "^1.10.5",
"dnd-core": "^16.0.0",
@@ -74,8 +72,7 @@
},
"alias": {
"@/*": "./src/$1",
- "@theme/*": "./src/mdx-components/$1",
- "@components/*": "./src/pages/Guide/components/$1"
+ "@mdx/components/*": "./src/mdx-components/$1"
},
"eslintConfig": {
"extends": "@silverhand/react"
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
new file mode 100644
index 000000000..88c6d82aa
--- /dev/null
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
@@ -0,0 +1,273 @@
+import Step from '@mdx/components/Step';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+
+ props.onNext(1)}
+>
+
+### Prerequisite
+* Minimal Android SDK: Level 24 (TBD)
+
+
+
+
+
+```kotlin
+dependencies {
+ implementation("io.logto.sdk:android:1.0.0")
+}
+```
+
+
+
+
+
+```groovy
+dependencies {
+ implementation 'io.logto.sdk:android:1.0.0'
+}
+```
+
+
+
+
+
+
+
+ props.onNext(2)}
+>
+
+### Configure Redirect URI
+
+The `Redirect URI` indicates the endpoint that the application used to receive authorization results, which is implemented by the Logto Android SDK internally.
+
+### Configure Redirect URI in Admin Console
+
+Add the following value to Redirect URIs on the application settings page.
+
+```bash
+$(LOGTO_REDIRECT_SCHEME)://$(YOUR_APP_PACKAGE)/callback
+```
+
+Notes:
+- `LOGTO_REDIRECT_SCHEME` should be a custom scheme in the reverse domain format.
+- Replace `$(LOGTO_REDIRECT_SCHEME)` with your own settings.
+
+e.g. `io.logto.android://io.logto.sample/callback`
+
+### Configure Logto Android SDK
+
+
+
+
+
+```kotlin
+import io.logto.sdk.android.LogtoClient
+import io.logto.sdk.android.type.LogtoConfig
+
+class MainActivity : AppCompatActivity() {
+ val logtoConfig = LogtoConfig(
+ endpoint = "",
+ appId = "",
+ scopes = null,
+ resources = null,
+ usingPersistStorage = true,
+ )
+
+ val logtoClient = LogtoClient(logtoConfig, application)
+}
+```
+
+
+
+
+
+```java
+import io.logto.sdk.android.LogtoClient;
+import io.logto.sdk.android.type.LogtoConfig;
+
+public class MainActivity extends AppCompatActivity {
+ private LogtoClient logtoClient;
+
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+ super.onCreate(savedInstanceState);
+ setContentView(R.layout.activity_main);
+
+ LogtoConfig logtoConfig = new LogtoConfig(
+ "",
+ "",
+ null,
+ null,
+ true
+ );
+
+ logtoClient = new LogtoClient(logtoConfig, getApplication());
+ }
+}
+```
+
+
+
+
+
+Notes:
+
+- `` is the logto service running in your machine. If you start logto service in `http://localhost:300` then `` is the Application ID of your application, which is created in the Admin Console.
+
+
+
+ props.onNext(3)}
+>
+
+### Perform a signing-in action
+
+
+
+
+
+```kotlin
+logtoClient.signInWithBrowser(
+ this,
+ "io.logto.android://io.logto.sample/callback",
+) { logtoException: LogtoException? ->
+ // custom logic
+}
+```
+
+
+
+
+
+```java
+logtoClient.signInWithBrowser(
+ this,
+ "io.logto.android://io.logto.sample/callback",
+ logtoException -> {
+ // custom logic
+ }
+);
+```
+
+
+
+
+
+### Implement your business logic after signing-in.
+
+
+
+
+
+```kotlin
+logtoClient.getAccessToken { logtoException: LogtoException?, result: AccessToken? ->
+ // custom logic
+}
+
+logtoClient.getIdTokenClaims { logtoException: LogtoException?, result: IdTokenCliams? ->
+ // custom logic
+}
+
+logtoClient.fetchUserInfo { logtoException: LogtoException?, userInfoResponse: UserInfoResponse? ->
+ // custom logic
+}
+```
+
+
+
+
+
+```java
+logtoClient.getAccessToken((logtoException, accessToken) -> {
+ // custom logic
+});
+
+logtoClient.getIdTokenClaims((logtoException, idTokenClaims) -> {
+ // custom logic
+});
+
+logtoClient.fetchUserInfo((logtoException, userInfoResponse) -> {
+ // custom logic
+});
+```
+
+
+
+
+
+
+
+ props.onNext(4)}
+>
+
+### Perform a signing-out action
+
+
+
+
+
+```kotlin
+logtoClient.signOut { logtoException: LogtoException? ->
+ // custom logic
+}
+```
+
+
+
+
+
+```java
+logtoClient.signOut(logtoException -> {
+ // custom logic
+});
+```
+
+
+
+
+
+Notes:
+
+- `signOut` will always clear local credentials even if errors occurred.
+
+
+
+
+
+- Fetch User Info
+- Configure Social Sign-In
+- Access Protected API Resources
+
+
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
new file mode 100644
index 000000000..24807d7f4
--- /dev/null
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
@@ -0,0 +1,190 @@
+import MultiTextInputField from '@mdx/components/MultiTextInputField';
+import Step from '@mdx/components/Step';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+
+ props.onNext(1)}
+>
+
+
+
+```bash
+npm i @logto/react
+```
+
+
+
+
+```bash
+yarn add @logto/react
+```
+
+
+
+
+```bash
+pnpm add @logto/react
+```
+
+
+
+
+```html
+
+```
+
+
+
+
+```bash
+git clone https://github.com/logto-io/js.git
+pnpm build
+```
+
+
+
+
+ props.onNext(2)}
+>
+
+Add the following code to your main html file. You may need client ID and authorization domain.
+
+```typescript
+import { LogtoProvider, LogtoConfig } from '@logto/react';
+import React from 'react';
+
+//...
+
+const App = () => {
+ const config: LogtoConfig = { clientId: 'foo', endpoint: 'https://your-endpoint-domain.com' };
+
+ return (
+
+
+
+ } />
+ } />
+
+
+
+ }
+ />
+
+
+
+ );
+};
+```
+
+
+ props.onNext(3)}
+>
+
+### 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
+
+ props.onError(2)} />
+
+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 ;
+};
+
+export default SignInButton;
+```
+
+### Retrieve Auth Status
+
+```typescript
+import React from "react";
+import { useLogto } from '@logto/react';
+
+const App = () => {
+ const { isAuthenticated, signIn } = useLogto();
+
+ if !(isAuthenticated) {
+ return
+ }
+
+ return <>
+
+
+
+};
+```
+
+
+ props.onNext(4)}
+>
+
+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.
+
+ props.onError(3)} />
+
+Add the following code to your web app
+
+```typescript
+import React from 'react';
+import { useLogto } from '@logto/react';
+
+const SignOutButton = () => {
+ const { signOut } = useLogto();
+
+ return ;
+};
+
+export default SignOutButton;
+```
+
+
+
+
+- [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/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
new file mode 100644
index 000000000..c1fdf17eb
--- /dev/null
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
@@ -0,0 +1,190 @@
+import MultiTextInputField from '@mdx/components/MultiTextInputField';
+import Step from '@mdx/components/Step';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+
+ props.onNext(1)}
+>
+
+
+
+```bash
+npm i @logto/react
+```
+
+
+
+
+```bash
+yarn add @logto/react
+```
+
+
+
+
+```bash
+pnpm add @logto/react
+```
+
+
+
+
+```html
+
+```
+
+
+
+
+```bash
+git clone https://github.com/logto-io/js.git
+pnpm build
+```
+
+
+
+
+ props.onNext(2)}
+>
+
+在项目的 html 文件中，加入如下代码（需提前准备好 client ID 以及 authorization domain）
+Add the following code to your main html file. You may need client ID and authorization domain.
+
+```typescript
+import { LogtoProvider, LogtoConfig } from '@logto/react';
+import React from 'react';
+
+//...
+
+const App = () => {
+ const config: LogtoConfig = { clientId: 'foo', endpoint: 'https://your-endpoint-domain.com' };
+
+ return (
+
+
+
+ } />
+ } />
+
+
+
+ }
+ />
+
+
+
+ );
+};
+```
+
+
+ props.onNext(3)}
+>
+
+### 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
+
+ props.onError(2)} />
+
+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 ;
+};
+
+export default SignInButton;
+```
+
+### Retrieve Auth Status
+
+```typescript
+import React from "react";
+import { useLogto } from '@logto/react';
+
+const App = () => {
+ const { isAuthenticated, signIn } = useLogto();
+
+ if !(isAuthenticated) {
+ return
+ }
+
+ return <>
+
+
+
+};
+```
+
+
+ props.onNext(4)}
+>
+
+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.
+
+ props.onError(3)} />
+
+Add the following code to your web app
+
+```typescript
+import React from 'react';
+import { useLogto } from '@logto/react';
+
+const SignOutButton = () => {
+ const { signOut } = useLogto();
+
+ return ;
+};
+
+export default SignOutButton;
+```
+
+
+
+
+- [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/console/src/pages/Guide/components/MultiTextInputField/index.tsx b/packages/console/src/mdx-components/MultiTextInputField/index.tsx
similarity index 100%
rename from packages/console/src/pages/Guide/components/MultiTextInputField/index.tsx
rename to packages/console/src/mdx-components/MultiTextInputField/index.tsx
diff --git a/packages/console/src/pages/Guide/components/Step/index.module.scss b/packages/console/src/mdx-components/Step/index.module.scss
similarity index 100%
rename from packages/console/src/pages/Guide/components/Step/index.module.scss
rename to packages/console/src/mdx-components/Step/index.module.scss
diff --git a/packages/console/src/pages/Guide/components/Step/index.tsx b/packages/console/src/mdx-components/Step/index.tsx
similarity index 100%
rename from packages/console/src/pages/Guide/components/Step/index.tsx
rename to packages/console/src/mdx-components/Step/index.tsx
diff --git a/packages/console/src/pages/Connectors/components/GuideModal/index.tsx b/packages/console/src/pages/Connectors/components/GuideModal/index.tsx
index 89430e1f4..16a4346d4 100644
--- a/packages/console/src/pages/Connectors/components/GuideModal/index.tsx
+++ b/packages/console/src/pages/Connectors/components/GuideModal/index.tsx
@@ -15,8 +15,8 @@ import IconButton from '@/components/IconButton';
import Spacer from '@/components/Spacer';
import useApi from '@/hooks/use-api';
import Close from '@/icons/Close';
+import Step from '@/mdx-components/Step';
import SenderTester from '@/pages/ConnectorDetails/components/SenderTester';
-import Step from '@/pages/Guide/components/Step';
import * as modalStyles from '@/scss/modal.module.scss';
import { GuideForm } from '@/types/guide';
diff --git a/packages/console/src/pages/Guide/index.tsx b/packages/console/src/pages/Guide/index.tsx
index 67a7746be..0066812f5 100644
--- a/packages/console/src/pages/Guide/index.tsx
+++ b/packages/console/src/pages/Guide/index.tsx
@@ -27,12 +27,7 @@ import * as styles from './index.module.scss';
const Guides: Record JSX.Element>> = {
react: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react.mdx')),
- 'react_zh-cn': lazy(
- async () =>
- import(
- '@/assets/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/react.mdx'
- )
- ),
+ 'react_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx')),
};
type Props = PropsWithChildren<{
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index abf47cf0f..178b62e5b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -456,7 +456,6 @@ importers:
'@types/react-dom': ^17.0.9
'@types/react-modal': ^3.13.1
classnames: ^2.3.1
- copyfiles: ^2.4.1
csstype: ^3.0.11
dayjs: ^1.10.5
dnd-core: ^16.0.0
@@ -510,7 +509,6 @@ importers:
'@types/react-dom': 17.0.11
'@types/react-modal': 3.13.1
classnames: 2.3.1
- copyfiles: 2.4.1
csstype: 3.0.11
dayjs: 1.10.7
dnd-core: 16.0.0