SSOプロバイダーテーブル

作成、編集、削除、有効化/無効化に対応した表形式のインターフェイスで、SSO IDプロバイダーを表示・管理します。

SsoProviderTable コンポーネントは、組織の シングルサインオン (SSO) プロバイダーを一覧表示して設定するための統一されたインターフェイスを提供します。

React

​

セットアップ要件

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

​

インストール

pnpm

pnpm add @auth0/universal-components-react

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

​

はじめに

import { SsoProviderTable } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";

export function ProvidersPage() {
  const navigate = useNavigate();

  return (
    <SsoProviderTable
      createAction={{
        onAfter: () => navigate("/providers/create"),
      }}
      editAction={{
        onAfter: (provider) => navigate(`/providers/${provider.id}`),
      }}
    />
  );
}

統合の完全な例

import React from "react";
import { SsoProviderTable } 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";
import { analytics } from "./lib/analytics";

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

  return (
    <div className="max-w-6xl mx-auto p-6">
      <SsoProviderTable
        createAction={{
          onAfter: () => {
            analytics.track("Create Provider Started");
            navigate("/providers/create");
          },
        }}
        editAction={{
          onAfter: (provider) => {
            analytics.track("Provider Selected", { name: provider.name });
            navigate(`/providers/${provider.id}`);
          },
        }}
        deleteAction={{
          onBefore: (provider) => {
            return confirm(
              `Delete "${provider.display_name}"? This is permanent.`,
            );
          },
          onAfter: (provider) => {
            analytics.track("Provider Deleted", { name: provider.name });
          },
        }}
        enableProviderAction={{
          onAfter: (provider) => {
            analytics.track(
              provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
              {
                name: provider.name,
              },
            );
          },
        }}
        customMessages={{
          header: {
            title: "SSO Providers",
            description: "Manage identity providers for your organization",
            create_button_text: "Add New Provider",
          },
          table: {
            empty_message:
              "No providers configured yet. Add one to enable SSO.",
          },
        }}
        styling={{
          variables: {
            light: { "--color-primary": "#0066cc" },
          },
          classes: {
            "SsoProviderTable-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}>
        <ProvidersManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

必須プロパティ

必須プロパティはコンポーネントの動作に不可欠です。SsoProviderTable は、一般的なプロバイダー管理ワークフローを処理するために、両方のナビゲーションアクションを必要とします。

プロパティ	型	説明
createAction	ComponentAction<void>	必須。 プロバイダーの作成画面に移動します。
editAction	ComponentAction<IdentityProvider>	必須。 プロバイダーの編集画面に移動します。

createAction

Type: ComponentAction<void>

createAction プロパティは必須です。ユーザーが「プロバイダーを追加」をクリックした際の遷移先を制御するためです。このプロパティがないと、テーブルはプロバイダー作成フローを開始できません。

プロパティ:

• disabled - “プロバイダーを追加” ボタンを無効にします
• onBefore() - ナビゲーションが行われる前に実行されます。ナビゲーションを中止するには、false を返します (例: ユーザーに権限がない場合) 。
• onAfter() - onBefore が正常に完了した後に実行されます。これを使用して、作成ページに移動したり、アナリティクスを追跡したりできます。

例：

// 作成ページに移動する
createAction={{
  onAfter: () => navigate("/providers/create"),
}}

// 作成を許可する前にPermissionsを確認する
createAction={{
  onBefore: () => {
    if (!hasPermission("create:providers")) {
      alert("You don't have permission to create providers");
      return false;
    }
    return true;
  },
  onAfter: () => navigate("/providers/create"),
}}

// 作成操作のアナリティクスを追跡する
createAction={{
  onAfter: () => {
    analytics.track("Create Provider Started");
    navigate("/providers/create");
  },
}}

---

editAction

Type: ComponentAction<IdentityProvider>

editAction プロパティは必須です。ユーザーがプロバイダーの行をクリックした際の遷移先を制御するためです。コールバックはプロバイダーのデータを受け取るので、適切な編集ページへ遷移できます。

プロパティ:

• disabled - 行クリックによるナビゲーションを無効にする
• onBefore(provider) - ナビゲーションが行われる前に実行されます。false を返すとナビゲーションを防止できます (例: 条件付きアクセスのチェック) 。
• onAfter(provider) - onBefore が成功した後に実行されます。これを使用して、プロバイダーのデータを含む編集ページに移動できます。

例：

// プロバイダーIDを使用して編集ページに移動する
editAction={{
  onAfter: (provider) => navigate(`/providers/${provider.id}`),
}}

// プロバイダー選択時にアナリティクスを記録する
editAction={{
  onAfter: (provider) => {
    analytics.track("Provider Selected", {
      id: provider.id,
      name: provider.name,
      strategy: provider.strategy,
    });
    navigate(`/providers/${provider.id}`);
  },
}}

---

​

表示プロパティ

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

プロパティ	型	説明
readOnly	boolean	テーブル上のすべての操作を無効にします。デフォルト: false
hideHeader	boolean	ヘッダーを非表示にします。デフォルト: false

---

​

Action のプロパティ

Action のプロパティは、コアナビゲーション以外のユーザー操作を処理します。削除、除去、有効化/無効化などの操作を制御します。

プロパティ	型	説明
deleteAction	ComponentAction<IdentityProvider>	プロバイダーを完全に削除します。
deleteFromOrganizationAction	ComponentAction<IdentityProvider>	組織からプロバイダーを削除します。
enableProviderAction	ComponentAction<IdentityProvider>	プロバイダーの有効/無効を切り替えます。

deleteAction

Type: ComponentAction<IdentityProvider>

SSOプロバイダーの完全削除を制御します。この操作は破壊的です。プロバイダーはAuth0テナントから完全に削除されます。

プロパティ:

• disabled - 削除オプションを無効化します
• onBefore(provider) - 削除前に実行されます。削除を中止するには false を返します (確認ダイアログでの利用を推奨) 。
• onAfter(provider) - プロバイダーが正常に削除された後に実行されます。イベントの追跡や通知の表示に使用します。

例：

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  deleteAction={{
    onBefore: (provider) => {
      return confirm(
        `Permanently delete "${provider.display_name}"? This cannot be undone.`,
      );
    },
    onAfter: (provider) => {
      analytics.track("Provider Deleted", { name: provider.name });
      toast.success("Provider deleted");
    },
  }}
/>

---

deleteFromOrganizationAction

Type: ComponentAction<IdentityProvider>

プロバイダーをテナントから削除せずに組織から削除する操作を制御します。プロバイダーは後から再追加できる状態で保持されます。

プロパティ:

• disabled - 削除オプションを無効にする
• onBefore(provider) - 削除前に実行されます。削除を中止するには、false を返します (例: 確認を表示する場合) 。
• onAfter(provider) - プロバイダーが組織から正常に削除された後に実行されます。

例：

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  deleteFromOrganizationAction={{
    onBefore: (provider) => {
      return confirm(
        `Remove "${provider.display_name}" from this organization?`,
      );
    },
    onAfter: (provider) => {
      toast.success(`${provider.display_name} removed from organization`);
    },
  }}
/>

---

enableProviderAction

Type: ComponentAction<IdentityProvider>

プロバイダーの有効/無効トグルを制御します。無効化されたプロバイダーは設定が維持されますが、ユーザーはそのプロバイダーを通じて認証できません。

プロパティ:

• disabled - トグルを無効化します
• onBefore(provider) - トグルが切り替わる前に実行されます。状態の変更を防ぐには false を返します。
• onAfter(provider) - プロバイダーの有効化または無効化が正常に完了した後に実行されます。

例：

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  enableProviderAction={{
    onBefore: (provider) => {
      if (!provider.is_enabled) {
        return confirm(`Enable "${provider.display_name}" for authentication?`);
      }
      return confirm(
        `Disable "${provider.display_name}"? Users won't be able to authenticate.`,
      );
    },
    onAfter: (provider) => {
      analytics.track(
        provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
        {
          name: provider.name,
        },
      );
    },
  }}
/>

---

​

カスタマイズプロパティ

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

プロパティ	型	説明
schema	SsoProviderTableSchema	確認フィールドのバリデーション。
customMessages	Partial<SsoProviderTableMessages>	i18n テキストの上書き。
styling	ComponentStyling<SsoProviderTableClasses>	CSS 変数およびクラスの上書き。

スキーマ

確認ダイアログにカスタム検証ルールを設定します (例：削除を確認するためにプロバイダー名を入力) 。

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

すべてのスキーマフィールドで regex と errorMessage をサポートしています

delete.providerName - 完全削除の確認 remove.providerName - 組織からの削除の確認

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  schema={{
    delete: {
      providerName: {
        regex: /^.+$/,
        errorMessage: "Please type the provider name to confirm",
      },
    },
  }}
/>

---

customMessages

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

利用可能なメッセージ

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

• title, description, create_button_text

table - テーブル表示

• empty_message
• columns.name, columns.strategy, columns.status
• actions.edit_button_text, actions.delete_button_text, actions.remove_button_text

delete.modal - 削除確認

• title, description
• field.label, field.placeholder, field.error
• actions.cancel_button_text, actions.delete_button_text

remove.modal - 組織からの削除確認

• title, description
• actions.cancel_button_text, actions.remove_button_text

notifications - APIレスポンス

• provider_delete_success, provider_delete_error
• provider_remove_success, provider_enable_success, provider_disable_success

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  customMessages={{
    header: {
      title: "Identity Providers",
      description: "Manage SSO connections for your organization",
      create_button_text: "Add Provider",
    },
    table: {
      empty_message:
        "No SSO providers configured. Add one to enable single sign-on.",
    },
    notifications: {
      provider_delete_success: "Provider deleted successfully!",
    },
  }}
/>

---

スタイリング

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

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

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

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

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

• SsoProviderTable-header
• SsoProviderTable-table
• SsoProviderTable-row
• SsoProviderTable-deleteModal
• SsoProviderTable-removeModal

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.25rem",
      },
      light: {
        "--color-primary": "#4f46e5",
      },
    },
    classes: {
      "SsoProviderTable-header": "mb-6",
      "SsoProviderTable-table": "rounded-lg shadow-sm",
    },
  }}
/>

---

​

高度なカスタマイズ

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

​

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

高度なユースケースでは、個々のサブコンポーネントをインポートして、カスタムのプロバイダー管理インターフェースを構築できます。テーブルを別のレイアウトに埋め込む場合や、行のレンダリングをカスタマイズする場合に活用できます。

コンポーネント	説明
ProviderRow	アクションを備えた個別のプロバイダー行
ProviderDeleteModal	完全削除の確認モーダル
ProviderRemoveModal	組織からの削除の確認モーダル
ProviderStatusToggle	有効/無効を切り替えるコンポーネント
ProviderStrategyIcon	ストラテジーアイコンのレンダラー (Okta、SAML など)

​

利用可能なHooks

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

フック	説明
useSsoProviderTable	プロバイダー一覧の取得と管理
useSsoProviderTableLogic	UI の操作状態 + ハンドラー (モーダル、アクション)

Next.js

​

セットアップ要件

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

​

インストール

npm (Recommended)

npm install @auth0/universal-components-react

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

​

はじめに

page.tsx

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

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

  return (
    <SsoProviderTable
      createAction={{
        onAfter: () => router.push("/providers/create"),
      }}
      editAction={{
        onAfter: (provider) => router.push(`/providers/${provider.id}`),
      }}
    />
  );
}

