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

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

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

React

​

設定の要件

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

​

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

pnpm

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

​

プロップス

​

表示関連のプロップス

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

プロパティ	型	説明
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)—ドメインがプロバイダーに正常に関連付けられた後に実行されます。

例:

<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: {
      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",
    },
  }}
/>

---

​

高度なカスタマイズ

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

​

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

高度なユースケースでは、個々のサブコンポーネントをインポートして、独自のカスタムドメイン管理インターフェイスを構築できます。特定のモーダルをさまざまなコンテキストに埋め込みたい場合や、プロップスでは対応できない範囲までテーブルのレイアウトをカスタマイズしたい場合に便利です。

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

​

利用可能なHooks

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

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

Next.js

​

設定の要件

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

​

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

npm

npm install @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: {
            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;

​

プロップス

​

表示関連のプロップス

表示系のプロップスは、コンポーネントの動作に影響を与えることなく、レンダリングのされ方を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする場合に使用します。

プロパティ	型	説明
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)—ドメインがプロバイダーに正常に関連付けられた後に実行されます。

例:

<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) => {
    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: "有効なドメインを入力してください (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",
    },
  }}
/>

---

​

高度なカスタマイズ

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

​

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

高度なユースケースでは、個々のサブコンポーネントをインポートして、独自のカスタムドメイン管理インターフェイスを構築できます。特定のモーダルをさまざまなコンテキストに埋め込みたい場合や、プロップスでは対応できない範囲までテーブルのレイアウトをカスタマイズしたい場合に便利です。

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

​

利用可能なHooks

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

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

shadcn

​

設定要件

Auth0 Configuration が必要です—テナントが 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>
  );
}

​

プロップス

​

表示関連のプロップス

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

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

---

​

Action のプロップス

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

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

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—検証ボタンを無効にします
• 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—Domain 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—Providerの設定

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

---

​

高度なカスタマイズ

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

​

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

高度なユースケースでは、個々のサブコンポーネントをインポートして、独自のカスタムドメイン管理インターフェイスを構築できます。特定のモーダルを異なるコンテキストに埋め込みたい場合や、プロップスで対応できる範囲を超えてテーブルのレイアウトをカスタマイズしたい場合に便利です。

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

​

利用可能なHooks

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

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