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

DomainTable コンポーネントは、お客様が Auth0 Organization のメールドメインを一元管理できるインターフェイスを提供します。ドメインの所有権を検証すると、Organization 管理者はホームレルムディスカバリー (HRD) などの重要な B2B 機能を有効にでき、メールアドレスのサフィックス (例: user@acme.com) に基づいてユーザーを適切な SSO プロバイダーへ自動的にルーティングできます。

React
Next.js
shadcn

設定の要件

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

コンポーネントをインストールする

pnpm add @auth0/universal-components-react

npm install @auth0/universal-components-react

いずれのコマンドを実行した場合も、共有ユーティリティとAuth0連携に必要な@auth0/universal-components-core 依存パッケージがインストールされます。

はじめに

React SPA

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

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

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

プロップス

表示関連のプロップス

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

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

Action のプロップス

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)—ドメインの作成が成功した後に実行されます。通知の表示やイベントの追跡に使用します。

例:

<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)—ドメインの検証が正常に完了した後に実行されます。成功通知を表示するために使用します。

例:

<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)—ドメインの削除が完了した後に実行されます。イベントの追跡や通知の表示に使用します。

例:

<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に正常に関連付けられた後に実行されます。

例:

<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を作成すると呼び出されます

例:

<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: {
      domainUrl: {
        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.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

<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-tableActions
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal
DomainTableConfigureModal-dialogContent
DomainTableVerifyModal-dialogContent

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

高度なカスタマイズ

利用可能なフック

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

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

設定の要件

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

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

npm install @auth0/universal-components-react

pnpm add @auth0/universal-components-react

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

はじめに

page.tsx

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

連携の完全な例

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;

プロップス

表示関連のプロップス

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

Action のプロップス

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)—ドメインの作成が成功した後に実行されます。通知の表示やイベントの追跡に使用します。

例:

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

deleteAction型: 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)—ドメインがProviderに正常に関連付けられた後に実行されます。

例:

<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—ユーザーが既存のProviderをクリックして表示または編集すると呼び出されます
onCreateProvider—ユーザーがクリックして新しいProviderを作成すると呼び出されます

例:

<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.domainUrl—Domain URLのバリデーション—regex—カスタム正規表現パターン - errorMessage—カスタムエラーメッセージ

<DomainTable
  schema={{
    create: {
      domainUrl: {
        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.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

<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-tableActions
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal
DomainTableConfigureModal-dialogContent
DomainTableVerifyModal-dialogContent

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

高度なカスタマイズ

利用可能なフック

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

設定の要件

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

コンポーネントをインストールする

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

npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/domain-table

shadcn CLI では、共有ユーティリティと Auth0 との連携に必要な @auth0/universal-components-core 依存関係もインストールされます。 shadcn CLI v2.5.0+ が必要です。

はじめに

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: {
            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>
  );
}

プロップス

表示関連のプロップス

プロパティ	型	説明
`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—“Add Domain” ボタンを無効にします
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!`);
    },
  }}
/>

deleteAction型: 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)—ドメインがProviderに正常に関連付けられた後に実行されます。

例:

<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—ユーザーが既存のProviderをクリックして表示または編集すると呼び出されます
onCreateProvider—ユーザーがクリックして新しいProviderを作成すると呼び出されます

例:

<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: {
      domainUrl: {
        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.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

<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-tableActions
DomainTable-createModal
DomainTable-configureModal
DomainTable-deleteModal
DomainTableConfigureModal-dialogContent
DomainTableVerifyModal-dialogContent

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

高度なカスタマイズ

利用可能なフック

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

Web Components

iOS Components

Android Components

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

設定の要件

コンポーネントをインストールする

はじめに

プロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック

設定の要件

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

はじめに

プロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック

設定の要件

コンポーネントをインストールする

はじめに

プロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック

​設定の要件

​コンポーネントをインストールする

​はじめに

​プロップス

​表示関連のプロップス

​Action のプロップス

​カスタマイズ用プロップス

​高度なカスタマイズ

​利用可能なフック

​設定の要件

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

​はじめに

​プロップス

​表示関連のプロップス

​Action のプロップス

​カスタマイズ用プロップス

​高度なカスタマイズ

​利用可能なフック

​設定の要件

​コンポーネントをインストールする

​はじめに

​プロップス

​表示関連のプロップス

​Action のプロップス

​カスタマイズ用プロップス

​高度なカスタマイズ

​利用可能なフック

設定の要件

コンポーネントをインストールする

はじめに

プロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック

設定の要件

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

はじめに

プロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック

設定の要件

コンポーネントをインストールする

はじめに

プロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック