Web で SSO プロバイダーを一覧表示・設定する

作成、編集、削除、有効化・無効化を行えるテーブルインターフェースで、SSO アイデンティティプロバイダーを表示・管理します。

SsoProviderTable コンポーネントは、organization のシングルサインオンプロバイダーを一覧表示・設定するための統合インターフェースを提供します。

React

​

設定要件

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

​

インストール

pnpm

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

​

プロップス

​

必須のプロップス

必須のプロップスは、コンポーネントの動作の基盤となるものです。SsoProviderTable では、一般的なプロバイダー管理のワークフローに対応するために、2つのナビゲーションアクションが必要です。

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

createAction

型: ComponentAction<void>

createAction プロパティは、ユーザーが “Add Provider” をクリックした際の遷移先を制御するため、必須です。これを指定しないと、テーブルは Provider 作成フローを開始する方法を判断できません。

プロパティ:

• disabled—“Add Provider” ボタンを無効にします
• 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

型: ComponentAction<IdentityProvider>

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

プロパティ:

• disabled—行クリックによる画面遷移を無効にします
• onBefore(provider)—画面遷移の前に実行されます。画面遷移を防ぐには false を返します (例：条件付きアクセスのチェック) 。
• onAfter(provider)—onBefore が成功した後に実行されます。Provider データを使用して編集ページへ遷移するには、これを使用します。

例:

// プロバイダー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 のプロップス

アクション系のプロップスは、基本的なナビゲーション以外のユーザー操作を扱います。削除、除去、有効化/無効化といった操作を制御します。

プロパティ	型	説明
deleteAction	ComponentAction<IdentityProvider>	Provider を完全に削除します。
deleteFromOrganizationAction	ComponentAction<IdentityProvider>	organization から Provider を削除します。
enableProviderAction	ComponentAction<IdentityProvider>	Provider の有効/無効を切り替えるトグル。

deleteAction

型: 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

型: ComponentAction<IdentityProvider>

tenantからは削除せずに、organizationからproviderを解除する動作を制御します。providerはそのまま残るため、後から再度追加できます。

プロパティ:

• 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

型: ComponentAction<IdentityProvider>

プロバイダーの有効/無効を切り替えるトグルを制御します。無効にしたプロバイダーは設定自体は保持されますが、ユーザーはそのプロバイダーを使用して認証できません。

プロパティ:

• disabled—トグルを無効にします
• onBefore(provider)—トグルの切り替え前に実行されます。状態の変更を防ぐにはfalseを返します。
• onAfter(provider)—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—organization から削除する際の確認

<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—organization からの削除の確認

• 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 を使用している場合は、それらを個別にインポートして、独自の Provider 管理ワークフローを構築できます。

​

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

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

コンポーネント	説明
ProviderRow	アクションを含む各プロバイダーの行
ProviderDeleteModal	完全削除の確認モーダル
ProviderRemoveModal	organizationからの削除を確認するモーダル
ProviderStatusToggle	有効／無効を切り替えるコンポーネント
ProviderStrategyIcon	strategyアイコンをレンダリングするコンポーネント (Okta、SAML など)

​

利用可能なHooks

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

Hook	説明
useSsoProviderTable	Provider リストの取得と管理
useSsoProviderTableLogic	UI の操作状態とハンドラー (モーダル、アクション)

Next.js

​

設定要件

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

​

プロップス

​

主要なプロップス

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

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

createAction

型: ComponentAction<void>

createAction プロパティは、ユーザーが “Add Provider” をクリックしたときの遷移先を制御するため、必須です。これがないと、テーブルはプロバイダー作成フローをどのように開始すればよいか判断できません。

プロパティ:

• disabled—“Add Provider” ボタンを無効にします
• onBefore()—ナビゲーションが行われる前に実行されます。ナビゲーションを中止するには false を返します (たとえば、ユーザーに権限がない場合) 。
• onAfter()—onBefore が正常に完了した後に実行されます。作成ページへの移動や分析の追跡に使用します。

例:

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

// 作成を許可する前に権限を確認する
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

型: ComponentAction<IdentityProvider>

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

プロパティ:

• disabled—行クリックによる画面遷移を無効にします
• onBefore(provider)—画面遷移の前に実行されます。画面遷移をキャンセルするには false を返します (例：条件付きアクセスの確認) 。
• onAfter(provider)—onBefore が成功した後に実行されます。Provider データを使用して編集ページに移動します。

例:

// プロバイダー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 のプロップス

アクション系のプロップスは、基本的なナビゲーション以外のユーザー操作を扱います。削除、除去、有効化/無効化といった操作を制御します。

プロパティ	型	説明
deleteAction	ComponentAction<IdentityProvider>	Providerを完全に削除します。
deleteFromOrganizationAction	ComponentAction<IdentityProvider>	organizationからProviderを削除します。
enableProviderAction	ComponentAction<IdentityProvider>	Providerを有効または無効にするトグル。

deleteAction

型: ComponentAction<IdentityProvider>

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

プロパティ:

