> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging.auth0-mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Web での検証済みドメインの設定

> 検証済みおよび保留中の組織ドメインを、統合されたテーブルインターフェースで管理する方法を説明します。

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <div aria-label="読み込み中" role="status" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
          <svg width={40} height={40} viewBox="0 0 50 50" style={{
    display: "block"
  }}>
            <circle cx="25" cy="25" r="20" fill="none" stroke="#8A94A6" strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
              <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
            </circle>
          </svg>
        </div>
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

`DomainTable` コンポーネントは、お客様が Auth0 Organization のメールドメインを一元管理できるインターフェイスを提供します。ドメインの所有権を検証すると、Organization 管理者は[ホームレルムディスカバリー (HRD) ](/docs/ja-jp/authenticate/enterprise-connections/self-service-enterprise-configuration/manage-self-service-enterprise-config#email-domain-verification-and-pre-verified-domains)などの重要な B2B 機能を有効にでき、メールアドレスのサフィックス (例: `user@acme.com`) に基づいてユーザーを適切な SSO プロバイダーへ自動的にルーティングできます。

<ComponentLoader componentSelector="domain-table-view" componentPreviewText="Domain Table コンポーネントのプレビュー" />

<Tabs>
  <Tab title="React">
    <h2 id="setup-requirements">
      設定の要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—テナントで My Organization API が設定されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    <h2 id="install-the-component">
      コンポーネントをインストールする
    </h2>

    <CodeGroup>
      ```bash pnpm  wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      いずれのコマンドを実行した場合も、共有ユーティリティとAuth0連携に必要な@auth0/universal-components-core
      依存パッケージがインストールされます。
    </Callout>

    <h2 id="get-started">
      はじめに
    </h2>

    ```tsx React SPA wrap lines theme={null}
    import { DomainTable } from "@auth0/universal-components-react";

    export function DomainsPage() {
      return <DomainTable />;
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      import React from "react";
      import { DomainTable } from "@auth0/universal-components-react";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";

      function DomainsManagementPage() {
        const navigate = useNavigate();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <DomainTable
              schema={{
                create: {
                  domainUrl: {
                    regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
                    errorMessage: "Please enter a valid domain (e.g., example.com)",
                  },
                },
              }}
              createAction={{
                onBefore: (domain) => {
                  if (!domain.domain.includes(".")) {
                    alert("Please enter a valid domain with a TLD");
                    return false;
                  }
                  return true;
                },
                onAfter: (domain) => console.log("Domain created:", domain),
              }}
              verifyAction={{
                onAfter: (domain) => {
                  console.log("Domain verified:", domain.domain);
                },
              }}
              deleteAction={{
                onBefore: (domain) => {
                  return confirm(`Delete ${domain.domain}?`);
                },
              }}
              onOpenProvider={(provider) => {
                navigate(`/providers/${provider.id}`);
              }}
              onCreateProvider={() => {
                navigate("/providers/create");
              }}
              customMessages={{
                header: {
                  title: "Domain Management",
                  description: "Add and verify domains for your organization",
                  create_button_text: "Add New Domain",
                },
              }}
              styling={{
                variables: {
                  common: { "--font-size-label": "12px" },
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "DomainTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "your-domain.auth0.com";

        return (
          <Auth0Provider
            domain={domain}
            clientId="your-client-id"
            authorizationParams={{
              redirect_uri: window.location.origin,
            }}
            interactiveErrorHandler="popup" // Universal Login のポップアップでステップアップ認証チャレンジを処理するために必要
          >
            <Auth0ComponentProvider>
              <DomainsManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    <h2 id="props">
      プロップス
    </h2>

    <h3 id="display-props">
      表示関連のプロップス
    </h3>

    表示関連のプロップスは、コンポーネントの動作に影響を与えずに、そのレンダリング方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする際に使用します。

    | プロパティ        | 型         | 説明                               |
    | :----------- | :-------- | :------------------------------- |
    | `readOnly`   | `boolean` | すべてのドメイン操作を無効にします。デフォルト: `false` |
    | `hideHeader` | `boolean` | ヘッダーセクションを非表示にします。デフォルト: `false` |

    ***

    <h3 id="action-props">
      Action のプロップス
    </h3>

    Actionのプロップスは、ユーザーの操作を処理し、ユーザーがドメイン操作を実行したときの挙動を定義します。ライフサイクルフック (`onBefore`、`onAfter`) を使用すると、アプリケーションのルーティングや分析と連携できます。

    | プロパティ                       | 型                                           | 説明                       |
    | :-------------------------- | :------------------------------------------ | :----------------------- |
    | `createAction`              | `ComponentAction<Domain>`                   | ドメインを作成するアクション。          |
    | `verifyAction`              | `ComponentAction<Domain>`                   | ドメインを検証するアクション。          |
    | `deleteAction`              | `ComponentAction<Domain>`                   | ドメインを削除するアクション。          |
    | `associateToProviderAction` | `ComponentAction<Domain, IdentityProvider>` | ドメインをプロバイダーに関連付けるアクション。  |
    | `deleteFromProviderAction`  | `ComponentAction<Domain, IdentityProvider>` | プロバイダーからドメインを削除するアクション。  |
    | `onOpenProvider`            | `(provider: IdentityProvider) => void`      | 設定モーダルからプロバイダーの画面に移動します。 |
    | `onCreateProvider`          | `() => void`                                | プロバイダー作成フローに移動します。       |

    **createAction**

    **型:** `ComponentAction<Domain>`

    ドメイン作成のフローを制御します。新しいドメインが追加されたときの追跡には`onAfter`を使用してください。

    **プロパティ:**

    * `disabled`—"Add Domain" ボタンを無効にします
    * `onBefore(domain)`—ドメインの作成前に実行されます。作成を阻止するには `false` を返します (たとえば、ドメインの形式が無効な場合) 。
    * `onAfter(domain)`—ドメインの作成が成功した後に実行されます。通知の表示やイベントの追跡に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      createAction={{
        onBefore: (domain) => {
          // ドメイン形式を検証
          if (!domain.domain.includes(".")) {
            alert("Please enter a valid domain");
            return false;
          }
          return true;
        },
        onAfter: (domain) => {
          analytics.track("Domain Created", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **verifyAction**

    **型:** `ComponentAction<Domain>`

    ドメイン検証のフローを制御します。ドメイン検証では、DNSのTXTレコードによって所有権を証明します。

    **プロパティ:**

    * `disabled`—Verifyボタンを無効にします
    * `onBefore(domain)`—検証を試みる前に実行されます。検証を中止するには`false`を返します (たとえば、DNSが設定されていることを確認する場合) 。
    * `onAfter(domain)`—ドメインの検証が正常に完了した後に実行されます。成功通知を表示するために使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      verifyAction={{
        onBefore: (domain) => {
          return confirm(
            `Verify ${domain.domain}? Make sure your DNS record is configured.`,
          );
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully!`);
        },
      }}
    />
    ```

    ***

    **deleteAction**

    **型:** `ComponentAction<Domain>`

    ドメインの削除を制御します。破壊的な操作のため、`onBefore` で確認を行うことを推奨します。

    **プロパティ:**

    * `disabled`—削除ボタンを無効にします
    * `onBefore(domain)`—削除前に実行されます。`false` を返すと削除を中止できます (確認ダイアログでの使用を推奨) 。
    * `onAfter(domain)`—ドメインの削除が完了した後に実行されます。イベントの追跡や通知の表示に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      deleteAction={{
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}? This cannot be undone.`);
        },
        onAfter: (domain) => {
          analytics.track("Domain Deleted", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **associateToProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    検証済みドメインとSSOプロバイダーの関連付けを制御します。関連付けできるのは検証済みドメインのみです。

    **プロパティ:**

    * `disabled`—関連付けアクションを無効にします
    * `onBefore(domain, provider)`—関連付けの前に実行されます。関連付けを中止するには、`false`を返します。
    * `onAfter(domain, provider)`—ドメインがProviderに正常に関連付けられた後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      associateToProviderAction={{
        onAfter: (domain, provider) => {
          console.log(`Associated ${domain.domain} with ${provider.name}`);
        },
      }}
    />
    ```

    ***

    **deleteFromProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    ドメインとSSOプロバイダーとの関連付けの解除を制御します。

    **プロパティ:**

    * `disabled`—関連付け解除操作を無効にします
    * `onBefore(domain, provider)`—削除前に実行されます。削除を中止するには `false` を返します。
    * `onAfter(domain, provider)`—ドメインがプロバイダーから正常に削除された後に実行されます。

    ***

    **onOpenProvider / onCreateProvider**

    **型:** `(provider: IdentityProvider) => void` / `() => void`

    ドメイン設定モーダルのナビゲーションハンドラーです。ユーザーがドメインのプロバイダー関連付けを設定する場合:

    * `onOpenProvider`—ユーザーが既存のProviderをクリックして表示または編集すると呼び出されます
    * `onCreateProvider`—ユーザーがクリックして新しいProviderを作成すると呼び出されます

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      onOpenProvider={(provider) => {
        navigate(`/providers/${provider.id}`);
      }}
      onCreateProvider={() => {
        navigate("/providers/create");
      }}
    />
    ```

    ***

    <h3 id="customization-props">
      カスタマイズ用プロップス
    </h3>

    カスタマイズ用のプロップスを使えば、ソースコードを変更せずに、ブランド、ロケール、バリデーション要件に合わせてコンポーネントを調整できます。

    | プロップ             | 型                                  | 説明                    |
    | :--------------- | :--------------------------------- | :-------------------- |
    | `schema`         | `DomainTableSchema`                | ドメイン URL のバリデーションルール。 |
    | `customMessages` | `Partial<DomainTableMainMessages>` | i18n テキストのオーバーライド。    |
    | `styling`        | `ComponentStyling`                 | CSS 変数とクラスのオーバーライド。   |

    **スキーマ**

    ドメインURLの入力にカスタムのバリデーションルールを設定します。

    <Accordion title="利用可能なスキーマフィールド">
      **create.domainUrl**—ドメイン URL のバリデーション—`regex`—カスタム正規表現パターン

      * `errorMessage`—カスタムエラーメッセージ
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        create: {
          domainUrl: {
            regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
            errorMessage: "Enter a valid domain (example.com)",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    すべてのテキストと翻訳をカスタマイズできます。すべてのフィールドは任意で、指定しない場合はデフォルト値が使用されます。

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントのヘッダー

      * `title`, `description`, `create_button_text`

      **table**—テーブル表示

      * `empty_message`
      * `columns.domain`, `columns.status`
      * `actions.configure_button_text`, `actions.view_button_text`, `actions.verify_button_text`, `actions.delete_button_text`

      **create.modal**—ドメイン作成モーダル

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **verify.modal**—ドメイン検証モーダル

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—削除確認

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **configure.modal**—プロバイダー設定

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—APIレスポンス

      * `fetch_providers_error`, `fetch_domains_error`
      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_verify_error`, `domain_verify_verification_failed`
      * `domain_delete_success`, `domain_delete_error`
      * `domain_associate_provider_success`, `domain_associate_provider_error`
      * `domain_delete_provider_success`, `domain_delete_provider_error`

      **shared**—共有メッセージ

      * `domain_statuses.pending`, `domain_statuses.verified`, `domain_statuses.failed`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      customMessages={{
        header: {
          title: "Manage Domains",
          description: "Configure and verify organization domains",
          create_button_text: "Add Domain",
        },
        table: {
          empty_message: "No domains yet. Add one to begin.",
        },
        notifications: {
          domain_create_success: "Domain added successfully!",
          domain_verify_success: "Domain verified!",
          domain_delete_success: "Domain removed.",
        },
      }}
    />
    ```

    ***

    **スタイリング**

    CSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマ対応のスタイリングをサポートします。

    <Accordion title="利用可能なスタイリングオプション">
      **変数**—CSS カスタムプロパティ

      * `common`—すべてのテーマに適用
      * `light`—ライトテーマのみ
      * `dark`—ダークテーマのみ

      **クラス**—コンポーネントクラスのオーバーライド

      * `DomainTable-header`
      * `DomainTable-table`
      * `DomainTable-tableActions`
      * `DomainTable-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
      * `DomainTableConfigureModal-dialogContent`
      * `DomainTableVerifyModal-dialogContent`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      styling={{
        variables: {
          common: { "--font-size-title": "1rem" },
          light: { "--color-primary": "#4f46e5" },
        },
        classes: {
          "DomainTable-header": "mb-6",
          "DomainTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization">
      高度なカスタマイズ
    </h2>

    <h3 id="available-hooks">
      利用可能なフック
    </h3>

    これらのフックは、UIを持たず、基盤となるロジックのみを提供します。Auth0 APIとの連携を活用しつつ、完全に独自のインターフェイスを構築したい場合にご利用ください。

    | Hook             | 説明                               |
    | :--------------- | :------------------------------- |
    | `useDomainTable` | データおよびAPIレイヤー (取得、作成、検証、削除、関連付け) |
  </Tab>

  <Tab title="Next.js">
    <h2 id="setup-requirements-2">
      設定の要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—テナントで
      My Organization API が設定されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="install-component">
      コンポーネントのインストール
    </h2>

    <CodeGroup>
      ```bash npm  wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      pnpm または npm コマンドを実行すると、共有ユーティリティと Auth0 連携に必要な @auth0/universal-components-core
      依存関係がインストールされます。
    </Callout>

    <h2 id="get-started-2">
      はじめに
    </h2>

    ```tsx page.tsx wrap lines theme={null}
    import { DomainTable } from "@auth0/universal-components-react";
    import { useRouter } from "next/navigation";

    export function DomainsPage() {
      const router = useRouter();

      return (
        <DomainTable
          onOpenProvider={(provider) => {
            router.push(`/providers/${provider.id}`);
          }}
          onCreateProvider={() => {
            router.push("/providers/create");
          }}
        />
      );
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      import React from "react";
      import { DomainTable } from "@auth0/universal-components-react";
      import { useRouter } from "next/navigation";

      function DomainsManagementPage() {
        const router = useRouter();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <DomainTable
              schema={{
                create: {
                  domainUrl: {
                    regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
                    errorMessage: "Please enter a valid domain (e.g., example.com)",
                  },
                },
              }}
              createAction={{
                onBefore: (domain) => {
                  if (!domain.domain.includes(".")) {
                    alert("Please enter a valid domain with a TLD");
                    return false;
                  }
                  return true;
                },
                onAfter: (domain) => console.log("Domain created:", domain),
              }}
              verifyAction={{
                onAfter: (domain) => {
                  console.log("Domain verified:", domain.domain);
                },
              }}
              deleteAction={{
                onBefore: (domain) => {
                  return confirm(`Delete ${domain.domain}?`);
                },
              }}
              onOpenProvider={(provider) => {
                router.push(`/providers/${provider.id}`);
              }}
              onCreateProvider={() => {
                router.push("/providers/create");
              }}
              customMessages={{
                header: {
                  title: "Domain Management",
                  description: "Add and verify domains for your organization",
                  create_button_text: "Add New Domain",
                },
              }}
              styling={{
                variables: {
                  common: { "--font-size-label": "12px" },
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "DomainTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </div>
        );
      }

      export default DomainsManagementPage;
      ```
    </Accordion>

    <h2 id="props-2">
      プロップス
    </h2>

    <h3 id="display-props-2">
      表示関連のプロップス
    </h3>

    表示関連のプロップスは、コンポーネントの動作に影響を与えずに、そのレンダリング方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする際に使用します。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            すべてのドメイン操作を無効にします。デフォルト：<code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            ヘッダーセクションを非表示にします。デフォルト：<code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props-2">
      Action のプロップス
    </h3>

    Actionプロップは、ユーザー操作を処理し、ユーザーがドメイン操作を実行したときに何が起こるかを定義します。ライフサイクルフック (`onBefore`、`onAfter`) を使用して、アプリケーションのルーティングや解析と統合してください。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを作成するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>verifyAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを検証するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを削除するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>associateToProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            ドメインをプロバイダーに関連付けるアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            プロバイダーからドメインを削除するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>onOpenProvider</code>
          </td>

          <td>
            <code>(provider: IdentityProvider) => void</code>
          </td>

          <td>
            設定モーダルからプロバイダーの画面に移動します。
          </td>
        </tr>

        <tr>
          <td>
            <code>onCreateProvider</code>
          </td>

          <td>
            <code>() => void</code>
          </td>

          <td>
            プロバイダー作成フローに移動します。
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **型:** `ComponentAction<Domain>`

    ドメイン作成フローを制御します。新しいドメインが追加されたタイミングを追跡するには、`onAfter`を使用します。

    **プロパティ:**

    * `disabled`—"Add Domain" ボタンを無効にします
    * `onBefore(domain)`—ドメインの作成前に実行されます。作成を阻止するには `false` を返します (たとえば、ドメインの形式が無効な場合) 。
    * `onAfter(domain)`—ドメインの作成が成功した後に実行されます。通知の表示やイベントの追跡に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      createAction={{
        onBefore: (domain) => {
          // ドメイン形式を検証
          if (!domain.domain.includes(".")) {
            alert("Please enter a valid domain");
            return false;
          }
          return true;
        },
        onAfter: (domain) => {
          analytics.track("Domain Created", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **verifyAction**

    **型:** `ComponentAction<Domain>`

    ドメイン検証のフローを制御します。ドメイン検証では、DNSのTXTレコードによって所有権を証明します。

    **プロパティ:**

    * `disabled`—Verifyボタンを無効にします
    * `onBefore(domain)`—検証を試みる前に実行されます。検証を中止するには`false`を返します (たとえば、DNSが設定されていることを確認する場合) 。
    * `onAfter(domain)`—ドメインの検証が正常に完了した後に実行されます。成功通知を表示するために使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      verifyAction={{
        onBefore: (domain) => {
          return confirm(
            `Verify ${domain.domain}? Make sure your DNS record is configured.`,
          );
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully!`);
        },
      }}
    />
    ```

    ***

    **deleteAction**

    **型:** `ComponentAction<Domain>`

    ドメインの削除を制御します。破壊的な操作のため、`onBefore` で確認を行うことを推奨します。

    **プロパティ:**

    * `disabled`—削除ボタンを無効にします
    * `onBefore(domain)`—削除前に実行されます。`false` を返すと削除を中止します (確認ダイアログでの使用を推奨) 。
    * `onAfter(domain)`—ドメインが正常に削除された後に実行されます。イベントの追跡や通知の表示に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      deleteAction={{
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}? This cannot be undone.`);
        },
        onAfter: (domain) => {
          analytics.track("Domain Deleted", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **associateToProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    検証済みドメインとSSOプロバイダーの関連付けを制御します。関連付けできるのは検証済みドメインのみです。

    **プロパティ:**

    * `disabled`—関連付けアクションを無効にします
    * `onBefore(domain, provider)`—関連付けの前に実行されます。関連付けを中止するには、`false`を返します。
    * `onAfter(domain, provider)`—ドメインがProviderに正常に関連付けられた後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      associateToProviderAction={{
        onAfter: (domain, provider) => {
          console.log(`Associated ${domain.domain} with ${provider.name}`);
        },
      }}
    />
    ```

    ***

    **deleteFromProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    ドメインとSSOプロバイダーとの関連付けの解除を制御します。

    **プロパティ:**

    * `disabled`—関連付け解除操作を無効にします
    * `onBefore(domain, provider)`—削除前に実行されます。削除を中止するには `false` を返します。
    * `onAfter(domain, provider)`—ドメインがプロバイダーから正常に削除された後に実行されます。

    ***

    **onOpenProvider / onCreateProvider**

    **型:** `(provider: IdentityProvider) => void` / `() => void`

    ドメイン設定モーダルのナビゲーションハンドラーです。ユーザーがドメインのプロバイダー関連付けを設定する場合:

    * `onOpenProvider`—ユーザーが既存のProviderをクリックして表示または編集すると呼び出されます
    * `onCreateProvider`—ユーザーがクリックして新しいProviderを作成すると呼び出されます

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      onOpenProvider={(provider) => {
        router.push(`/providers/${provider.id}`);
      }}
      onCreateProvider={() => {
        router.push("/providers/create");
      }}
    />
    ```

    ***

    <h3 id="customization-props-2">
      カスタマイズ用プロップス
    </h3>

    カスタマイズ用のプロップスを使えば、ソースコードを変更せずに、ブランド、ロケール、バリデーション要件に合わせてコンポーネントを調整できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>DomainTableSchema</code>
          </td>

          <td>
            ドメイン URL のバリデーションルール。
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<DomainTableMainMessages></code>
          </td>

          <td>
            i18n テキストのオーバーライド。
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling</code>
          </td>

          <td>
            CSS 変数とクラスのオーバーライド。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

    ドメインURLの入力にカスタムのバリデーションルールを設定します。

    <Accordion title="利用可能なスキーマフィールド">
      **create.domainUrl**—Domain URLのバリデーション—`regex`—カスタム正規表現パターン -
      `errorMessage`—カスタムエラーメッセージ
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        create: {
          domainUrl: {
            regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
            errorMessage: "Enter a valid domain (example.com)",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    すべてのテキストと翻訳をカスタマイズできます。すべてのフィールドは任意で、指定しない場合はデフォルト値が使用されます。

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントのヘッダー

      * `title`, `description`, `create_button_text`

      **table**—テーブル表示

      * `empty_message`
      * `columns.domain`, `columns.status`
      * `actions.configure_button_text`, `actions.view_button_text`, `actions.verify_button_text`, `actions.delete_button_text`

      **create.modal**—ドメイン作成モーダル

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **verify.modal**—ドメイン検証モーダル

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—削除確認

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **configure.modal**—プロバイダー設定

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—APIレスポンス

      * `fetch_providers_error`, `fetch_domains_error`
      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_verify_error`, `domain_verify_verification_failed`
      * `domain_delete_success`, `domain_delete_error`
      * `domain_associate_provider_success`, `domain_associate_provider_error`
      * `domain_delete_provider_success`, `domain_delete_provider_error`

      **shared**—共有メッセージ

      * `domain_statuses.pending`, `domain_statuses.verified`, `domain_statuses.failed`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      customMessages={{
        header: {
          title: "Manage Domains",
          description: "Configure and verify organization domains",
          create_button_text: "Add Domain",
        },
        table: {
          empty_message: "No domains yet. Add one to begin.",
        },
        notifications: {
          domain_create_success: "Domain added successfully!",
          domain_verify_success: "Domain verified!",
          domain_delete_success: "Domain removed.",
        },
      }}
    />
    ```

    ***

    **スタイリング**

    CSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマ対応のスタイリングをサポートします。

    <Accordion title="利用可能なスタイリングオプション">
      **変数**—CSS カスタムプロパティ

      * `common`—すべてのテーマに適用
      * `light`—ライトテーマのみ
      * `dark`—ダークテーマのみ

      **クラス**—コンポーネントクラスのオーバーライド

      * `DomainTable-header`
      * `DomainTable-table`
      * `DomainTable-tableActions`
      * `DomainTable-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
      * `DomainTableConfigureModal-dialogContent`
      * `DomainTableVerifyModal-dialogContent`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      styling={{
        variables: {
          common: { "--font-size-title": "1rem" },
          light: { "--color-primary": "#4f46e5" },
        },
        classes: {
          "DomainTable-header": "mb-6",
          "DomainTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization-2">
      高度なカスタマイズ
    </h2>

    <h3 id="available-hooks-2">
      利用可能なフック
    </h3>

    これらのフックは、UIを持たず、基盤となるロジックのみを提供します。Auth0 APIとの連携を活用しつつ、完全に独自のインターフェイスを構築したい場合にご利用ください。

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useDomainTable</code>
          </td>

          <td>データおよび API レイヤー (取得、作成、検証、削除、関連付け) </td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="shadcn">
    <h2 id="setup-requirements-3">
      設定の要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—テナントで
      My Organization API が設定されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="install-the-component-2">
      コンポーネントをインストールする
    </h2>

    GitHub Registry を使用して、shadcn CLI 経由でコンポーネントをインストールします。

    ```bash wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/domain-table
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      shadcn CLI では、共有ユーティリティと Auth0 との連携に必要な `@auth0/universal-components-core`
      依存関係もインストールされます。
      **shadcn CLI v2.5.0+** が必要です。
    </Callout>

    <details>
      <summary>レガシー Vercel レジストリ (廃止) </summary>

      既存の利用者は、**2026年9月17日**までVercelがホストするパスを引き続き使用できます。

      ```bash wrap lines theme={null}
      npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/domain-table.json
      ```

      新しいプロジェクトでは、上記のGitHub Registryのパスを使用してください。
    </details>

    <h2 id="get-started-3">
      はじめに
    </h2>

    ```tsx wrap lines theme={null}
    import { DomainTable } from "@/components/auth0/my-organization/domain-table";

    export function DomainsPage() {
      return <DomainTable />;
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      import React from "react";
      import { DomainTable } from "@/components/auth0/my-organization/domain-table";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";

      function DomainsManagementPage() {
        const navigate = useNavigate();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <DomainTable
              schema={{
                create: {
                  domainUrl: {
                    regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
                    errorMessage: "Please enter a valid domain (e.g., example.com)",
                  },
                },
              }}
              createAction={{
                onBefore: (domain) => {
                  if (!domain.domain.includes(".")) {
                    alert("Please enter a valid domain with a TLD");
                    return false;
                  }
                  return true;
                },
                onAfter: (domain) => console.log("Domain created:", domain),
              }}
              verifyAction={{
                onAfter: (domain) => {
                  console.log("Domain verified:", domain.domain);
                },
              }}
              deleteAction={{
                onBefore: (domain) => {
                  return confirm(`Delete ${domain.domain}?`);
                },
              }}
              onOpenProvider={(provider) => {
                navigate(`/providers/${provider.id}`);
              }}
              onCreateProvider={() => {
                navigate("/providers/create");
              }}
              customMessages={{
                header: {
                  title: "Domain Management",
                  description: "Add and verify domains for your organization",
                  create_button_text: "Add New Domain",
                },
              }}
              styling={{
                variables: {
                  common: { "--font-size-label": "12px" },
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "DomainTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "your-domain.auth0.com";

        return (
          <Auth0Provider
            domain={domain}
            clientId="your-client-id"
            authorizationParams={{
              redirect_uri: window.location.origin,
            }}
            interactiveErrorHandler="popup" // Universal Login のポップアップでステップアップ認証チャレンジを処理するために必要
          >
            <Auth0ComponentProvider>
              <DomainsManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    <h2 id="props-3">
      プロップス
    </h2>

    <h3 id="display-props-3">
      表示関連のプロップス
    </h3>

    表示関連のプロップスは、コンポーネントの動作に影響を与えずに、そのレンダリング方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする際に使用します。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            すべてのドメイン操作を無効にします。デフォルト：<code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            ヘッダーセクションを非表示にします。デフォルト：<code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props-3">
      Action のプロップス
    </h3>

    Actionのプロップスは、ユーザーの操作を処理し、ユーザーがドメイン操作を実行したときの挙動を定義します。ライフサイクルフック (`onBefore`、`onAfter`) を使用すると、アプリケーションのルーティングや分析と連携できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを作成するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>verifyAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを検証するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを削除するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>associateToProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            ドメインをプロバイダーに関連付けるアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            プロバイダーからドメインを削除するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>onOpenProvider</code>
          </td>

          <td>
            <code>(provider: IdentityProvider) => void</code>
          </td>

          <td>
            設定モーダルからプロバイダーの画面に移動します。
          </td>
        </tr>

        <tr>
          <td>
            <code>onCreateProvider</code>
          </td>

          <td>
            <code>() => void</code>
          </td>

          <td>
            プロバイダー作成フローに移動します。
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **型:** `ComponentAction<Domain>`

    ドメイン作成フローを制御します。新しいドメインが追加されたタイミングを追跡するには、`onAfter`を使用します。

    **プロパティ:**

    * `disabled`—"Add Domain" ボタンを無効にします
    * `onBefore(domain)`—ドメインの作成前に実行されます。作成を阻止するには `false` を返します (たとえば、ドメインの形式が無効な場合) 。
    * `onAfter(domain)`—ドメインの作成が成功した後に実行されます。通知の表示やイベントの追跡に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      createAction={{
        onBefore: (domain) => {
          // ドメイン形式を検証
          if (!domain.domain.includes(".")) {
            alert("Please enter a valid domain");
            return false;
          }
          return true;
        },
        onAfter: (domain) => {
          analytics.track("Domain Created", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **verifyAction**

    **型:** `ComponentAction<Domain>`

    ドメイン検証のフローを制御します。ドメイン検証では、DNSのTXTレコードによって所有権を証明します。

    **プロパティ:**

    * `disabled`—検証ボタンを無効にします
    * `onBefore(domain)`—検証を試みる前に実行されます。検証を中止するには `false` を返します (例: DNS が設定されていることを確認する場合) 。
    * `onAfter(domain)`—ドメインの検証が成功した後に実行されます。成功通知を表示するために使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      verifyAction={{
        onBefore: (domain) => {
          return confirm(
            `Verify ${domain.domain}? Make sure your DNS record is configured.`,
          );
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully!`);
        },
      }}
    />
    ```

    ***

    **deleteAction**

    **型:** `ComponentAction<Domain>`

    ドメインの削除を制御します。破壊的な操作のため、`onBefore` で確認を行うことを推奨します。

    **プロパティ:**

    * `disabled`—削除ボタンを無効にします
    * `onBefore(domain)`—削除前に実行されます。`false` を返すと削除を中止できます (確認ダイアログでの使用を推奨) 。
    * `onAfter(domain)`—ドメインの削除が完了した後に実行されます。イベントの追跡や通知の表示に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      deleteAction={{
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}? This cannot be undone.`);
        },
        onAfter: (domain) => {
          analytics.track("Domain Deleted", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **associateToProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    検証済みドメインとSSOプロバイダーの関連付けを制御します。関連付けできるのは検証済みドメインのみです。

    **プロパティ:**

    * `disabled`—関連付けアクションを無効にします
    * `onBefore(domain, provider)`—関連付けの前に実行されます。関連付けを中止するには、`false`を返します。
    * `onAfter(domain, provider)`—ドメインがProviderに正常に関連付けられた後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      associateToProviderAction={{
        onAfter: (domain, provider) => {
          console.log(`Associated ${domain.domain} with ${provider.name}`);
        },
      }}
    />
    ```

    ***

    **deleteFromProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    ドメインとSSOプロバイダーとの関連付けの解除を制御します。

    **プロパティ:**

    * `disabled`—関連付け解除操作を無効にします
    * `onBefore(domain, provider)`—削除前に実行されます。削除を中止するには `false` を返します。
    * `onAfter(domain, provider)`—ドメインがプロバイダーから正常に削除された後に実行されます。

    ***

    **onOpenProvider / onCreateProvider**

    **型:** `(provider: IdentityProvider) => void` / `() => void`

    ドメイン設定モーダルのナビゲーションハンドラーです。ユーザーがドメインのプロバイダー関連付けを設定する場合:

    * `onOpenProvider`—ユーザーが既存のProviderをクリックして表示または編集すると呼び出されます
    * `onCreateProvider`—ユーザーがクリックして新しいProviderを作成すると呼び出されます

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      onOpenProvider={(provider) => {
        navigate(`/providers/${provider.id}`);
      }}
      onCreateProvider={() => {
        navigate("/providers/create");
      }}
    />
    ```

    ***

    <h3 id="customization-props-3">
      カスタマイズ用プロップス
    </h3>

    カスタマイズ用のプロップスを使えば、ソースコードを変更せずに、ブランド、ロケール、バリデーション要件に合わせてコンポーネントを調整できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>DomainTableSchema</code>
          </td>

          <td>
            ドメイン URL のバリデーションルール。
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<DomainTableMainMessages></code>
          </td>

          <td>
            i18n テキストのオーバーライド。
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling</code>
          </td>

          <td>
            CSS 変数とクラスのオーバーライド。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

    ドメインURLの入力にカスタムのバリデーションルールを設定します。

    <Accordion title="利用可能なスキーマフィールド">
      **create.domainUrl**—ドメイン URL のバリデーション—`regex`—カスタム正規表現パターン

      * `errorMessage`—カスタムエラーメッセージ
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        create: {
          domainUrl: {
            regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
            errorMessage: "Enter a valid domain (example.com)",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    すべてのテキストと翻訳をカスタマイズできます。すべてのフィールドは任意で、指定しない場合はデフォルト値が使用されます。

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントのヘッダー

      * `title`, `description`, `create_button_text`

      **table**—テーブル表示

      * `empty_message`
      * `columns.domain`, `columns.status`
      * `actions.configure_button_text`, `actions.view_button_text`, `actions.verify_button_text`, `actions.delete_button_text`

      **create.modal**—ドメイン作成モーダル

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **verify.modal**—ドメイン検証モーダル

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—削除確認

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **configure.modal**—プロバイダー設定

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—APIレスポンス

      * `fetch_providers_error`, `fetch_domains_error`
      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_verify_error`, `domain_verify_verification_failed`
      * `domain_delete_success`, `domain_delete_error`
      * `domain_associate_provider_success`, `domain_associate_provider_error`
      * `domain_delete_provider_success`, `domain_delete_provider_error`

      **shared**—共有メッセージ

      * `domain_statuses.pending`, `domain_statuses.verified`, `domain_statuses.failed`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      customMessages={{
        header: {
          title: "Manage Domains",
          description: "Configure and verify organization domains",
          create_button_text: "Add Domain",
        },
        table: {
          empty_message: "No domains yet. Add one to begin.",
        },
        notifications: {
          domain_create_success: "Domain added successfully!",
          domain_verify_success: "Domain verified!",
          domain_delete_success: "Domain removed.",
        },
      }}
    />
    ```

    ***

    **スタイリング**

    CSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマ対応のスタイリングをサポートします。

    <Accordion title="利用可能なスタイリングオプション">
      **変数**—CSS カスタムプロパティ

      * `common`—すべてのテーマに適用
      * `light`—ライトテーマのみ
      * `dark`—ダークテーマのみ

      **クラス**—コンポーネントクラスのオーバーライド

      * `DomainTable-header`
      * `DomainTable-table`
      * `DomainTable-tableActions`
      * `DomainTable-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
      * `DomainTableConfigureModal-dialogContent`
      * `DomainTableVerifyModal-dialogContent`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      styling={{
        variables: {
          common: { "--font-size-title": "1rem" },
          light: { "--color-primary": "#4f46e5" },
        },
        classes: {
          "DomainTable-header": "mb-6",
          "DomainTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization-3">
      高度なカスタマイズ
    </h2>

    <h3 id="available-hooks-3">
      利用可能なフック
    </h3>

    これらのフックは、UIを持たず、基盤となるロジックのみを提供します。Auth0 APIとの連携を活用しつつ、完全に独自のインターフェイスを構築したい場合にご利用ください。

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useDomainTable</code>
          </td>

          <td>データおよび API レイヤー (取得、作成、検証、削除、関連付け) </td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>