統合の完全な例

import React from "react";
import { SsoProviderTable } from "@auth0/universal-components-react/rwa";
import { useRouter } from "next/navigation";
import { analytics } from "./lib/analytics";

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

  return (
    <div className="max-w-6xl mx-auto p-6">
      <SsoProviderTable
        createAction={{
          onAfter: () => {
            analytics.track("Create Provider Started");
            router.push("/providers/create");
          },
        }}
        editAction={{
          onAfter: (provider) => {
            analytics.track("Provider Selected", { name: provider.name });
            router.push(`/providers/${provider.id}`);
          },
        }}
        deleteAction={{
          onBefore: (provider) => {
            return confirm(
              `Delete "${provider.display_name}"? This is permanent.`,
            );
          },
          onAfter: (provider) => {
            analytics.track("Provider Deleted", { name: provider.name });
          },
        }}
        enableProviderAction={{
          onAfter: (provider) => {
            analytics.track(
              provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
              {
                name: provider.name,
              },
            );
          },
        }}
        customMessages={{
          header: {
            title: "SSO Providers",
            description: "Manage identity providers for your organization",
            create_button_text: "Add New Provider",
          },
          table: {
            empty_message:
              "No providers configured yet. Add one to enable SSO.",
          },
        }}
        styling={{
          variables: {
            light: { "--color-primary": "#0066cc" },
          },
          classes: {
            "SsoProviderTable-header": "shadow-lg rounded-xl",
          },
        }}
      />
    </div>
  );
}