• disabled—削除オプションを無効にします
• onBefore(provider)—削除前に実行されます。false を返すと削除を中止できます (確認ダイアログに推奨) 。
• onAfter(provider)—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

型: ComponentAction<IdentityProvider>

tenant からは削除せずに、organization から provider を解除する動作を制御します。解除した provider は引き続き利用可能で、後から再度追加できます。

プロパティ:

• disabled—削除オプションを無効にします
• onBefore(provider)—削除前に実行されます。削除を中止するには (確認を表示する場合など) 、false を返します。
• onAfter(provider)—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

型: ComponentAction<IdentityProvider>

プロバイダーの有効/無効の切り替えを制御します。無効化されたプロバイダーは設定が保持されたままですが、ユーザーはそのプロバイダー経由で認証できません。

プロパティ:

• disabled—トグルを無効にします
• onBefore(provider)—トグルの前に実行されます。状態の変更を防ぐには、false を返します。
• onAfter(provider)—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 変数とクラスの上書き設定。

schema

確認ダイアログにカスタムのバリデーションルールを設定します (たとえば、削除を確定するにはプロバイダー名の入力を求めるなど) 。

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

すべてのschemaフィールドでサポートされる項目: regex, errorMessage

delete.providerName—完全に削除する際の確認 remove.providerName—organizationから削除する際の確認

<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との連携を活用しつつ、完全に独自のインターフェイスを構築したい場合にご利用ください。

Hook	説明
useSsoProviderTable	Providerリストの取得と管理
useSsoProviderTableLogic	UIの操作状態とハンドラー (モーダル、アクション)

shadcn

​

設定の要件

Auth0 Configuration が必要です—tenant で 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>
  );
}

​

プロップス

​

主要なプロップス

コアプロップスは、コンポーネントの動作に不可欠です。SsoProviderTable では、一般的なプロバイダー管理のワークフローに対応するため、2つのナビゲーションアクションが両方とも必要です。

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

createAction

型: ComponentAction<void>

createAction プロップは必須です。ユーザーが”Add Provider”をクリックした際の遷移先を制御するためです。これがないと、テーブルはプロバイダー作成フローをどのように開始すればよいか判断できません。

プロパティ:

• disabled—“Add Provider” ボタンを無効にします
• onBefore()—ナビゲーションの前に実行されます。ナビゲーションを中止するには false を返します (たとえば、ユーザーに権限がない場合) 。
• onAfter()—onBefore が正常に完了した後に実行されます。作成ページへの移動や分析のトラッキングに使用します。

例:

// 作成ページへ遷移
createAction={{
  onAfter: () => navigate("/providers/create"),
}}

// 作成を許可する前に権限を確認
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

型: ComponentAction<IdentityProvider>

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

プロパティ:

• disabled—行クリックによる画面遷移を無効にします
• onBefore(provider)—画面遷移の前に実行されます。条件付きアクセスの確認などで画面遷移を阻止するには、falseを返します。
• onAfter(provider)—onBeforeが成功した後に実行されます。Providerのデータを使用して編集ページに移動します。

例:

// プロバイダー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>	Provider を完全に削除します。
deleteFromOrganizationAction	ComponentAction<IdentityProvider>	organization から Provider を削除します。
enableProviderAction	ComponentAction<IdentityProvider>	Provider の有効／無効を切り替えるトグル。

deleteAction

型: ComponentAction<IdentityProvider>

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

プロパティ:

• disabled—削除オプションを無効にします
• onBefore(provider)—削除前に実行されます。false を返すと削除を中止できます (確認ダイアログに推奨) 。
• onAfter(provider)—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

型: ComponentAction<IdentityProvider>

tenant からは削除せずに、organization から Provider を解除する動作を制御します。解除した Provider はそのまま残るため、後から再度追加できます。

プロパティ:

• disabled—削除オプションを無効にします
• onBefore(provider)—削除前に実行されます。削除を中止するには false を返します (たとえば、確認画面を表示する場合) 。
• onAfter(provider)—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

型: ComponentAction<IdentityProvider>

プロバイダーの有効/無効の切り替えを制御します。無効にしたプロバイダーは設定自体は保持されますが、ユーザーはそのプロバイダーで認証できなくなります。

プロパティ:

• disabled—トグルを無効にします
• onBefore(provider)—トグルの実行前に呼び出されます。false を返すと、状態の変更を防止できます。
• onAfter(provider)—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 変数とクラスのオーバーライド。

スキーマ

確認ダイアログにカスタムのバリデーションルールを設定します (例：削除を確定するにはプロバイダー名を入力する) 。

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

すべてのschemaフィールドでサポート：regex、errorMessage

delete.providerName—完全に削除する際の確認 remove.providerName—organizationから削除する際の確認

<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

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

利用可能なメッセージ

ヘッダー—コンポーネントのヘッダー

• title, description, create_button_text

テーブル—テーブル表示

• 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

通知—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	strategy アイコンをレンダリングするコンポーネント (Okta、SAML など)

​

利用可能なHooks

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

Hook	説明
useSsoProviderTable	Providerリストの取得と管理
useSsoProviderTableLogic	UIの操作状態とハンドラー (モーダル、アクション)