> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging.auth0-mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <div aria-label="読み込み中" role="status" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
          <svg width={40} height={40} viewBox="0 0 50 50" style={{
    display: "block"
  }}>
            <circle cx="25" cy="25" r="20" fill="none" stroke="#8A94A6" strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
              <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
            </circle>
          </svg>
        </div>
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

`SsoProviderTable` コンポーネントは、organization の[シングルサインオン](/docs/ja-jp/authenticate/enterprise-connections/self-service-enterprise-configuration)プロバイダーを一覧表示・設定するための統合インターフェースを提供します。

<ComponentLoader componentSelector="sso-provider-table" componentPreviewText="SSO Provider Table コンポーネントのプレビュー" />

<Tabs>
  <Tab title="React">
    <h2 id="setup-requirements">
      設定要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—tenant で
      My Organization API が設定されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    <h2 id="installation">
      インストール
    </h2>

    <CodeGroup>
      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      どちらのコマンドを実行しても、共有ユーティリティとAuth0連携に必要な@auth0/universal-components-core
      依存関係もインストールされます。
    </Callout>

    <h2 id="get-started">
      はじめに
    </h2>

    ```tsx wrap lines theme={null}
    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}`),
          }}
        />
      );
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      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>
        );
      }

      ```
    </Accordion>

    <h2 id="props">
      プロップス
    </h2>

    <h3 id="required-props">
      必須のプロップス
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<void></code>
          </td>

          <td>
            <strong>必須。</strong>プロバイダーの作成ページに遷移します。
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            <strong>必須。</strong>プロバイダーの編集ページに遷移します。
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **型:** `ComponentAction<void>`

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

    **プロパティ:**

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

    **例:**

    ```tsx wrap lines theme={null}
    // 作成ページに遷移する
    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 データを使用して編集ページへ遷移するには、これを使用します。

    **例:**

    ```tsx wrap lines theme={null}
    // プロバイダー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}`);
      },
    }}
    ```

    ***

    <h3 id="display-props">
      表示プロップス
    </h3>

    表示プロップスは、コンポーネントの動作に影響を与えることなく、レンダリングのされ方を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりするために使用します。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            テーブルのすべての操作を無効にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            ヘッダーセクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideDeleteProvider</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Provider の削除アクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideRemoveFromOrganization</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            organization からの削除アクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props">
      Action のプロップス
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Provider を完全に削除します。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            organization から Provider を削除します。
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Provider の有効／無効を切り替えるトグル。
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **型:** `ComponentAction<IdentityProvider>`

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

    **プロパティ:**

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

    **例:**

    ```tsx wrap lines theme={null}
    <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)`—プロバイダーが組織から正常に削除された後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <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 が正常に有効または無効になった後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <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,
            },
          );
        },
      }}
    />
    ```

    ***

    <h3 id="customization-props">
      カスタマイズ用プロップス
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>SsoProviderTableSchema</code>
          </td>

          <td>
            確認フィールドのバリデーション。
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

          <td>
            i18n テキストのオーバーライド。
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

          <td>
            CSS 変数とクラスのオーバーライド。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

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

    <Accordion title="利用可能なスキーマフィールド">
      すべてのschemaフィールドでサポートされる項目: `regex`, `errorMessage`

      **delete.providerName**—完全に削除する際の確認
      **remove.providerName**—organizationから削除する際の確認
    </Accordion>

    ```tsx wrap lines theme={null}
    <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**

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

    <Accordion title="利用可能なメッセージ">
      **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`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

    <Accordion title="利用可能なスタイリングオプション">
      **変数**—CSSカスタムプロパティ

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

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

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-tableActions`
      * `SsoProviderTable-deleteProviderModal`
      * `SsoProviderTable-deleteProviderFromOrganizationModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization">
      高度なカスタマイズ
    </h2>

    <h3 id="available-hooks">
      利用可能なフック
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useSsoProviderTable</code>
          </td>

          <td>Providerリストの取得と管理</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="Next.js">
    <h2 id="setup-requirements-2">
      設定要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—テナントが
      My Organization API で設定されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-2">
      インストール
    </h2>

    <CodeGroup>
      ```bash npm (Recommended) wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      npm または pnpm コマンドを実行すると、共有ユーティリティおよび Auth0 連携に使用する @auth0/universal-components-core
      依存関係がインストールされます。
    </Callout>

    <h2 id="get-started-2">
      はじめに
    </h2>

    ```tsx page.tsx wrap lines theme={null}
    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}`),
          }}
        />
      );
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      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;
      ```
    </Accordion>

    <h2 id="props-2">
      プロップス
    </h2>

    <h3 id="core-props">
      主要なプロップス
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<void></code>
          </td>

          <td>
            <strong>必須。</strong>プロバイダーの作成ページに遷移します。
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            <strong>必須。</strong>プロバイダーの編集ページに遷移します。
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **型:** `ComponentAction<void>`

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

    **プロパティ:**

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

    **例:**

    ```tsx wrap lines theme={null}
    // 作成ページへ遷移する
    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 データを使用して編集ページへ遷移するには、これを使用します。

    **例:**

    ```tsx wrap lines theme={null}
    // プロバイダー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}`);
      },
    }}
    ```

    ***

    <h3 id="display-props-2">
      表示プロップス
    </h3>

    表示プロップスは、コンポーネントの動作に影響を与えることなく、レンダリングのされ方を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりするために使用します。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            テーブルのすべての操作を無効にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            ヘッダーセクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideDeleteProvider</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Provider の削除アクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideRemoveFromOrganization</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            organization からの削除アクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props-2">
      Action のプロップス
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Provider を完全に削除します。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            organization から Provider を削除します。
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Provider の有効/無効を切り替えるトグル。
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **型:** `ComponentAction<IdentityProvider>`

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

    **プロパティ:**

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

    **例:**

    ```tsx wrap lines theme={null}
    <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)`—プロバイダーが組織から正常に削除された後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <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 が正常に有効または無効になった後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <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,
            },
          );
        },
      }}
    />
    ```

    ***

    <h3 id="customization-props-2">
      カスタマイズ用プロップス
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>SsoProviderTableSchema</code>
          </td>

          <td>
            確認フィールドのバリデーション。
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

          <td>
            i18n テキストのオーバーライド。
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

          <td>
            CSS 変数とクラスのオーバーライド。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

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

    <Accordion title="利用可能なスキーマフィールド">
      すべてのschemaフィールドでサポートされる項目: `regex`, `errorMessage`

      **delete.providerName**—完全に削除する際の確認
      **remove.providerName**—organizationから削除する際の確認
    </Accordion>

    ```tsx wrap lines theme={null}
    <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**

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

    <Accordion title="利用可能なメッセージ">
      **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`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

    <Accordion title="利用可能なスタイリングオプション">
      **変数**—CSSカスタムプロパティ

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

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

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-tableActions`
      * `SsoProviderTable-deleteProviderModal`
      * `SsoProviderTable-deleteProviderFromOrganizationModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization-2">
      高度なカスタマイズ
    </h2>

    <h3 id="available-hooks-2">
      利用可能なフック
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useSsoProviderTable</code>
          </td>

          <td>Providerリストの取得と管理</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="shadcn">
    <h2 id="setup-requirements-3">
      設定要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—テナントが
      My Organization API で設定されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-3">
      インストール
    </h2>

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

    ```bash wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/sso-provider-table
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      shadcn CLI は、共有ユーティリティおよび Auth0 連携用の `@auth0/universal-components-core`
      依存関係もインストールします。
      **shadcn CLI v2.5.0以降**が必要です。
    </Callout>

    <details>
      <summary>レガシー Vercel レジストリ (廃止) </summary>

      既存の利用者は、**2026年9月17日**までVercelがホストするパスを引き続き使用できます。

      ```bash wrap lines theme={null}
      npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-table.json
      ```

      新しいプロジェクトでは、上記の GitHub Registry パスを使用してください。
    </details>

    <h2 id="get-started-3">
      はじめに
    </h2>

    ```tsx wrap lines theme={null}
    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}`),
          }}
        />
      );
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      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>
        );
      }

      ```
    </Accordion>

    <h2 id="props-3">
      プロップス
    </h2>

    <h3 id="core-props-2">
      主要なプロップス
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<void></code>
          </td>

          <td>
            <strong>必須。</strong>プロバイダーの作成ページに遷移します。
          </td>
        </tr>

        <tr>
          <td>
            <code>editAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            <strong>必須。</strong>プロバイダーの編集ページに遷移します。
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **型:** `ComponentAction<void>`

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

    **プロパティ:**

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

    **例:**

    ```tsx wrap lines theme={null}
    // 作成ページに遷移する
    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 データを使用して編集ページへ遷移するには、これを使用します。

    **例:**

    ```tsx wrap lines theme={null}
    // プロバイダー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}`);
      },
    }}
    ```

    ***

    <h3 id="display-props-3">
      表示プロップス
    </h3>

    表示プロップスは、コンポーネントの動作に影響を与えることなく、レンダリングのされ方を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりするために使用します。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            テーブルのすべての操作を無効にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            ヘッダーセクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideDeleteProvider</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            プロバイダーの削除操作を非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideRemoveFromOrganization</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            organization からの削除操作を非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props-3">
      Action のプロップス
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Provider を完全に削除します。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromOrganizationAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            organization から Provider を削除します。
          </td>
        </tr>

        <tr>
          <td>
            <code>enableProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<IdentityProvider></code>
          </td>

          <td>
            Provider の有効/無効を切り替えるトグル。
          </td>
        </tr>
      </tbody>
    </table>

    **deleteAction**

    **型:** `ComponentAction<IdentityProvider>`

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

    **プロパティ:**

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

    **例:**

    ```tsx wrap lines theme={null}
    <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)`—プロバイダーが組織から正常に削除された後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <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 が正常に有効または無効になった後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <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,
            },
          );
        },
      }}
    />
    ```

    ***

    <h3 id="customization-props-3">
      カスタマイズ用プロップス
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>SsoProviderTableSchema</code>
          </td>

          <td>
            確認フィールドのバリデーション。
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<SsoProviderTableMessages></code>
          </td>

          <td>
            i18n テキストのオーバーライド。
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<SsoProviderTableClasses></code>
          </td>

          <td>
            CSS 変数とクラスのオーバーライド。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

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

    <Accordion title="利用可能なスキーマフィールド">
      すべてのschemaフィールドでサポートされる項目: `regex`, `errorMessage`

      **delete.providerName**—完全に削除する際の確認
      **remove.providerName**—organizationから削除する際の確認
    </Accordion>

    ```tsx wrap lines theme={null}
    <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**

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

    <Accordion title="利用可能なメッセージ">
      **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`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

    <Accordion title="利用可能なスタイリングオプション">
      **変数**—CSSカスタムプロパティ

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

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

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-tableActions`
      * `SsoProviderTable-deleteProviderModal`
      * `SsoProviderTable-deleteProviderFromOrganizationModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization-3">
      高度なカスタマイズ
    </h2>

    <h3 id="available-hooks-3">
      利用可能なフック
    </h3>

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

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useSsoProviderTable</code>
          </td>

          <td>Providerリストの取得と管理</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>