export default ProvidersManagementPage;

​

プロパティ

​

コアプロパティ

コアpropsはコンポーネントの動作に不可欠です。SsoProviderTableは、一般的なプロバイダー管理ワークフローを処理するために、両方のナビゲーションアクションを必要とします。

プロパティ	型	説明
createAction	ComponentAction<void>	必須。 プロバイダーの作成画面に移動します。
editAction	ComponentAction<IdentityProvider>	必須。 プロバイダーの編集画面に移動します。

createAction

Type: ComponentAction<void>

createAction プロパティは必須です。ユーザーが「プロバイダーを追加」をクリックした際の遷移先を制御するためです。このプロパティがないと、テーブルはプロバイダー作成フローを開始できません。

プロパティ:

• disabled - “プロバイダーを追加” ボタンを無効にする
• onBefore() - ナビゲーションが行われる前に実行されます。false を返すと、ナビゲーションを中止できます (例: ユーザーに権限がない場合) 。
• onAfter() - onBefore が成功した後に実行されます。これを使用して、作成ページに移動したり、分析を追跡したりできます。

例：

// 作成ページに移動する
createAction={{
  onAfter: () => router.push("/providers/create"),
}}

// 作成を許可する前にPermissionsを確認する
createAction={{
  onBefore: () => {
    if (!hasPermission("create:providers")) {
      alert("You don't have permission to create providers");
      return false;
    }
    return true;
  },
  onAfter: () => router.push("/providers/create"),
}}

// 作成操作のアナリティクスを追跡する
createAction={{
  onAfter: () => {
    analytics.track("Create Provider Started");
    router.push("/providers/create");
  },
}}

---

editAction

Type: ComponentAction<IdentityProvider>

editAction プロパティは必須です。ユーザーがプロバイダーの行をクリックした際の遷移先を制御するためです。コールバックはプロバイダーのデータを受け取るので、適切な編集ページへ遷移できます。

プロパティ:

• disabled - 行クリック時のナビゲーションを無効化
• onBefore(provider) - ナビゲーションが行われる前に実行されます。ナビゲーションを中止するには false を返します (例: 条件付きアクセスのチェックを行う場合) 。
• onAfter(provider) - onBefore が成功した後に実行されます。これを使用して、プロバイダーのデータを含む編集ページに移動します。

例：

// プロバイダーIDを使用して編集ページに移動する
editAction={{
  onAfter: (provider) => router.push(`/providers/${provider.id}`),
}}

// プロバイダー選択時にアナリティクスを追跡する
editAction={{
  onAfter: (provider) => {
    analytics.track("Provider Selected", {
      id: provider.id,
      name: provider.name,
      strategy: provider.strategy,
    });
    router.push(`/providers/${provider.id}`);
  },
}}

---

​

表示プロパティ

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

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

---

​

Action のプロパティ

Action のプロパティは、コアナビゲーション以外のユーザー操作を処理します。削除、除去、有効化/無効化などの操作を制御します。

プロパティ	型	説明
deleteAction	ComponentAction<IdentityProvider>	プロバイダーを完全に削除します。
deleteFromOrganizationAction	ComponentAction<IdentityProvider>	組織からプロバイダーを削除します。
enableProviderAction	ComponentAction<IdentityProvider>	プロバイダーの有効/無効を切り替えます。

deleteAction

Type: ComponentAction<IdentityProvider>

SSOプロバイダーの完全削除を制御します。この操作は取り消しができないため、プロバイダーはAuth0テナントから完全に削除されます。

プロパティ:

• disabled - 削除オプションを無効にします
• onBefore(provider) - 削除前に実行されます。削除を中止するには false を返します (確認ダイアログでの使用を推奨) 。
• onAfter(provider) - プロバイダーが正常に削除された後に実行されます。イベントを記録したり、通知を表示したりするために使用します。

