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

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

React
Next.js
shadcn

設定要件

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

// 作成を許可する前に権限を確認する
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`
`hideDeleteProvider`	`boolean`	Provider の削除アクションを非表示にします。デフォルト: `false`
`hideRemoveFromOrganization`	`boolean`	organization からの削除アクションを非表示にします。デフォルト: `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: () => 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 変数とクラスのオーバーライド。

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

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

すべてのschemaフィールドでサポートされる項目: regex, errorMessagedelete.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.identity_provider, columns.display_name
actions.edit_button_text, actions.delete_button_text, actions.remove_button_text, actions.enabled_tooltip, actions.disabled_tooltip

create_consent_modal—プロバイダー作成の同意モーダル

title, description
actions.cancel_button_text, actions.process_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レスポンス

general_error, fetch_providers_error, fetch_domains_error
domain_create.success, domain_create.error, domain_create.on_before
domain_verify.success, domain_verify.error, domain_verify.on_before, domain_verify.verification_failed
domain_delete.success, domain_delete.error
domain_associate_provider.success, domain_associate_provider.error, domain_associate_provider.on_before
domain_delete_provider.success, domain_delete_provider.error, domain_delete_provider.on_before

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

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

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

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

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

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

SsoProviderTable-header
SsoProviderTable-table
SsoProviderTable-tableActions
SsoProviderTable-deleteProviderModal
SsoProviderTable-deleteProviderFromOrganizationModal

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

高度なカスタマイズ

利用可能なフック

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

Hook	説明
`useSsoProviderTable`	Providerリストの取得と管理

設定要件

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

プロップス

主要なプロップス

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

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

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

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`
`hideDeleteProvider`	`boolean`	Provider の削除アクションを非表示にします。デフォルト: `false`
`hideRemoveFromOrganization`	`boolean`	organization からの削除アクションを非表示にします。デフォルト: `false`

Action のプロップス

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

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

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)—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 変数とクラスのオーバーライド。

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

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

<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.identity_provider, columns.display_name
actions.edit_button_text, actions.delete_button_text, actions.remove_button_text, actions.enabled_tooltip, actions.disabled_tooltip

create_consent_modal—プロバイダー作成に関する同意モーダル

title, description
actions.cancel_button_text, actions.process_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レスポンス

general_error, fetch_providers_error, fetch_domains_error
domain_create.success, domain_create.error, domain_create.on_before
domain_verify.success, domain_verify.error, domain_verify.on_before, domain_verify.verification_failed
domain_delete.success, domain_delete.error
domain_associate_provider.success, domain_associate_provider.error, domain_associate_provider.on_before
domain_delete_provider.success, domain_delete_provider.error, domain_delete_provider.on_before

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

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

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

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

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

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

SsoProviderTable-header
SsoProviderTable-table
SsoProviderTable-tableActions
SsoProviderTable-deleteProviderModal
SsoProviderTable-deleteProviderFromOrganizationModal

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

高度なカスタマイズ

利用可能なフック

Hook	説明
`useSsoProviderTable`	Providerリストの取得と管理

設定要件

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

インストール

GitHub Registry を使用して、shadcn CLI 経由でコンポーネントをインストールします。

npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/sso-provider-table

shadcn CLI は、共有ユーティリティおよび Auth0 連携用の @auth0/universal-components-core 依存関係もインストールします。 shadcn CLI v2.5.0以降が必要です。

はじめに

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>
        <ProvidersManagementPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

プロップス

主要なプロップス

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

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

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`
`hideDeleteProvider`	`boolean`	プロバイダーの削除操作を非表示にします。デフォルト: `false`
`hideRemoveFromOrganization`	`boolean`	organization からの削除操作を非表示にします。デフォルト: `false`

Action のプロップス

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

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

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

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 変数とクラスのオーバーライド。

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

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

<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.identity_provider, columns.display_name
actions.edit_button_text, actions.delete_button_text, actions.remove_button_text, actions.enabled_tooltip, actions.disabled_tooltip

create_consent_modal—プロバイダー作成時の同意モーダル

title, description
actions.cancel_button_text, actions.process_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レスポンス

general_error, fetch_providers_error, fetch_domains_error
domain_create.success, domain_create.error, domain_create.on_before
domain_verify.success, domain_verify.error, domain_verify.on_before, domain_verify.verification_failed
domain_delete.success, domain_delete.error
domain_associate_provider.success, domain_associate_provider.error, domain_associate_provider.on_before
domain_delete_provider.success, domain_delete_provider.error, domain_delete_provider.on_before

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

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

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

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

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

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

SsoProviderTable-header
SsoProviderTable-table
SsoProviderTable-tableActions
SsoProviderTable-deleteProviderModal
SsoProviderTable-deleteProviderFromOrganizationModal

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

高度なカスタマイズ

利用可能なフック

Hook	説明
`useSsoProviderTable`	Providerリストの取得と管理

Web Components

iOS Components

Android Components

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

設定要件

インストール

はじめに

プロップス

必須のプロップス

表示プロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック

設定要件

インストール

はじめに

プロップス

主要なプロップス

表示プロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック

設定要件

インストール

はじめに

プロップス

主要なプロップス

表示プロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック

​設定要件

​インストール

​はじめに

​プロップス

​必須のプロップス

​表示プロップス

​Action のプロップス

​カスタマイズ用プロップス

​高度なカスタマイズ

​利用可能なフック

​設定要件

​インストール

​はじめに

​プロップス

​主要なプロップス

​表示プロップス

​Action のプロップス

​カスタマイズ用プロップス

​高度なカスタマイズ

​利用可能なフック

​設定要件

​インストール

​はじめに

​プロップス

​主要なプロップス

​表示プロップス

​Action のプロップス

​カスタマイズ用プロップス

​高度なカスタマイズ

​利用可能なフック

設定要件

インストール

はじめに

プロップス

必須のプロップス

表示プロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック

設定要件

インストール

はじめに

プロップス

主要なプロップス

表示プロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック

設定要件

インストール

はじめに

プロップス

主要なプロップス

表示プロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なフック