From 6d1013e573121f6137c5d327341e80a38966147f Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Thu, 15 Jun 2023 15:25:09 +0800
Subject: [PATCH] feat(console): add alternative endpoint for application get
 started guide (#4039)

---
 .../docs/tutorial/integrate-sdk/android.mdx     |  4 ++--
 .../tutorial/integrate-sdk/android_zh-cn.mdx    |  4 ++--
 .../docs/tutorial/integrate-sdk/express.mdx     |  2 +-
 .../tutorial/integrate-sdk/express_zh-cn.mdx    |  2 +-
 .../assets/docs/tutorial/integrate-sdk/go.mdx   |  2 +-
 .../docs/tutorial/integrate-sdk/go_zh-cn.mdx    |  2 +-
 .../assets/docs/tutorial/integrate-sdk/ios.mdx  |  2 +-
 .../docs/tutorial/integrate-sdk/ios_zh-cn.mdx   |  2 +-
 .../assets/docs/tutorial/integrate-sdk/next.mdx |  2 +-
 .../docs/tutorial/integrate-sdk/next_zh-cn.mdx  |  2 +-
 .../docs/tutorial/integrate-sdk/react.mdx       |  2 +-
 .../docs/tutorial/integrate-sdk/react_zh-cn.mdx |  2 +-
 .../docs/tutorial/integrate-sdk/vanilla.mdx     |  2 +-
 .../tutorial/integrate-sdk/vanilla_zh-cn.mdx    |  2 +-
 .../assets/docs/tutorial/integrate-sdk/vue.mdx  |  2 +-
 .../docs/tutorial/integrate-sdk/vue_zh-cn.mdx   |  2 +-
 .../Applications/components/Guide/index.tsx     | 17 +++++++++++++----
 17 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
index 0eec82bf7..514c3dd92 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
@@ -69,7 +69,7 @@ import io.logto.sdk.android.type.LogtoConfig
 
 class MainActivity : AppCompatActivity() {
     val logtoConfig = LogtoConfig(
-        endpoint = "${props.endpoint}",
+        endpoint = "${props.endpoint}",${props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''}
         appId = "${props.appId}",
         scopes = null,
         resources = null,
@@ -99,7 +99,7 @@ public class MainActivity extends AppCompatActivity {
         setContentView(R.layout.activity_main);
 
         LogtoConfig logtoConfig = new LogtoConfig(
-            "${props.endpoint}",
+            "${props.endpoint}",${props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''}
             "${props.appId}",
             null,
             null,
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
index 9f6bb984d..dd3fccd0e 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
@@ -71,7 +71,7 @@ import io.logto.sdk.android.type.LogtoConfig
 
 class MainActivity : AppCompatActivity() {
     val logtoConfig = LogtoConfig(
-        endpoint = "${props.endpoint}",
+        endpoint = "${props.endpoint}",${props.alternativeEndpoint ? ` // 或 "${props.alternativeEndpoint}"` : ''}
         appId = "${props.appId}",
         scopes = null,
         resources = null,
@@ -101,7 +101,7 @@ public class MainActivity extends AppCompatActivity {
         setContentView(R.layout.activity_main);
 
         LogtoConfig logtoConfig = new LogtoConfig(
-            "${props.endpoint}",
+            "${props.endpoint}",${props.alternativeEndpoint ? ` // 或 "${props.alternativeEndpoint}"` : ''}
             "${props.appId}",
             null,
             null,
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx
index 09687a202..1140128ab 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx
@@ -57,7 +57,7 @@ Import and initialize LogtoClient:
     {`import LogtoClient from '@logto/express';
 
 export const logtoClient = new LogtoClient({
-  endpoint: '${props.endpoint}',
+  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''}
   appId: '${props.appId}',
   appSecret: '${props.appSecret}',
   baseUrl: 'http://localhost:3000', // Change to your own base URL
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx
index 8ab04e6a6..b2b9a8609 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx
@@ -57,7 +57,7 @@ pnpm add @logto/express cookie-parser express-session
 {`import LogtoClient from '@logto/express';
 
 export const logtoClient = new LogtoClient({
-  endpoint: '${props.endpoint}',
+  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // 或 "${props.alternativeEndpoint}"` : ''}
   appId: '${props.appId}',
   appSecret: '${props.appSecret}',
   baseUrl: 'http://localhost:3000', // 你可以修改为自己真实的 URL
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/go.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/go.mdx
index 117d66c02..463c70230 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/go.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/go.mdx
@@ -162,7 +162,7 @@ func main() {
 	// ...
 
 	logtoConfig := &client.LogtoConfig{
-		Endpoint:           "${props.endpoint}",
+		Endpoint:           "${props.endpoint}",${props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''}
 		AppId:              "${props.appId}",
 		AppSecret:          "${props.appSecret}",
 	}
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/go_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/go_zh-cn.mdx
index 8194db303..68242ca01 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/go_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/go_zh-cn.mdx
@@ -158,7 +158,7 @@ func main() {
 	// ...
 
 	logtoConfig := &client.LogtoConfig{
-		Endpoint:           "${props.endpoint}",
+		Endpoint:           "${props.endpoint}",${props.alternativeEndpoint ? ` // 或 "${props.alternativeEndpoint}"` : ''}
 		AppId:              "${props.appId}",
 		AppSecret:          "${props.appSecret}",
 	}
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
index 3fe890784..9501ebeee 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
@@ -53,7 +53,7 @@ CocoaPods [does not support local dependency](https://github.com/CocoaPods/Cocoa
 import LogtoClient
 
 let config = try? LogtoConfig(
-  endpoint: "${props.endpoint}",
+  endpoint: "${props.endpoint}",${props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''}
   appId: "${props.appId}"
 )
 let logtoClient = LogtoClient(useConfig: config)`}
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx
index 78fd10e9b..cebe67b16 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx
@@ -52,7 +52,7 @@ CocoaPods [不支持本地依赖](https://github.com/CocoaPods/CocoaPods/issues/
 import LogtoClient
 
 let config = try? LogtoConfig(
-  endpoint: "${props.endpoint}",
+  endpoint: "${props.endpoint}",${props.alternativeEndpoint ? ` // 或 "${props.alternativeEndpoint}"` : ''}
   appId: "${props.appId}"
 )
 let logtoClient = LogtoClient(useConfig: config)`}
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx
index 24dc61e59..f5e40f717 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx
@@ -57,7 +57,7 @@ Import and initialize LogtoClient:
 import LogtoClient from '@logto/next';
 
 export const logtoClient = new LogtoClient({
-  endpoint: '${props.endpoint}',
+  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''}
   appId: '${props.appId}',
   appSecret: '${props.appSecret}',
   baseUrl: 'http://localhost:3000', // Change to your own base URL
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/next_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/next_zh-cn.mdx
index cda24f8f0..b15727e71 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/next_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/next_zh-cn.mdx
@@ -57,7 +57,7 @@ pnpm add @logto/next
 import LogtoClient from '@logto/next';
 
 export const logtoClient = new LogtoClient({
-  endpoint: '${props.endpoint}',
+  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // 或 "${props.alternativeEndpoint}"` : ''}
   appId: '${props.appId}',
   appSecret: '${props.appSecret}',
   baseUrl: 'http://localhost:3000', // 你可以修改为自己真实的 URL
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
index 362f6f247..e7bec7110 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
@@ -51,7 +51,7 @@ Import and use `LogtoProvider` to provide a Logto context:
     {`import { LogtoProvider, LogtoConfig } from '@logto/react';
 
 const config: LogtoConfig = {
-  endpoint: '${props.endpoint}',
+  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''}
   appId: '${props.appId}',
 };
 
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
index c783cccc0..74fab1cf2 100644
--- 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
@@ -51,7 +51,7 @@ Import 并使用 `LogtoProvider` 来提供 Logto context:
 {`import { LogtoProvider, LogtoConfig } from '@logto/react';
 
 const config: LogtoConfig = {
-  endpoint: '${props.endpoint}',
+  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // 或 "${props.alternativeEndpoint}"` : ''}
   appId: '${props.appId}',
 };
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx
index cb7da02eb..910c495f2 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx
@@ -51,7 +51,7 @@ Import and init `LogtoClient` by passing config:
     {`import LogtoClient from '@logto/browser';
 
 const logtoClient = new LogtoClient({
-  endpoint: '${props.endpoint}',
+  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''}
   appId: '${props.appId}',
 });`}
   </code>
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx
index 1da5d62a7..88ad4df51 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx
@@ -51,7 +51,7 @@ Import 并传入 config 以初始化 `LogtoClient`：
 {`import LogtoClient from '@logto/browser';
 
 const logtoClient = new LogtoClient({
-  endpoint: '${props.endpoint}',
+  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // 或 "${props.alternativeEndpoint}"` : ''}
   appId: '${props.appId}',
 });`}
 </code>
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
index 4f2d6277a..66349d86e 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
@@ -56,7 +56,7 @@ Import and use `createLogto` to install Logto plugin:
     {`import { createLogto, LogtoConfig } from '@logto/vue';
 
 const config: LogtoConfig = {
-  endpoint: '${props.endpoint}',
+  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // or "${props.alternativeEndpoint}"` : ''}
   appId: '${props.appId}',
 };
 
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
index 6d892b30d..b874ae225 100644
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
@@ -55,7 +55,7 @@ Import 并使用 `createLogto` 以插件的形式安装 Logto:
 {`import { createLogto, LogtoConfig } from '@logto/vue';
 
 const config: LogtoConfig = {
-  endpoint: '${props.endpoint}',
+  endpoint: '${props.endpoint}',${props.alternativeEndpoint ? ` // 或 "${props.alternativeEndpoint}"` : ''}
   appId: '${props.appId}',
 };
 
diff --git a/packages/console/src/pages/Applications/components/Guide/index.tsx b/packages/console/src/pages/Applications/components/Guide/index.tsx
index f114e1407..fff3029c5 100644
--- a/packages/console/src/pages/Applications/components/Guide/index.tsx
+++ b/packages/console/src/pages/Applications/components/Guide/index.tsx
@@ -1,6 +1,6 @@
-import type { Application } from '@logto/schemas';
+import { DomainStatus, type Application } from '@logto/schemas';
 import { MDXProvider } from '@mdx-js/react';
-import type { Optional } from '@silverhand/essentials';
+import { conditional, type Optional } from '@silverhand/essentials';
 import i18next from 'i18next';
 import type { MDXProps } from 'mdx/types';
 import type { LazyExoticComponent } from 'react';
@@ -9,9 +9,11 @@ import { useEffect, useContext, cloneElement, lazy, Suspense, useState } from 'r
 import CodeEditor from '@/components/CodeEditor';
 import TextLink from '@/components/TextLink';
 import { AppEndpointsContext } from '@/contexts/AppEndpointsProvider';
+import useCustomDomain from '@/hooks/use-custom-domain';
 import DetailsSummary from '@/mdx-components/DetailsSummary';
 import type { SupportedSdk } from '@/types/applications';
 import { applicationTypeAndSdkTypeMappings } from '@/types/applications';
+import { applyDomain } from '@/utils/domain';
 
 import GuideHeader from '../GuideHeader';
 import SdkSelector from '../SdkSelector';
@@ -55,6 +57,8 @@ function Guide({ app, isCompact, onClose }: Props) {
   const [selectedSdk, setSelectedSdk] = useState<Optional<SupportedSdk>>();
   const [activeStepIndex, setActiveStepIndex] = useState(-1);
   const { userEndpoint } = useContext(AppEndpointsContext);
+  const { data: customDomain } = useCustomDomain();
+  const isCustomDomainActive = customDomain?.status === DomainStatus.Active;
 
   useEffect(() => {
     if (sdks?.length) {
@@ -108,11 +112,16 @@ function Guide({ app, isCompact, onClose }: Props) {
           }}
         >
           <Suspense fallback={<StepsSkeleton />}>
-            {GuideComponent && (
+            {GuideComponent && userEndpoint && (
               <GuideComponent
                 appId={appId}
                 appSecret={appSecret}
-                endpoint={userEndpoint}
+                endpoint={
+                  isCustomDomainActive
+                    ? applyDomain(userEndpoint.toString(), customDomain.domain)
+                    : userEndpoint
+                }
+                alternativeEndpoint={conditional(isCustomDomainActive && userEndpoint)}
                 redirectUris={oidcClientMetadata.redirectUris}
                 postLogoutRedirectUris={oidcClientMetadata.postLogoutRedirectUris}
                 activeStepIndex={activeStepIndex}