feat: add multiple custom domains (#7799)

Author: xiaoyijun

packages/console/src/consts/env.ts

@@ -18,4 +18,8 @@ export const consoleEmbeddedPricingUrl =
   normalizeEnv(import.meta.env.CONSOLE_EMBEDDED_PRICING_URL) ??
   'https://logto.io/console-embedded-pricing';
 
+export const isMultipleCustomDomainsEnabled = yes(
+  normalizeEnv(import.meta.env.MULTIPLE_CUSTOM_DOMAINS_ENABLED)
+);
+
 export const inkeepApiKey = normalizeEnv(import.meta.env.INKEEP_API_KEY);

packages/console/src/hooks/use-custom-domain.ts

@@ -5,7 +5,6 @@ import useSWR from 'swr';
 
 import { customDomainSyncInterval } from '@/consts/custom-domain';
 import { isCloud } from '@/consts/env';
-import { isAbsoluteUrl } from '@/utils/url';
 
 import { type RequestError } from './use-api';
 
@@ -28,19 +27,27 @@ const useCustomDomain = (autoSync = false) => {
 
   const mutateDomain = useCallback(
     (domain?: Domain) => {
-      void mutate(domain ? [domain] : undefined);
-    },
-    [mutate]
-  );
+      if (!domain) {
+        void mutate();
+        return;
+      }
 
-  const applyDomain = useCallback(
-    (url: string) => {
-      if (customDomain?.status !== DomainStatus.Active || !isAbsoluteUrl(url)) {
-        return url;
+      if (!data || data.length === 0) {
+        void mutate([domain]);
+        return;
       }
-      return url.replace(new URL(url).host, customDomain.domain);
+
+      const exists = data.some(({ id }) => id === domain.id);
+
+      if (exists) {
+        void mutate(data.map((item) => (item.id === domain.id ? domain : item)));
+        return;
+      }
+
+      // New domain added
+      void mutate([...data, domain]);
     },
-    [customDomain]
+    [mutate, data]
   );
 
   const activeCustomDomains = useMemo(
@@ -51,10 +58,22 @@ const useCustomDomain = (autoSync = false) => {
   );
 
   return {
+    /**
+     * Legacy single custom domain.
+     * - Represents the first (and historically only) custom domain returned by the API.
+     * - Retained temporarily for backward compatibility while the multiple custom domains feature
+     *   is being rolled out (currently only enabled for selected enterprise customers).
+     * - Will be removed once multi-domain support is generally available.
+     */
     data: customDomain,
+    /**
+     * Multiple custom domains support.
+     * - Full array of custom domains returned from the API.
+     * - Will eventually replace the legacy `data` field.
+     */
+    allDomains: data,
     isLoading,
     mutate: mutateDomain,
-    applyDomain,
     activeCustomDomains,
   };
 };

packages/console/src/pages/TenantSettings/TenantDomainSettings/AddDomainForm/index.tsx

@@ -27,6 +27,7 @@ function AddDomainForm({ className, isReadonly, onSubmitCustomDomain }: Props) {
     watch,
     formState: { errors, isSubmitting },
     handleSubmit,
+    reset,
   } = useForm<FormData>({
     defaultValues: {
       domain: '',
@@ -38,6 +39,7 @@ function AddDomainForm({ className, isReadonly, onSubmitCustomDomain }: Props) {
   const onSubmit = handleSubmit(
     trySubmitSafe(async (formData) => {
       await onSubmitCustomDomain(formData);
+      reset();
     })
   );
 

packages/console/src/pages/TenantSettings/TenantDomainSettings/MultipleCustomDomainsFormField/index.module.scss

@@ -0,0 +1,10 @@
+@use '@/scss/underscore' as _;
+
+.domainItem {
+  margin-bottom: _.unit(2);
+}
+
+.configDescription {
+  font: var(--font-body-2);
+  color: var(--color-text-secondary);
+}

packages/console/src/pages/TenantSettings/TenantDomainSettings/MultipleCustomDomainsFormField/index.tsx

@@ -0,0 +1,62 @@
+import { DomainStatus, type Domain } from '@logto/schemas';
+import { useTranslation } from 'react-i18next';
+
+import LearnMore from '@/components/LearnMore';
+import { customDomain as customDomainDocumentationLink } from '@/consts/external-links';
+import FormField from '@/ds-components/FormField';
+import useApi from '@/hooks/use-api';
+import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
+import useCustomDomain from '@/hooks/use-custom-domain';
+
+import AddDomainForm from '../AddDomainForm';
+import CustomDomain from '../CustomDomain';
+
+import styles from './index.module.scss';
+
+function MultipleCustomDomainsFormField() {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { allDomains, mutate } = useCustomDomain(true);
+  const api = useApi();
+  const {
+    access: { canManageTenant },
+  } = useCurrentTenantScopes();
+
+  return (
+    <>
+      <FormField title="domain.custom.add_custom_domain_field">
+        <AddDomainForm
+          isReadonly={!canManageTenant}
+          onSubmitCustomDomain={async (json) => {
+            const createdDomain = await api.post('api/domains', { json }).json<Domain>();
+            mutate(createdDomain);
+          }}
+        />
+      </FormField>
+      {allDomains && (
+        <FormField title="domain.custom.custom_domain_field">
+          {allDomains.map((domain) => (
+            <CustomDomain
+              key={domain.id}
+              hasExtraTipsOnDelete
+              className={styles.domainItem}
+              isReadonly={!canManageTenant}
+              customDomain={domain}
+              onDeleteCustomDomain={async () => {
+                await api.delete(`api/domains/${domain.id}`);
+                mutate();
+              }}
+            />
+          ))}
+          {allDomains.some(({ status }) => status === DomainStatus.Active) && (
+            <div className={styles.configDescription}>
+              {t('domain.custom.config_custom_domain_description')}
+              <LearnMore href={customDomainDocumentationLink} />{' '}
+            </div>
+          )}
+        </FormField>
+      )}
+    </>
+  );
+}
+
+export default MultipleCustomDomainsFormField;

packages/console/src/pages/TenantSettings/TenantDomainSettings/SingleCustomDomainFormField/index.module.scss

@@ -0,0 +1,7 @@
+@use '@/scss/underscore' as _;
+
+.notes {
+  font: var(--font-body-2);
+  color: var(--color-text-secondary);
+  margin-top: _.unit(3);
+}

packages/console/src/pages/TenantSettings/TenantDomainSettings/SingleCustomDomainFormField/index.tsx

@@ -0,0 +1,55 @@
+import { DomainStatus, type Domain } from '@logto/schemas';
+
+import LearnMore from '@/components/LearnMore';
+import { customDomain as customDomainDocumentationLink } from '@/consts/external-links';
+import FormField from '@/ds-components/FormField';
+import useApi from '@/hooks/use-api';
+import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
+import useCustomDomain from '@/hooks/use-custom-domain';
+
+import AddDomainForm from '../AddDomainForm';
+import CustomDomain from '../CustomDomain';
+
+import styles from './index.module.scss';
+
+function SingleCustomDomainFormField() {
+  const { data: customDomain, mutate } = useCustomDomain(true);
+  const api = useApi();
+  const {
+    access: { canManageTenant },
+  } = useCurrentTenantScopes();
+
+  return (
+    <FormField title="domain.custom.custom_domain_field">
+      {!customDomain && (
+        <AddDomainForm
+          isReadonly={!canManageTenant}
+          onSubmitCustomDomain={async (json) => {
+            const createdDomain = await api.post('api/domains', { json }).json<Domain>();
+            mutate(createdDomain);
+          }}
+        />
+      )}
+      {customDomain && (
+        <>
+          <CustomDomain
+            hasExtraTipsOnDelete
+            isReadonly={!canManageTenant}
+            customDomain={customDomain}
+            onDeleteCustomDomain={async () => {
+              await api.delete(`api/domains/${customDomain.id}`);
+              mutate();
+            }}
+          />
+          {customDomain.status === DomainStatus.Active && (
+            <div className={styles.notes}>
+              <LearnMore href={customDomainDocumentationLink} />
+            </div>
+          )}
+        </>
+      )}
+    </FormField>
+  );
+}
+
+export default SingleCustomDomainFormField;

packages/console/src/pages/TenantSettings/TenantDomainSettings/index.module.scss

@@ -6,12 +6,6 @@
   }
 }
 
-.notes {
-  font: var(--font-body-2);
-  color: var(--color-text-secondary);
-  margin-top: _.unit(3);
-}
-
 .upsellNotification {
   margin-top: _.unit(4);
 }

packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx

@@ -1,31 +1,20 @@
-import { type Domain, DomainStatus } from '@logto/schemas';
-import { useTranslation } from 'react-i18next';
-
 import FormCard from '@/components/FormCard';
-import LearnMore from '@/components/LearnMore';
 import PageMeta from '@/components/PageMeta';
-import { customDomain as customDomainDocumentationLink } from '@/consts/external-links';
+import { isMultipleCustomDomainsEnabled } from '@/consts/env';
 import FormField from '@/ds-components/FormField';
-import useApi from '@/hooks/use-api';
-import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
 import useCustomDomain from '@/hooks/use-custom-domain';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 
 import Skeleton from '../components/Skeleton';
 
-import AddDomainForm from './AddDomainForm';
-import CustomDomain from './CustomDomain';
 import DefaultDomain from './DefaultDomain';
+import MultipleCustomDomainsFormField from './MultipleCustomDomainsFormField';
+import SingleCustomDomainFormField from './SingleCustomDomainFormField';
 import styles from './index.module.scss';
 
 function TenantDomainSettings() {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { data: customDomain, isLoading: isLoadingCustomDomain, mutate } = useCustomDomain(true);
+  const { isLoading: isLoadingCustomDomain } = useCustomDomain(true);
   const { getDocumentationUrl } = useDocumentationUrl();
-  const api = useApi();
-  const {
-    access: { canManageTenant },
-  } = useCurrentTenantScopes();
 
   if (isLoadingCustomDomain) {
     return <Skeleton />;
@@ -42,32 +31,11 @@ function TenantDomainSettings() {
           targetBlank: 'noopener',
         }}
       >
-        <FormField title="domain.custom.custom_domain_field">
-          {customDomain ? (
-            <CustomDomain
-              hasExtraTipsOnDelete
-              isReadonly={!canManageTenant}
-              customDomain={customDomain}
-              onDeleteCustomDomain={async () => {
-                await api.delete(`api/domains/${customDomain.id}`);
-                mutate();
-              }}
-            />
-          ) : (
-            <AddDomainForm
-              isReadonly={!canManageTenant}
-              onSubmitCustomDomain={async (json) => {
-                const createdDomain = await api.post('api/domains', { json }).json<Domain>();
-                mutate(createdDomain);
-              }}
-            />
-          )}
-          {customDomain?.status === DomainStatus.Active && (
-            <div className={styles.notes}>
-              <LearnMore href={customDomainDocumentationLink} />
-            </div>
-          )}
-        </FormField>
+        {isMultipleCustomDomainsEnabled ? (
+          <MultipleCustomDomainsFormField />
+        ) : (
+          <SingleCustomDomainFormField />
+        )}
       </FormCard>
       <FormCard
         title="domain.default.default_domain"

packages/console/vite.config.ts

@@ -51,6 +51,9 @@ const buildConfig = (mode: string): UserConfig => ({
     'import.meta.env.CONSOLE_EMBEDDED_PRICING_URL': JSON.stringify(
       process.env.CONSOLE_EMBEDDED_PRICING_URL
     ),
+    'import.meta.env.MULTIPLE_CUSTOM_DOMAINS_ENABLED': JSON.stringify(
+      process.env.MULTIPLE_CUSTOM_DOMAINS_ENABLED
+    ),
     'import.meta.env.INKEEP_API_KEY': JSON.stringify(process.env.INKEEP_API_KEY),
     // `@withtyped/client` needs this to be defined. We can optimize this later.
     'process.env': {},