例：

<SsoProviderTable
  createAction={{ onAfter: () => router.push("/providers/create") }}
  editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
  deleteAction={{
    onBefore: (provider) => {
      return confirm(
        `Permanently delete "${provider.display_name}"? This cannot be undone.`,
      );
    },
    onAfter: (provider) => {
      analytics.track("Provider Deleted", { name: provider.name });
      toast.success("Provider deleted");
    },
  }}
/>

---

deleteFromOrganizationAction

Type: ComponentAction<IdentityProvider>

プロバイダーをテナントから削除せずに組織から削除する操作を制御します。プロバイダーは後から再追加できる状態で保持されます。

プロパティ:

• disabled - 削除オプションを無効にする
• onBefore(provider) - 削除前に実行されます。削除を中止するには false を返します (例: 確認を表示する場合) 。
• onAfter(provider) - プロバイダーが組織から正常に削除された後に実行されます。

例：

<SsoProviderTable
  createAction={{ onAfter: () => router.push("/providers/create") }}
  editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
  deleteFromOrganizationAction={{
    onBefore: (provider) => {
      return confirm(
        `Remove "${provider.display_name}" from this organization?`,
      );
    },
    onAfter: (provider) => {
      toast.success(`${provider.display_name} removed from organization`);
    },
  }}
/>

---

enableProviderAction

Type: ComponentAction<IdentityProvider>

プロバイダーの有効/無効トグルを制御します。無効化されたプロバイダーは設定が維持されますが、ユーザーはそのプロバイダーを通じて認証できなくなります。

プロパティ:

• disabled - トグルを無効にする
• onBefore(provider) - 切り替え前に実行されます。状態の変更を防ぐには false を返します。
• onAfter(provider) - プロバイダーの有効化または無効化が正常に行われた後に実行されます。

例：

<SsoProviderTable
  createAction={{ onAfter: () => router.push("/providers/create") }}
  editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
  enableProviderAction={{
    onBefore: (provider) => {
      if (!provider.is_enabled) {
        return confirm(`Enable "${provider.display_name}" for authentication?`);
      }
      return confirm(
        `Disable "${provider.display_name}"? Users won't be able to authenticate.`,
      );
    },
    onAfter: (provider) => {
      analytics.track(
        provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
        {
          name: provider.name,
        },
      );
    },
  }}
/>

---

​

カスタマイズプロパティ

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

プロパティ	型	説明
schema	SsoProviderTableSchema	確認フィールドのバリデーション。
customMessages	Partial<SsoProviderTableMessages>	i18n テキストのオーバーライド。
styling	ComponentStyling<SsoProviderTableClasses>	CSS 変数およびクラスのオーバーライド。

スキーマ

確認ダイアログにカスタム検証ルールを設定します (例：削除を確認するためにプロバイダー名を入力) 。

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

すべてのスキーマ フィールドで regex、errorMessage をサポートします

delete.providerName - 完全に削除する際の確認 remove.providerName - 組織から削除する際の確認

<SsoProviderTable
  createAction={{ onAfter: () => router.push("/providers/create") }}
  editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
  schema={{
    delete: {
      providerName: {
        regex: /^.+$/,
        errorMessage: "Please type the provider name to confirm",
      },
    },
  }}
/>

---

customMessages

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

利用できるメッセージ

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

• title, description, create_button_text

table - テーブル表示

• empty_message
• columns.name, columns.strategy, columns.status
• actions.edit_button_text, actions.delete_button_text, actions.remove_button_text

delete.modal - 削除の確認

• title, description
• field.label, field.placeholder, field.error
• actions.cancel_button_text, actions.delete_button_text

remove.modal - 組織からの削除の確認

• title, description
• actions.cancel_button_text, actions.remove_button_text

notifications - API のレスポンス

• provider_delete_success, provider_delete_error
• provider_remove_success, provider_enable_success, provider_disable_success

<SsoProviderTable
  createAction={{ onAfter: () => router.push("/providers/create") }}
  editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
  customMessages={{
    header: {
      title: "Identity Providers",
      description: "Manage SSO connections for your organization",
      create_button_text: "Add Provider",
    },
    table: {
      empty_message:
        "No SSO providers configured. Add one to enable single sign-on.",
    },
    notifications: {
      provider_delete_success: "Provider deleted successfully!",
    },
  }}
