docs: android sdk integration guide (#711)

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

@@ -0,0 +1,4 @@
+{
+  "label": "Android",
+  "position": 1.1
+}

packages/docs/docs/tutorial/integrate-sdk/android/index.mdx

@@ -0,0 +1,285 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Integrate `io.logto.sdk:android`
+
+<Step
+  title="Install SDK"
+  subtitle="Install Logto Android SDK with Gradle"
+  index={0}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(1)}
+>
+
+## Step1: Install Logto Android SDK with Gradle
+
+### Prerequisite
+* Minimal Android SDK: Level 24 (TBD)
+
+<Tabs>
+
+<TabItem value="kotlin" label="Kotlin">
+
+```kotlin
+dependencies {
+	implementation("io.logto.sdk:android:1.0.0")
+}
+```
+
+</TabItem>
+
+<TabItem value="groovy" label="Groovy">
+
+```groovy
+dependencies {
+	implementation 'io.logto.sdk:android:1.0.0'
+}
+```
+
+</TabItem>
+
+</Tabs>
+
+</Step>
+
+<Step
+  title="Configure"
+  subtitle="Configure your application and LogtoClient"
+  index={1}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(2)}
+>
+
+## Step2: Configure
+
+### 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
+
+<Tabs>
+
+<TabItem value="kotlin" label="Kotlin">
+
+```kotlin
+import io.logto.sdk.android.LogtoClient
+import io.logto.sdk.android.type.LogtoConfig
+
+class MainActivity : AppCompatActivity() {
+		val logtoConfig = LogtoConfig(
+            endpoint = "<your-logto-endpoint>",
+            appId = "<your-app-id>",
+            scopes = null,
+            resources = null,
+            usingPersistStorage = true,
+        )
+
+		val logtoClient = LogtoClient(logtoConfig, application)
+}
+```
+
+</TabItem>
+
+<TabItem value="java" label="Java">
+
+```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(
+                "<your-logto-endpoint>",
+                "<your-app-id>",
+                null,
+                null,
+                true
+		    );
+	
+			logtoClient = new LogtoClient(logtoConfig, getApplication());
+    }
+}
+```
+
+</TabItem>
+
+</Tabs>
+
+Notes: 
+
+- `<your-logto-endpoint>` is the logto service running in your machine. If you start logto service in `http://localhost:300` then `<your-logto-endpoint` will be `http://localhost:300`
+- `<your-app-id>` is the Application ID of your application, which is created in the Admin Console.
+
+</Step>
+
+<Step
+  title="Sign In"
+  subtitle="Sin In to your application by Logto and do some extra works"
+  index={2}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(3)}
+>
+
+## Step3: Sign In
+
+
+### Perform a signing-in action
+
+<Tabs>
+
+<TabItem value="kotlin" label="Kotlin">
+
+```kotlin
+logtoClient.signInWithBrowser(
+    this,
+    "io.logto.android://io.logto.sample/callback",
+) { logtoException: LogtoException? ->
+    // custom logic
+}
+```
+
+</TabItem>
+
+<TabItem value="java" label="Java">
+
+```java
+logtoClient.signInWithBrowser(
+    this,
+    "io.logto.android://io.logto.sample/callback",
+    logtoException -> {
+        // custom logic
+    }
+);
+```
+
+</TabItem>
+
+</Tabs>
+
+### Implement your business logic after signing-in.
+
+<Tabs>
+
+<TabItem value="kotlin" label="Kotlin">
+
+```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
+}
+```
+
+</TabItem>
+
+<TabItem value="java" label="Java">
+
+```java
+logtoClient.getAccessToken((logtoException, accessToken) -> {
+	// custom logic
+});
+
+logtoClient.getIdTokenClaims((logtoException, idTokenClaims) -> {
+    // custom logic
+});
+
+logtoClient.fetchUserInfo((logtoException, userInfoResponse) -> {
+    // custom logic
+});
+```
+
+</TabItem>
+
+</Tabs>
+
+</Step>
+
+<Step
+  title="Sign Out"
+  index={3}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(4)}
+>
+
+## Step4: Sign Out
+
+### Perform a signing-out action
+
+<Tabs>
+
+<TabItem value="kotlin" label="Kotlin">
+
+```kotlin
+logtoClient.signOut { logtoException: LogtoException? ->
+	// custom logic
+}
+```
+
+</TabItem>
+
+<TabItem value="java" label="Java">
+
+```java
+logtoClient.signOut(logtoException -> {
+    // custom logic
+});
+```
+
+</TabItem>
+
+</Tabs>
+
+Notes:
+
+- `signOut` will always clear local credentials even if errors occurred.
+
+</Step>
+
+<Step
+  title="Further Readings"
+  subtitle="3 steps"
+  index={4}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  buttonText="general.done"
+  buttonHtmlType="submit"
+>
+
+## Step5: Further Readings
+
+- Fetch User Info
+- Configure Social Sign-In
+- Access Protected API Resources
+
+</Step>

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

@@ -1,3 +1,4 @@
 {
-  "label": "React"
+  "label": "React",
+  "position": 1.1
 }

packages/docs/docusaurus.config.js

@@ -104,7 +104,7 @@ const config = {
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
-        additionalLanguages: ['swift'],
+        additionalLanguages: ['swift', 'kotlin', 'groovy', 'java'],
       },
     }),
 };