> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/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)}>
        <Spinner size={40} color="#8A94A6" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1
  }} />
      </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>;
};

export const Spinner = ({size = 40, color = "#8A94A6", style = {}}) => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  ...style
}} aria-label="読み込み中" role="status">
    <svg width={size} height={size} viewBox="0 0 50 50" style={{
  display: "block"
}}>
      <circle cx="25" cy="25" r="20" fill="none" stroke={color} 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>;

<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">
    ## 設定要件

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

    ## インストール

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

    ## はじめに

    ```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 wrap 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 domain={domain}>
              <ProvidersManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## プロップス

    ### 必須のプロップス

    必須のプロップスは、コンポーネントの動作の基盤となるものです。`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"),
    }}

    // 作成を許可する前に permissions を確認する
    createAction={{
      onBefore: () => {
        if (!hasPermission("create:providers")) {
          alert("You don't have permission to create providers");
          return false;
        }
        return true;
      },
      onAfter: () => navigate("/providers/create"),
    }}

    // 作成操作を分析データとして記録する
    createAction={{
      onAfter: () => {
        analytics.track("Create Provider Started");
        navigate("/providers/create");
      },
    }}
    ```

    ***

    **editAction**

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

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

    **プロパティ:**

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

    **例:**

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

    ***

    ### 表示関連のプロップス

    表示関連のプロップスは、コンポーネントの動作に影響を与えずに、その表示方法 (レンダリング) を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする場合に使用します。

    <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>
      </tbody>
    </table>

    ***

    ### Action のプロップス

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

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

    ***

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

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

    <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="使用可能なスキーマフィールド">
      すべてのスキーマフィールドでサポートされる項目: `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.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`

      **delete.modal**—削除の確認

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove.modal**—organization からの削除の確認

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

      **notifications**—API レスポンス

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </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.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **スタイリング**

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

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

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

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

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </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",
        },
      }}
    />
    ```

    ***

    ## 高度なカスタマイズ

    `SsoProviderTable` コンポーネントは、より小さなサブコンポーネントとフックで構成されています。shadcn を使用している場合は、それらを個別にインポートして、独自の Provider 管理ワークフローを構築できます。

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

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

    <table class="table">
      <thead>
        <tr>
          <th>コンポーネント</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>アクションを含む各プロバイダーの行</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

          <td>完全削除の確認モーダル</td>
        </tr>

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>organizationからの削除を確認するモーダル</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>有効／無効を切り替えるコンポーネント</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>strategyアイコンをレンダリングするコンポーネント (Okta、SAML など) </td>
        </tr>
      </tbody>
    </table>

    ### 利用可能なHooks

    これらのフックは、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>

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>UI の操作状態とハンドラー (モーダル、アクション) </td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="Next.js">
    ## 設定要件

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

    ## インストール

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

    ## はじめに

    ```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 wrap 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>

    ## プロップス

    ### 主要なプロップス

    コアプロップスはコンポーネントの動作に不可欠です。`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>Provider の作成画面に遷移します。
          </td>
        </tr>

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

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

          <td>
            <strong>必須。</strong>Provider の編集画面に遷移します。
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

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

    `createAction` プロパティは、ユーザーが "Add 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}`);
      },
    }}
    ```

    ***

    ### 表示プロップス

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

    <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>
      </tbody>
    </table>

    ***

    ### Action のプロップス

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

    <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: () => router.push("/providers/create") }}
      editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }}
      deleteAction={{
        onBefore: (provider) => {
          return confirm(
            `Permanently delete "${provider.display_name}"? This cannot be undone.`,
          );
        },
        onAfter: (provider) => {
          analytics.track("Provider Deleted", { name: provider.name });
          toast.success("Provider deleted");
        },
      }}
    />
    ```

    ***

    **deleteFromOrganizationAction**

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

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

    **プロパティ:**

    * `disabled`—削除オプションを無効にします
    * `onBefore(provider)`—削除前に実行されます。削除を中止するには (確認を表示する場合など) 、`false` を返します。
    * `onAfter(provider)`—Provider が組織から正常に削除された後に実行されます。

    **例:**

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

    ***

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

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

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

    **schema**

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

    <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.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`

      **delete.modal**—削除の確認

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove.modal**—組織からの削除の確認

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

      **notifications**—APIレスポンス

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </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.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **スタイリング**

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

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

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

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

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </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",
        },
      }}
    />
    ```

    ***

    ## 高度なカスタマイズ

    `SsoProviderTable` コンポーネントは、より小さなサブコンポーネントとフックで構成されています。これらを個別にインポートして、独自のプロバイダー管理ワークフローを構築できます。

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

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

    <table class="table">
      <thead>
        <tr>
          <th>コンポーネント</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>アクションを含むプロバイダーの行</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

          <td>完全削除の確認モーダル</td>
        </tr>

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>組織からの削除を確認するモーダル</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>有効化/無効化を切り替えるコンポーネント</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>ストラテジーアイコンのレンダラー (Okta、SAML など) </td>
        </tr>
      </tbody>
    </table>

    ### 利用可能なHooks

    これらのフックは、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>

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>UIの操作状態とハンドラー (モーダル、アクション) </td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="shadcn">
    ## 設定の要件

    <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#configure-auth0-dashboard)
    </Callout>

    ## インストール

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

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

    ## はじめに

    ```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 wrap 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 domain={domain}>
              <ProvidersManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## プロップス

    ### 主要なプロップス

    コアプロップスは、コンポーネントの動作に不可欠です。`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"をクリックした際の遷移先を制御するためです。これがないと、テーブルはプロバイダー作成フローをどのように開始すればよいか判断できません。

    **プロパティ:**

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

    ***

    ### 表示関連のプロップス

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

    <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>
      </tbody>
    </table>

    ***

    ### Action のプロップス

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

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

    ***

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

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

    <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="利用可能なメッセージ">
      **ヘッダー**—コンポーネントのヘッダー

      * `title`, `description`, `create_button_text`

      **テーブル**—テーブル表示

      * `empty_message`
      * `columns.name`, `columns.strategy`, `columns.status`
      * `actions.edit_button_text`, `actions.delete_button_text`, `actions.remove_button_text`

      **delete.modal**—削除の確認

      * `title`, `description`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.delete_button_text`

      **remove.modal**—組織からの削除の確認

      * `title`, `description`
      * `actions.cancel_button_text`, `actions.remove_button_text`

      **通知**—APIレスポンス

      * `provider_delete_success`, `provider_delete_error`
      * `provider_remove_success`, `provider_enable_success`, `provider_disable_success`
    </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.",
        },
        notifications: {
          provider_delete_success: "Provider deleted successfully!",
        },
      }}
    />
    ```

    ***

    **スタイリング**

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

    <Accordion title="利用可能なスタイル設定">
      **変数**—CSSカスタムプロパティ

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

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

      * `SsoProviderTable-header`
      * `SsoProviderTable-table`
      * `SsoProviderTable-row`
      * `SsoProviderTable-deleteModal`
      * `SsoProviderTable-removeModal`
    </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",
        },
      }}
    />
    ```

    ***

    ## 高度なカスタマイズ

    `SsoProviderTable` コンポーネントは、より小さなサブコンポーネントとフックで構成されています。shadcn を使用している場合は、それらを個別にインポートして、独自のプロバイダー管理ワークフローを構築できます。

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

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

    <table class="table">
      <thead>
        <tr>
          <th>コンポーネント</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>ProviderRow</code>
          </td>

          <td>アクションを備えたプロバイダー行</td>
        </tr>

        <tr>
          <td>
            <code>ProviderDeleteModal</code>
          </td>

          <td>完全削除の確認モーダル</td>
        </tr>

        <tr>
          <td>
            <code>ProviderRemoveModal</code>
          </td>

          <td>組織からの削除を確認するモーダル</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStatusToggle</code>
          </td>

          <td>有効／無効を切り替えるコンポーネント</td>
        </tr>

        <tr>
          <td>
            <code>ProviderStrategyIcon</code>
          </td>

          <td>strategy アイコンをレンダリングするコンポーネント (Okta、SAML など) </td>
        </tr>
      </tbody>
    </table>

    ### 利用可能なHooks

    これらのフックは、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>

        <tr>
          <td>
            <code>useSsoProviderTableLogic</code>
          </td>

          <td>UIの操作状態とハンドラー (モーダル、アクション) </td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>