/>

---

スタイリング

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

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

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

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

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

• SsoProviderTable-header
• SsoProviderTable-table
• SsoProviderTable-row
• SsoProviderTable-deleteModal
• SsoProviderTable-removeModal

<SsoProviderTable
  createAction={{ onAfter: () => router.push("/providers/create") }}
  editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.25rem",
      },
      light: {
        "--color-primary": "#4f46e5",
      },
    },
    classes: {
      "SsoProviderTable-header": "mb-6",
      "SsoProviderTable-table": "rounded-lg shadow-sm",
    },
  }}
/>

---

​

高度なカスタマイズ

SsoProviderTable コンポーネントは、複数のサブコンポーネントとフックで構成されています。それらを個別にインポートして、カスタムプロバイダー管理ワークフローを構築できます。

​

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

高度なユースケースでは、個々のサブコンポーネントをインポートして、カスタムのプロバイダー管理インターフェースを構築できます。テーブルを別のレイアウトに埋め込む場合や、行のレンダリングをカスタマイズする場合に活用できます。

コンポーネント	説明
ProviderRow	アクションを備えた個別のプロバイダー行
ProviderDeleteModal	完全削除の確認用モーダル
ProviderRemoveModal	組織からの削除の確認用モーダル
ProviderStatusToggle	有効/無効を切り替えるコンポーネント
ProviderStrategyIcon	ストラテジーアイコンを表示するレンダラー (Okta、SAML など)

​

利用可能なHooks

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

フック	説明
useSsoProviderTable	プロバイダー一覧の取得と管理
useSsoProviderTableLogic	UI のインタラクション状態とハンドラー (モーダル、操作)

shadcn

​

セットアップ要件

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

​

インストール

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

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

​

はじめに

import { SsoProviderTable } from "@/components/auth0/my-organization/sso-provider-table";

export function ProvidersPage() {
  const navigate = useNavigate();

  return (
    <SsoProviderTable
      createAction={{
        onAfter: () => navigate("/providers/create"),
      }}
      editAction={{
        onAfter: (provider) => navigate(`/providers/${provider.id}`),
      }}
    />
  );
}

完全な統合例

