SSOプロバイダーテーブル

セットアップ要件

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

インストール

pnpm add @auth0/universal-components-react

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

クイックスタート

import { SsoProviderTable } from '@auth0/universal-components-react/spa';

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

return (

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

完全な統合の例

この例ではReact SPAを使用していますが、prop設定（schema、customMessages、stylingなど）はNext.jsやshadcnのセットアップにも同様に適用されます。

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(
              `"${provider.display_name}"を削除しますか？この操作は元に戻せません。`,
            );
          },
          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プロバイダー",
            description: "組織のアイデンティティプロバイダーを管理します。",
            create_button_text: "新しいプロバイダーを追加",
          },
          table: {
            empty_message:
              "構成されているプロバイダーがありません。SSOを有効にするにはプロバイダーを追加してください。",
          },
        }}
        styling={{
          variables: {
            light: { "--color-primary": "#0066cc" },
          },
          classes: {
            "SsoProviderTable-header": "shadow-lg rounded-xl",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  return (
    <Auth0Provider
      domain="your-domain.auth0.com"
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <Auth0ComponentProvider>
        <ProvidersManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Core Props

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

Prop	種類	説明
`createAction`	`ComponentAction<void>`	必須。プロバイダー作成画面に移動します。詳細
`editAction`	`ComponentAction<IdentityProvider>`	必須。プロバイダー編集画面に移動します。詳細

createAction

種類： ComponentAction<void> createAction propは必須です。これは、ユーザーが［プロバイダーを追加］をクリックしたときの移動先を制御するためです。これがないと、テーブルはプロバイダー作成フローをどのように開始してよいかがわかりません。 プロパティ：

disabled - ［プロバイダーを追加］ボタンを無効にします。
onBefore() - ナビゲーションが発生する前に実行されます。ナビゲーションを中止するにはfalseを返します（例：ユーザーに権限がない場合）。
onAfter() - onBeforeが成功した後に実行されます。作成ページに移動したり、分析を追跡したりするために使用します。

一般的なパターン：

// Navigate to create page
createAction={{
  onAfter: () => navigate("/providers/create"),
}}

// Check permissions before allowing create
createAction={{
  onBefore: () => {
    if (!hasPermission("create:providers")) {
      alert("プロバイダーを作成する権限がありません");
      return false;
    }
    return true;
  },
  onAfter: () => navigate("/providers/create"),
}}

// Track analytics on create intent
createAction={{
  onAfter: () => {
    analytics.track("Create Provider Started");
    navigate("/providers/create");
  },
}}

editAction

種類： ComponentAction<IdentityProvider> editAction propは必須です。これは、ユーザーがプロバイダー行をクリックしたときの移動先を制御するためです。コールバックはプロバイダーデータを受け取るため、適切な編集ページに移動できます。 プロパティ：

disabled - 行クリックによるナビゲーションを無効化します。
onBefore(provider) - ナビゲーションが実行される前に呼び出されます。ナビゲーションを中止するにはfalseを返します（例：条件付きアクセスチェック）。
onAfter(provider) - onBeforeが成功した後に実行されます。プロバイダーデータを使用して編集ページに移動するために使用します。

一般的なパターン：

// Navigate to edit page with provider ID
editAction={{
  onAfter: (provider) => navigate(`/providers/${provider.id}`),
}}

// Track analytics on provider selection
editAction={{
  onAfter: (provider) => {
    analytics.track("Provider Selected", {
      id: provider.id,
      name: provider.name,
      strategy: provider.strategy,
    });
    navigate(`/providers/${provider.id}`);
  },
}}

Display Props

Display propsは、コンポーネントのレンダリングを制御します。その動作に影響することはありません。セクションを非表示にする場合、または読み取り専用モードを有効にする場合に使用します。

Prop	種類	説明
`readOnly`	`boolean`	すべてのテーブルアクションを無効にします。デフォルト値：`false`
`hideHeader`	`boolean`	ヘッダーセクションを非表示にします。デフォルト値：`false`

Action Props

Action Propsは、コアナビゲーションを超えたユーザーインタラクションを処理します。削除、除外、有効化/無効化などの操作を制御します。

Prop	種類	説明
`deleteAction`	`ComponentAction<IdentityProvider>`	プロバイダーを完全に削除します。詳細
`deleteFromOrganizationAction`	`ComponentAction<IdentityProvider>`	Organizationからプロバイダーを除外します。詳細
`enableProviderAction`	`ComponentAction<IdentityProvider>`	プロバイダーのトグルを有効化/無効化します。詳細

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(
        `Delete "${provider.display_name}"? This is permanent.`,
      );
    },
    onAfter: (provider) => {
      analytics.track("Provider Deleted", { name: provider.name });
      toast.success("プロバイダーが削除されました");
    },
  }}
/>

deleteFromOrganizationAction

種類： ComponentAction<IdentityProvider> テナントから削除せずに、Organizationからプロバイダーを除外する操作を制御します。プロバイダーは後から再追加できます。 プロパティ：

disabled - 除外オプションを無効にします。
onBefore(provider) - 除外の前に実行されます。除外を中止するにはfalseを返します（確認ダイアログを表示する場合など）。
onAfter(provider) - プロバイダーがOrganizationから正常に除外された後に実行されます。

例：

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  deleteFromOrganizationAction={{
    onBefore: (provider) => {
      return confirm(
        `"${provider.display_name}"をこのOrganizationから削除しますか？`,
      );
    },
    onAfter: (provider) => {
      toast.success(`${provider.display_name}がこのOrganizationから削除されました`);
    },
  }}
/>

enableProviderAction

種類： 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(`"${provider.display_name}"を認証のために有効化しますか？`);
      }
      return confirm(
        `"${provider.display_name}"を無効化しますか？ユーザーは認証できなくなります。`,
      );
    },
    onAfter: (provider) => {
      analytics.track(
        provider.is_enabled ? "Provider Enabled" : "Provider Disabled",
        {
          name: provider.name,
        },
      );
    },
  }}
