検証済みの組織ドメインを設定する

DomainTable コンポーネントは、お客様が Auth0 組織のメールドメインを管理するための一元的なインターフェイスを提供します。ドメイン所有権を確認すると、組織の管理者は Home Realm Discovery (HRD) などの重要な B2B 機能を有効にできるほか、メールアドレスのサフィックス (例: user@acme.com) に基づいて、ユーザーが適切な SSO プロバイダーに自動的にルーティングされるようになります。

React
Next.js
shadcn

セットアップ要件

Auth0 の設定が必要です - テナントで My Organization API が設定されていることを確認してください。セットアップガイドを参照 →

コンポーネントのインストール

pnpm add @auth0/universal-components-react

いずれのコマンドを実行しても、共有ユーティリティと Auth0 統合に必要な依存関係である @auth0/universal-components-core もインストールされます。

はじめに

React SPA

import { DomainTable } from "@auth0/universal-components-react/spa";

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

完全な統合例

import React from "react";
import { DomainTable } from "@auth0/universal-components-react/spa";
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: {
            domain: {
              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 domain={domain}>
        <DomainsManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

表示プロパティ

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

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

Action のプロパティ

Action propsはユーザーの操作を処理し、ユーザーがドメイン操作を実行した際の動作を定義します。ライフサイクルフック (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`	プロバイダー作成フローに移動します。

createActionType: ComponentAction<Domain>ドメイン作成フローを制御します。新しいドメインが追加されたタイミングを追跡するには、onAfter を使用します。プロパティ:

disabled - 「ドメインを追加」ボタンを無効にします
onBefore(domain) - ドメインが作成される前に実行されます。作成を中止するには false を返します (例: ドメインの形式が無効な場合) 。
onAfter(domain) - ドメインの作成が正常に完了した後に実行されます。通知を表示したり、イベントを追跡したりするために使用します。

例：

<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 });
    },
  }}
/>

verifyActionType: ComponentAction<Domain>ドメイン検証フローを制御します。ドメイン検証では、DNS TXTレコードを使用して所有権を証明します。プロパティ:

disabled - Verify ボタンを無効化します
onBefore(domain) - 検証を試行する前に実行されます。false を返すと検証を行いません (例: DNS が設定されていることを確認するため) 。
onAfter(domain) - ドメインの検証が正常に完了した後に実行されます。成功通知を表示するために使用します。

例：

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

deleteActionType: ComponentAction<Domain>ドメインの削除を制御します。この操作は破壊的なため、確認には onBefore の使用を推奨します。プロパティ:

disabled - 削除ボタンを無効化する
onBefore(domain) - 削除前に実行されます。削除を防ぐには false を返します (確認ダイアログでの使用を推奨) 。
onAfter(domain) - ドメインが正常に削除された後に実行されます。このイベントの記録や通知の表示に使用します。

例：

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

associateToProviderActionType: ComponentAction<Domain, IdentityProvider>検証済みドメインをSSOプロバイダーに関連付ける操作を制御します。関連付けできるのは検証済みドメインのみです。プロパティ:

disabled - 関連付けを無効にします
onBefore(domain, provider) - 関連付けの前に実行されます。関連付けを中止するには false を返します。
onAfter(domain, provider) - ドメインのプロバイダーへの関連付けが正常に完了した後に実行されます。

例：

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

deleteFromProviderActionType: ComponentAction<Domain, IdentityProvider>ドメインとSSOプロバイダーの関連付けを削除する操作を制御します。プロパティ:

disabled - 関連付け解除アクションを無効にする
onBefore(domain, provider) - 削除前に実行されます。削除を中止するには false を返します。
onAfter(domain, provider) - ドメインがプロバイダーから正常に削除されたあとに実行されます。

onOpenProvider / onCreateProviderType: (provider: IdentityProvider) => void / () => voidドメイン設定モーダルのナビゲーションハンドラー。ユーザーがドメインのプロバイダー関連付けを設定する際：

onOpenProvider - ユーザーが既存のプロバイダーをクリックして表示または編集すると呼び出されます
onCreateProvider - ユーザーが新しいプロバイダーを作成するためにクリックしたときに呼び出されます

例：

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

カスタマイズのプロパティ

カスタマイズ用プロパティを使用すると、ソースコードを変更せずに、ブランド、ロケール、検証要件に合わせてコンポーネントを調整できます。

プロパティ	型	説明
`schema`	`DomainTableSchema`	ドメイン URL の検証ルール。
`customMessages`	`Partial<DomainTableMainMessages>`	i18n テキストの上書き。
`styling`	`ComponentStyling`	CSS 変数およびクラスの上書き。

スキーマドメインURL入力のカスタム検証ルールを設定します。

利用可能なスキーマフィールド

create.domainUrl - ドメイン URL の検証 - regex - カスタム正規表現パターン

errorMessage - カスタムエラーメッセージ

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

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

利用可能なメッセージ

<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変数とクラスのオーバーライドを使用して外観をカスタマイズします。テーマ対応のスタイリングをサポートします。

利用可能なスタイルオプション

変数 - CSS カスタムプロパティ

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

クラス - コンポーネントクラスの上書き

DomainTable-header
DomainTable-table
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal

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

高度なカスタマイズ

DomainTable コンポーネントは、より小さなサブコンポーネントとフックで構成されています。shadcn を使用している場合は、それらを個別にインポートしてカスタムドメインのワークフローを構築できます。

利用可能なサブコンポーネント

高度なユースケースでは、個々のサブコンポーネントをインポートして、カスタムドメイン管理インターフェースを構築できます。これは、特定のモーダルをさまざまなコンテキストに埋め込む場合や、propsで設定できる範囲を超えてテーブルレイアウトをカスタマイズする場合に役立ちます。

コンポーネント	説明
`DomainCreateModal`	ドメイン作成用のモーダル
`DomainVerifyModal`	検証フロー用のモーダル
`DomainDeleteModal`	削除確認用のモーダル
`DomainConfigureProvidersModal`	プロバイダーの関連付けを管理
`DomainTableActionsColumn`	各ドメイン行の操作ボタン

利用可能なフック

これらのフックはUIを持たず、基盤となるロジックを提供します。Auth0 APIとの統合を活用しながら、完全にカスタムなインターフェースを構築できます。

Hook	説明
`useDomainTable`	データ + API レイヤー (取得、作成、検証、削除、関連付け)
`useDomainTableLogic`	UI の操作状態 + ハンドラー (モーダル、通知)

セットアップ要件

Auth0 の設定が必要です - お使いのテナントで My Organization API が設定されていることを確認してください。設定ガイドを表示 →

コンポーネントのインストール

npm install @auth0/universal-components-react

pnpm または npm コマンドを実行すると、共有ユーティリティと Auth0 統合に必要な依存関係である @auth0/universal-components-core がインストールされます。

はじめに

page.tsx

import { DomainTable } from "@auth0/universal-components-react/rwa";
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");
      }}
    />
  );
}

統合の完全な実装例

import React from "react";
import { DomainTable } from "@auth0/universal-components-react/rwa";
import { useRouter } from "next/navigation";

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

  return (
    <div className="max-w-6xl mx-auto p-6">
      <DomainTable
        schema={{
          create: {
            domain: {
              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;

Props

表示プロパティ

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

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

Action のプロパティ

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

disabled - “ドメインを追加” ボタンを無効にします
onBefore(domain) - ドメインが作成される前に実行されます。作成を中止するには false を返します (例: ドメインの形式が無効な場合) 。
onAfter(domain) - ドメインの作成に成功した後に実行されます。通知を表示したり、イベントを追跡したりするために使用します。

例：

<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 });
    },
  }}
/>

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

例：

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

deleteActionType: ComponentAction<Domain>ドメインの削除を制御します。この操作は破壊的なため、確認には onBefore の使用を推奨します。プロパティ:

disabled - 削除ボタンを無効化する
onBefore(domain) - 削除前に実行されます。削除を防ぐには false を返します (確認ダイアログでの使用を推奨) 。
onAfter(domain) - ドメインが正常に削除された後に実行されます。このイベントを追跡したり、通知を表示したりするために使用します。

例：

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

disabled - 関連付け操作を無効にする
onBefore(domain, provider) - 関連付けの前に実行されます。false を返すと、関連付けは行われません。
onAfter(domain, provider) - ドメインがプロバイダーに正常に関連付けられた後で実行されます。

例：

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

deleteFromProviderActionType: ComponentAction<Domain, IdentityProvider>ドメインとSSOプロバイダーの関連付けの削除を制御します。プロパティ:

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

onOpenProvider / onCreateProvider型: (provider: IdentityProvider) => void / () => voidドメイン設定モーダルのナビゲーションハンドラー。ユーザーがドメインのプロバイダー関連付けを設定する際：

onOpenProvider - ユーザーが既存のプロバイダーをクリックして表示または編集する際に呼び出されます
onCreateProvider - ユーザーが新しいプロバイダーの作成をクリックしたときに呼び出されます

例：

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

カスタマイズのプロパティ

カスタマイズ用プロパティを使用すると、ソースコードを変更せずに、ブランド、ロケール、検証要件に合わせてコンポーネントをカスタマイズできます。

プロパティ	型	説明
`schema`	`DomainTableSchema`	ドメイン URL の検証ルール。
`customMessages`	`Partial<DomainTableMainMessages>`	i18n テキストの上書き設定。
`styling`	`ComponentStyling`	CSS 変数およびクラスの上書き設定。

スキーマドメインURL入力のカスタム検証ルールを設定します。

利用可能なスキーマフィールド

create.domain - ドメイン URL の検証 - regex - カスタム正規表現パターン - errorMessage - カスタムエラーメッセージ

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

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

利用できるメッセージ

<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変数とクラスのオーバーライドを使用して外観をカスタマイズします。テーマ対応のスタイリングをサポートします。

利用可能なスタイルオプション

変数 - CSS カスタムプロパティ

common - すべてのテーマに適用されます
light - ライトテーマのみ
dark - ダークテーマのみ

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

DomainTable-header
DomainTable-table
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal

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

高度なカスタマイズ

DomainTable コンポーネントは、より小さなサブコンポーネントとフックで構成されています。それらを個別にインポートすることで、カスタムドメインのワークフローを構築できます。

利用可能なサブコンポーネント

高度なユースケースでは、個々のサブコンポーネントをインポートして、カスタムドメイン管理インターフェースを構築できます。これは、特定のモーダルをさまざまなコンテキストに埋め込む必要がある場合や、propsの範囲を超えてテーブルレイアウトをカスタマイズしたい場合に役立ちます。

コンポーネント	説明
`DomainCreateModal`	ドメイン作成用のモーダル
`DomainVerifyModal`	検証フロー用のモーダル
`DomainDeleteModal`	削除確認用のモーダル
`DomainConfigureProvidersModal`	プロバイダーの関連付けを管理
`DomainTableActionsColumn`	各ドメイン行のアクションボタン

利用可能なフック

これらのフックはUIを持たず、基盤となるロジックのみを提供します。Auth0 APIとの統合を活用しながら、完全にカスタムなインターフェースを構築できます。

フック	説明
`useDomainTable`	データ + API レイヤー (取得、作成、検証、削除、関連付け)
`useDomainTableLogic`	UI の操作状態 + ハンドラー (モーダル、通知)

セットアップ要件

Auth0 の設定が必要です - テナントで My Organization API が設定されていることを確認してください。セットアップガイドを表示 →

コンポーネントのインストール

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/domain-table.json

shadcn コマンドを実行すると、共有ユーティリティと Auth0 統合で使用する @auth0/universal-components-core 依存関係もインストールされます。

はじめに

import { DomainTable } from "@/components/auth0/my-organization/domain-table";

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

完全な統合の例

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: {
            domain: {
              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 domain={domain}>
        <DomainsManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

表示プロパティ

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

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

Action のプロパティ

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

disabled - 「ドメインを追加」ボタンを無効にする
onBefore(domain) - ドメインが作成される前に実行されます。作成を中止するには false を返します (例: ドメイン形式が無効な場合) 。
onAfter(domain) - ドメインの作成が正常に完了した後に実行されます。通知を表示したり、イベントを追跡したりするために使用します。

例：

<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 });
    },
  }}
/>

disabled - 確認ボタンを無効にする
onBefore(domain) - 検証を試行する前に実行されます。検証を行わないようにするには false を返します (例: DNS が設定されていることを確認する場合) 。
onAfter(domain) - ドメインの検証が正常に完了した後に実行されます。成功通知の表示に使用します。

例：

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

deleteActionType: ComponentAction<Domain>ドメインの削除を制御します。この操作は破壊的なため、確認には onBefore の使用を推奨します。プロパティ:

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

例：

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

disabled - 関連付け操作を無効にします
onBefore(domain, provider) - 関連付けの前に実行されます。関連付けを行わないようにするには、false を返します。
onAfter(domain, provider) - ドメインがプロバイダーに正常に紐付けられた後に実行されます。

例：

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

deleteFromProviderActionType: ComponentAction<Domain, IdentityProvider>ドメインとSSOプロバイダーの関連付けを削除する操作を制御します。プロパティ:

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

onOpenProvider - ユーザーが既存のプロバイダーをクリックして表示または編集するときに呼び出されます
onCreateProvider - ユーザーが新しいプロバイダーの作成をクリックしたときに呼び出されます

例：

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

カスタマイズのプロパティ

プロパティ	型	説明
`schema`	`DomainTableSchema`	ドメイン URL の検証ルール。
`customMessages`	`Partial<DomainTableMainMessages>`	i18n テキストのオーバーライド。
`styling`	`ComponentStyling`	CSS 変数とクラスのオーバーライド。

スキーマドメインURL入力に対するカスタム検証ルールを設定します。

利用可能なスキーマフィールド

create.domainUrl - ドメイン URL の検証 - regex - カスタム正規表現パターン

errorMessage - カスタムエラーメッセージ

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

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

利用可能なメッセージ

header - コンポーネントヘッダー

title, description, create_button_text

table - テーブル

empty_message
columns.domain, columns.status
actions.configure_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.create_button_text

configure.modal - プロバイダー設定

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

notifications - APIレスポンス

domain_create_success, domain_create_error
domain_verify_success, domain_delete_success

<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変数とクラスのオーバーライドを使用して外観をカスタマイズします。テーマ対応のスタイリングをサポートします。

利用可能なスタイルオプション

変数 - CSS カスタムプロパティ

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

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

DomainTable-header
DomainTable-table
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal

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

高度なカスタマイズ

利用可能なサブコンポーネント

コンポーネント	説明
`DomainCreateModal`	ドメイン作成用のモーダル
`DomainVerifyModal`	検証フロー用のモーダル
`DomainDeleteModal`	削除確認用のモーダル
`DomainConfigureProvidersModal`	プロバイダーの関連付けを管理するモーダル
`DomainTableActionsColumn`	各ドメイン行のアクションボタン

利用可能なフック

これらのフックはUIを持たず、基盤となるロジックを提供します。Auth0 APIの統合を活用しながら、完全にカスタムなインターフェースを構築するために使用してください。

フック	説明
`useDomainTable`	データ + APIレイヤー (取得、作成、検証、削除、関連付け)
`useDomainTableLogic`	UI操作の状態 + ハンドラー (モーダル、通知)

​セットアップ要件

​コンポーネントのインストール

​はじめに

​Props

​表示プロパティ

​Action のプロパティ

​カスタマイズのプロパティ

​高度なカスタマイズ

​利用可能なサブコンポーネント

​利用可能なフック

​セットアップ要件

​コンポーネントのインストール

​はじめに

​Props

​表示プロパティ

​Action のプロパティ

​カスタマイズのプロパティ

​高度なカスタマイズ

​利用可能なサブコンポーネント

​利用可能なフック

​セットアップ要件

​コンポーネントのインストール

​はじめに

​Props

​表示プロパティ

​Action のプロパティ

​カスタマイズのプロパティ

​高度なカスタマイズ

​利用可能なサブコンポーネント

​利用可能なフック

セットアップ要件

コンポーネントのインストール

はじめに

Props

表示プロパティ

Action のプロパティ

カスタマイズのプロパティ

高度なカスタマイズ

利用可能なサブコンポーネント

利用可能なフック

セットアップ要件

コンポーネントのインストール

はじめに

Props

表示プロパティ

Action のプロパティ

カスタマイズのプロパティ

高度なカスタマイズ

利用可能なサブコンポーネント

利用可能なフック

セットアップ要件

コンポーネントのインストール

はじめに

Props

表示プロパティ

Action のプロパティ

カスタマイズのプロパティ

高度なカスタマイズ

利用可能なサブコンポーネント

利用可能なフック