SSOプロバイダーテーブル

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

React
Next.js
shadcn

セットアップ要件

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

インストール

pnpm add @auth0/universal-components-react

npm install @auth0/universal-components-react

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

はじめに

import { SsoProviderTable } from "@auth0/universal-components-react";
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";
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>`	必須。プロバイダーの編集画面に移動します。

createActionType: 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");
  },
}}

editActionType: 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>`	プロバイダーの有効/無効を切り替えます。

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

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

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

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

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

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

変数 - 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との統合を活用しながら、完全にカスタムなインターフェースを構築するために使用してください。

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

セットアップ要件

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

インストール

npm install @auth0/universal-components-react

pnpm add @auth0/universal-components-react

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

はじめに

page.tsx

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

コアProps

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

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

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

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>`	プロバイダーの有効/無効を切り替えます。

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

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

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

カスタマイズProps

プロパティ	型	説明
`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!",
    },
  }}
/>

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

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

変数 - 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

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

セットアップ要件

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

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

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

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>`	プロバイダーの有効/無効を切り替えます。

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

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

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

カスタマイズProps

プロパティ	型	説明
`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!",
    },
  }}
/>

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

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

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

高度なカスタマイズ

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

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

利用可能なHooks

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

​セットアップ要件

​インストール

​はじめに

​Props

​必須Props

​表示プロパティ

​Action のプロパティ

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

​高度なカスタマイズ

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

​利用可能なHooks

​セットアップ要件

​インストール

​はじめに

​Props

​コアProps

​表示プロパティ

​Action のプロパティ

​カスタマイズProps

​高度なカスタマイズ

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

​利用可能なHooks

​セットアップ要件

​インストール

​はじめに

​Props

​コアProps

​表示プロパティ

​Action のプロパティ

​カスタマイズProps

​高度なカスタマイズ

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

​利用可能なHooks

セットアップ要件

インストール

はじめに

Props

必須Props

表示プロパティ

Action のプロパティ

カスタマイズプロパティ

高度なカスタマイズ

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

利用可能なHooks

セットアップ要件

インストール

はじめに

Props

コアProps

表示プロパティ

Action のプロパティ

カスタマイズProps

高度なカスタマイズ

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

利用可能なHooks

セットアップ要件

インストール

はじめに

Props

コアProps

表示プロパティ

Action のプロパティ

カスタマイズProps

高度なカスタマイズ

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

利用可能なHooks