/>

Customization Props

Customization Propsを使用すると、ソースコードを変更せずに、ブランド、ロケール、検証要件に合わせてコンポーネントをカスタマイズできます。

Prop	種類	説明
`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: "確認のためプロバイダー名を入力してください",
      },
    },
  }}
/>

customMessages

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

利用可能なメッセージ

<SsoProviderTable
  createAction={{ onAfter: () => navigate("/providers/create") }}
  editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }}
  customMessages={{
    header: {
      title: "IDプロバイダー",
      description: "OrganizationのSSO接続を管理します",
      create_button_text: "プロバイダーを追加",
    },
    table: {
      empty_message:
        "SSOプロバイダーが設定されていません。シングルサインオンを有効にするには追加してください。",
    },
    notifications: {
      provider_delete_success: "プロバイダーを削除しました",
    },
  }}
/>

styling

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

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

Variables - CSSカスタムプロパティ

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

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

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`	Organizationからの除外の確認モーダル
`ProviderStatusToggle`	有効化/無効化トグルコンポーネント
`ProviderStrategyIcon`	ストラテジーアイコンレンダラー（Okta、SAMLなど）

利用可能なフック

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

フック	説明
`useSsoProviderTable`	プロバイダーリストの取得と管理
`useSsoProviderTableLogic`	UIインタラクションの状態とハンドラー（モーダル、アクション）

My Organization

​セットアップ要件

​インストール

​クイックスタート

​Props

​Core Props

​createAction

​editAction

​Display Props

​Action Props

​deleteAction

​deleteFromOrganizationAction

​enableProviderAction

​Customization Props

​schema

​customMessages

​styling

​高度なカスタマイズ

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

​利用可能なフック

セットアップ要件

インストール

クイックスタート

Props

Core Props

createAction

editAction

Display Props

Action Props

deleteAction

deleteFromOrganizationAction

enableProviderAction

Customization Props

schema

customMessages

styling

高度なカスタマイズ

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

利用可能なフック