import React from "react";
import { SsoProviderTable } from "@/components/auth0/my-organization/sso-provider-table";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

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

  return (
    <div className="max-w-6xl mx-auto p-6">
      <SsoProviderTable
        createAction={{
          onAfter: () => {
            analytics.track("Create Provider Started");
            navigate("/providers/create");
          },
        }}
        editAction={{
          onAfter: (provider) => {
            analytics.track("Provider Selected", { name: provider.name });
            navigate(`/providers/${provider.id}`);
          },
        }}
        deleteAction={{
          onBefore: (provider) => {
            return confirm(
              `Delete "${provider.display_name}"? This is permanent.`,
            );
          },
          onAfter: (provider) => {
            analytics.track("Provider Deleted", { name: provider.name });
          },
        }}
        enableProviderAction={{
          onAfter: (provider) => {
            analytics.track(
              provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
              {
                name: provider.name,
              },
            );
          },
        }}
        customMessages={{
          header: {
            title: "SSO Providers",
            description: "Manage identity providers for your organization",
            create_button_text: "Add New Provider",
          },
          table: {
            empty_message:
              "No providers configured yet. Add one to enable SSO.",
          },
        }}
        styling={{
          variables: {
            light: { "--color-primary": "#0066cc" },
          },
          classes: {
            "SsoProviderTable-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}>
        <ProvidersManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

コアプロパティ

コアpropsはコンポーネントの動作に不可欠です。SsoProviderTableは、一般的なプロバイダー管理ワークフローを処理するために、両方のナビゲーションアクションを必要とします。

プロパティ	型	説明
createAction	ComponentAction<void>	必須。 プロバイダーの作成ページに移動します。
editAction	ComponentAction<IdentityProvider>	必須。 プロバイダーの編集ページに移動します。

createAction

Type: ComponentAction<void>

createAction プロパティは必須です。ユーザーが「プロバイダーを追加」をクリックした際の遷移先を制御するためです。このプロパティがないと、テーブルはプロバイダー作成フローを開始できません。

プロパティ:

• disabled - “プロバイダーを追加”ボタンを無効にします
• onBefore() - ナビゲーションが行われる前に実行されます。ナビゲーションを中止するには、false を返します (たとえば、ユーザーに権限がない場合) 。
• onAfter() - onBefore が正常に完了した後に実行されます。これを使用して作成ページに移動したり、分析を追跡したりできます。

例：

// 作成ページに移動する
createAction={{
  onAfter: () => navigate("/providers/create"),
}}

// 作成を許可する前にPermissionsを確認する
createAction={{
  onBefore: () => {
    if (!hasPermission("create:providers")) {
      alert("You don't have permission to create providers");
      return false;
    }
    return true;
  },
  onAfter: () => navigate("/providers/create"),
}}

// 作成操作のアナリティクスを追跡する
createAction={{
  onAfter: () => {
    analytics.track("Create Provider Started");
    navigate("/providers/create");
  },
}}

---

editAction

Type: ComponentAction<IdentityProvider>

editAction プロパティは必須です。ユーザーがプロバイダーの行をクリックした際の遷移先を制御するためです。コールバックはプロバイダーのデータを受け取るので、適切な編集ページへ遷移できます。

プロパティ:

• disabled - 行クリックでのナビゲーションを無効にする
• onBefore(provider) - ナビゲーションの実行前に実行されます。ナビゲーションを停止するには false を返します (例: 条件付きアクセスのチェック) 。
• onAfter(provider) - onBefore が成功した後に実行されます。プロバイダーのデータを使用して編集ページに移動するには、これを使用します。

例：

// プロバイダーIDを使用して編集ページに移動する
editAction={{
  onAfter: (provider) => navigate(`/providers/${provider.id}`),
}}

// プロバイダー選択時にアナリティクスを追跡する
editAction={{
  onAfter: (provider) => {
    analytics.track("Provider Selected", {
      id: provider.id,
      name: provider.name,
      strategy: provider.strategy,
    });
    navigate(`/providers/${provider.id}`);
  },
}}

---

​

表示プロパティ

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

プロパティ	型	説明
readOnly	boolean	テーブル内のすべての操作を無効にします。デフォルト: false
hideHeader	boolean	ヘッダーを非表示にします。デフォルト: false

---

​

Action のプロパティ

Action のプロパティは、コアナビゲーション以外のユーザー操作を処理します。削除、除去、有効化/無効化などの操作を制御します。

プロパティ	型	説明
deleteAction	ComponentAction<IdentityProvider>	プロバイダーを完全に削除します。
deleteFromOrganizationAction	ComponentAction<IdentityProvider>	プロバイダーを組織から削除します。
enableProviderAction	ComponentAction<IdentityProvider>	プロバイダーの有効/無効を切り替えます。

deleteAction

Type: ComponentAction<IdentityProvider>

SSOプロバイダーの完全削除を制御します。この操作は破壊的です。プロバイダーはAuth0テナントから完全に削除されます。

プロパティ:

• disabled - 削除オプションを無効化します
• onBefore(provider) - 削除前に実行されます。削除を中止するには false を返します (確認ダイアログでの使用を推奨) 。
• onAfter(provider) - プロバイダーが正常に削除された後に実行されます。このイベントを追跡したり、通知を表示したりするために使用します。

例：

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  deleteAction={{
    onBefore: (provider) => {
      return confirm(
        `Permanently delete "${provider.display_name}"? This cannot be undone.`,
      );
    },
    onAfter: (provider) => {
      analytics.track("Provider Deleted", { name: provider.name });
      toast.success("Provider deleted");
    },
  }}
/>

---

deleteFromOrganizationAction

Type: ComponentAction<IdentityProvider>

プロバイダーをテナントから削除せずに組織から削除する操作を制御します。プロバイダーは後から再追加できる状態で維持されます。

プロパティ:

• disabled - 削除オプションを無効にする
• onBefore(provider) - 削除前に実行されます。削除を中止するには false を返します (例: 確認を表示する場合) 。
• onAfter(provider) - プロバイダーが組織から正常に削除された後に実行されます。

例：

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  deleteFromOrganizationAction={{
    onBefore: (provider) => {
      return confirm(
        `Remove "${provider.display_name}" from this organization?`,
      );
    },
    onAfter: (provider) => {
      toast.success(`${provider.display_name} removed from organization`);
    },
  }}
/>

---

enableProviderAction

Type: ComponentAction<IdentityProvider>

プロバイダーの有効/無効トグルを制御します。無効化されたプロバイダーは設定が維持されますが、ユーザーはそのプロバイダーを通じて認証できなくなります。

プロパティ:

• disabled - トグルをオフにします
• onBefore(provider) - トグルされる前に実行されます。状態の変更を防ぐには、false を返します。
• onAfter(provider) - プロバイダーの有効化または無効化が正常に行われた後に実行されます。

例：

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  enableProviderAction={{
    onBefore: (provider) => {
      if (!provider.is_enabled) {
        return confirm(`Enable "${provider.display_name}" for authentication?`);
      }
      return confirm(
        `Disable "${provider.display_name}"? Users won't be able to authenticate.`,
      );
    },
    onAfter: (provider) => {
      analytics.track(
        provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
        {
          name: provider.name,
        },
      );
    },
  }}
/>

---

​

カスタマイズプロパティ

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

プロパティ	型	説明
schema	SsoProviderTableSchema	確認フィールドの検証。
customMessages	Partial<SsoProviderTableMessages>	i18nテキストの上書き。
styling	ComponentStyling<SsoProviderTableClasses>	CSS変数とクラスの上書き。

スキーマ

確認ダイアログにカスタム検証ルールを設定します (例：削除を確認するためにプロバイダー名を入力) 。

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

すべてのスキーマフィールドで regex、errorMessage をサポートします

delete.providerName - 完全削除の確認 remove.providerName - 組織からの削除の確認

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  schema={{
    delete: {
      providerName: {
        regex: /^.+$/,
        errorMessage: "Please type the provider name to confirm",
      },
    },
  }}
/>

---

customMessages

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

利用可能なメッセージ

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

• title, description, create_button_text

table - テーブル表示

• empty_message
• columns.name, columns.strategy, columns.status
• actions.edit_button_text, actions.delete_button_text, actions.remove_button_text

delete.modal - 削除確認

• title, description
• field.label, field.placeholder, field.error
• actions.cancel_button_text, actions.delete_button_text

remove.modal - 組織から削除する際の確認

• title, description
• actions.cancel_button_text, actions.remove_button_text

notifications - APIレスポンス

• provider_delete_success, provider_delete_error
• provider_remove_success, provider_enable_success, provider_disable_success

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  customMessages={{
    header: {
      title: "Identity Providers",
      description: "Manage SSO connections for your organization",
      create_button_text: "Add Provider",
    },
    table: {
      empty_message:
        "No SSO providers configured. Add one to enable single sign-on.",
    },
    notifications: {
      provider_delete_success: "Provider deleted successfully!",
    },
  }}
/>

---

スタイリング

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

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

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

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

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

• SsoProviderTable-header
• SsoProviderTable-table
• SsoProviderTable-row
• SsoProviderTable-deleteModal
• SsoProviderTable-removeModal

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.25rem",
      },
      light: {
        "--color-primary": "#4f46e5",
      },
    },
    classes: {
      "SsoProviderTable-header": "mb-6",
      "SsoProviderTable-table": "rounded-lg shadow-sm",
    },
  }}
/>

---

​

高度なカスタマイズ

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

​

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

高度なユースケースでは、個々のサブコンポーネントをインポートして、カスタムプロバイダー管理インターフェースを構築できます。テーブルを別のレイアウトに埋め込む場合や、行のレンダリングをカスタマイズする場合に便利です。

コンポーネント	説明
ProviderRow	アクション付きの各プロバイダー行
ProviderDeleteModal	完全削除の確認モーダル
ProviderRemoveModal	組織からの削除の確認モーダル
ProviderStatusToggle	有効化/無効化を切り替えるコンポーネント
ProviderStrategyIcon	ストラテジーアイコンのレンダラー (Okta、SAML など)

​

利用可能なHooks

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

Hook	説明
useSsoProviderTable	プロバイダー一覧の取得と管理
useSsoProviderTableLogic	UI の操作状態とハンドラー (モーダル、操作)