feat(console): add alternative endpoint for application get started guide (#4039)

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,

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,

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

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

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}",
 	}

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}",
 	}

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)`}

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)`}

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

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

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}',
 };
 

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}',
 };
 

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>

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>

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}',
 };
 

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}',
 };
 

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}