> ## 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 プロバイダーを編集するためのタブ付きインターフェース：SSO 設定、プロビジョニング（SCIM）、ドメイン管理

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

`SsoProviderEdit`コンポーネントは、[シングルサインオン](/docs/ja-jp/authenticate/enterprise-connections/self-service-enterprise-configuration)プロバイダーを編集するための統一されたインターフェースを提供します。

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

<h2 id="third-party-application-access-and-cross-app-access">
  サードパーティアプリケーションアクセスとCross App Access
</h2>

これらのコントロールは、Organization が SSO 接続に完全にアクセスできる場合にのみ表示されます。アクセスが制限されている接続では、両方のフィールドが非表示になります。

**`use_for_third_party_client_access`** は、接続をサードパーティアプリケーションで使用できるようにします。Organization の `third_party_client_access` ポリシーが `"block"` に設定されている場合、このチェックボックスは表示されたまま無効化されます。Organization レベルでサードパーティアクセスを有効にするよう、まず管理者に求める説明メッセージが表示されます。

**`cross_app_access_resource_app`** は Cross App Access (XAA) を設定します。OIDC および Okta 接続では直接利用でき、SAML 接続では、事前に指定する必要がある OIDC ディスカバリー URL を介して利用できます。利用可否は `GET /my-org/config/identity-providers` によって制御されます。strategy の `cross_app_access_resource_app` 設定がない場合、このセクションは表示されません。

XAA は独立した認可経路であり、Organization レベルの `third_party_client_access` ポリシーと接続レベルの `use_for_third_party_client_access` 設定という、両方のサードパーティアクセス制御をバイパスします。

<Tabs>
  <Tab title="React">
    <h2 id="setup-requirements">
      設定要件
    </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#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 { SsoProviderEdit } from "@auth0/universal-components-react";
    import { useNavigate, useParams } from "react-router-dom";

    export function EditProviderPage() {
      const { providerId } = useParams();
      const navigate = useNavigate();

      return (
        <SsoProviderEdit
          providerId={providerId}
          backButton={{
            onClick: () => navigate("/providers"),
          }}
          sso={{
            updateAction: {
              onAfter: () => console.log("Provider updated"),
            },
          }}
        />
      );
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      import React from "react";
      import { SsoProviderEdit } from "@auth0/universal-components-react";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate, useParams } from "react-router-dom";
      import { analytics } from "./lib/analytics";

      function EditProviderPage() {
        const { providerId } = useParams();
        const navigate = useNavigate();

        return (
          <div className="max-w-4xl mx-auto p-6">
            <SsoProviderEdit
              providerId={providerId}
              backButton={{
                onClick: () => navigate("/providers"),
              }}
              sso={{
                updateAction: {
                  onAfter: (provider) => {
                    analytics.track("Provider Updated", { name: provider.name });
                    toast.success("Provider configuration saved");
                  },
                },
                deleteAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Permanently delete "${provider.display_name}"? This cannot be undone.`,
                    );
                  },
                },
                deleteFromOrganizationAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Remove "${provider.display_name}" from this organization?`,
                    );
                  },
                  onAfter: () => {
                    toast.success("Provider removed from organization");
                    navigate("/providers");
                  },
                },
              }}
              provisioning={{
                createAction: {
                  onAfter: () => toast.success("SCIM provisioning enabled"),
                },
                createScimTokenAction: {
                  onAfter: () =>
                    toast.info("Copy your SCIM token - it won't be shown again"),
                },
              }}
              domains={{
                verifyAction: {
                  onAfter: (domain) => {
                    toast.success(`${domain.domain} verified`);
                  },
                },
                deleteAction: {
                  onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
                },
              }}
              customMessages={{
                tabs: {
                  sso: "Configuration",
                  provisioning: "User Sync (SCIM)",
                  domains: "Linked Domains",
                },
              }}
              styling={{
                variables: {
                  common: { "--color-primary": "#059669" },
                },
              }}
            />
          </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>
              <EditProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

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

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

    必須プロップスは、コンポーネントの動作に不可欠です。`SsoProviderEdit` では、対象のProviderを読み込んで編集するために、Provider IDが必要です。

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

      <tbody>
        <tr>
          <td>
            <code>providerId</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>
            <strong>必須。</strong> 編集するSSO ProviderのID。
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    表示用プロップスは、コンポーネントの動作に影響を与えることなく、レンダリング方法を制御します。

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

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

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

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

        <tr>
          <td>
            <code>hideProvisioningTab</code>
          </td>

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

          <td>
            プロビジョニング (SCIM) タブを非表示にします。デフォルト: <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>

        <tr>
          <td>
            <code>hideAttributeMappings</code>
          </td>

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

          <td>
            属性マッピングセクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    3つのタブにおけるユーザー操作は、各タブ名 (`sso`、`provisioning`、`domains`) の下に整理された複数のアクションプロップスで処理されます。

    <table class="table">
      <thead>
        <tr>
          <th>プロップス</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            戻るボタンの設定。
          </td>
        </tr>

        <tr>
          <td>
            <code>sso</code>
          </td>

          <td>
            <code>SsoProviderTabEditProps</code>
          </td>

          <td>
            SSOタブのアクション。<a href="#sso-tab-actions">詳細</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>provisioning</code>
          </td>

          <td>
            <code>SsoProvisioningTabEditProps</code>
          </td>

          <td>
            プロビジョニングタブのアクション。
            <a href="#provisioning-tab-actions">詳細</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>domains</code>
          </td>

          <td>
            <code>SsoDomainsTabEditProps</code>
          </td>

          <td>
            ドメインタブのアクション。<a href="#domains-tab-actions">詳細</a>
          </td>
        </tr>
      </tbody>
    </table>

    **backButton**

    **型:** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    コンポーネントのヘッダーにある戻るボタンを設定します。このボタンを使用すると、プロバイダー一覧に戻ることができます。

    **プロパティ:**

    * `icon`—カスタム Lucide アイコンコンポーネント (省略可。デフォルトは ArrowLeft)
    * `onClick`—ナビゲーション用のクリックハンドラー

    **例：**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        icon: ChevronLeft,
        onClick: () => navigate("/providers"),
      }}
    />;
    ```

    ***

    <h3 id="sso-tab-actions">
      SSO タブのアクション
    </h3>

    `sso` プロップは、SSO 設定タブの操作を構成します。このタブでは、プロバイダーの認証設定を管理します。

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>タイプ</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>updateAction</code>
          </td>

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

          <td>
            プロバイダーの設定を更新します。
          </td>
        </tr>

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

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

          <td>
            テナントからプロバイダーを完全に削除します。
          </td>
        </tr>

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

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

          <td>
            テナントから削除することなく、organization からプロバイダーを解除します。
          </td>
        </tr>
      </tbody>
    </table>

    **sso.updateAction**

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

    プロバイダー設定 (クライアントID、シークレット、証明書など) の変更を保存するかどうかを制御します。

    **プロパティ:**

    * `disabled`—保存ボタンを無効にします
    * `onBefore(provider)`—更新前に実行されます。保存を中止するには `false` を返します (たとえば、確認ダイアログを表示する場合) 。
    * `onAfter(provider, result)`—Provider が正常に更新された後に実行されます。通知の表示やイベントの追跡に使用します。

    **例：**

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      sso={{
        updateAction: {
          onBefore: (provider) => {
            return confirm("Save changes to provider configuration?");
          },
          onAfter: (provider) => {
            toast.success("Provider configuration saved");
            analytics.track("Provider Updated", { name: provider.name });
          },
        },
      }}
    />
    ```

    ***

    **sso.deleteAction**

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

    Auth0 テナントからプロバイダーを完全に削除するかどうかを制御します。この操作は取り消せません。

    **例：**

    ```tsx wrap lines theme={null}
    sso={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
        },
        onAfter: () => navigate("/providers"),
      },
    }}
    ```

    ***

    **sso.deleteFromOrganizationAction**

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

    プロバイダーを組織から削除する操作を制御します。プロバイダーは組織から切り離されますが、テナントには残り、後で再追加できます。

    **例：**

    ```tsx wrap lines theme={null}
    sso={{
      deleteFromOrganizationAction: {
        onBefore: (provider) => {
          return confirm(`Remove "${provider.display_name}" from this organization?`);
        },
        onAfter: () => navigate("/providers"),
      },
    }}
    ```

    ***

    <h3 id="provisioning-tab-actions">
      プロビジョニングタブの操作
    </h3>

    `provisioning`プロップは、SCIMプロビジョニングタブのアクションを設定します。このタブでは、SCIMプロトコルによるユーザーの自動プロビジョニングを管理します。

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>種類</th>
          <th>説明</th>
        </tr>
      </thead>

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

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

          <td>
            SCIM プロビジョニングを有効化します。
          </td>
        </tr>

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

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

          <td>
            SCIM プロビジョニングを無効化します。
          </td>
        </tr>

        <tr>
          <td>
            <code>createScimTokenAction</code>
          </td>

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

          <td>
            SCIM トークンを生成します。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteScimTokenAction</code>
          </td>

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

          <td>
            SCIM トークンを取り消します。
          </td>
        </tr>
      </tbody>
    </table>

    **provisioning.createAction**

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

    プロバイダーの SCIM プロビジョニングを有効にします。有効にすると、IDプロバイダーが使用する SCIM トークンを生成できます。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      createAction: {
        onBefore: (provider) => {
          return confirm("Enable SCIM provisioning for this provider?");
        },
        onAfter: (provider, config) => {
          toast.success("SCIM provisioning enabled");
          console.log("SCIM endpoint:", config.scim_endpoint);
        },
      },
    }}
    ```

    ***

    **provisioning.deleteAction**

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

    SCIMプロビジョニングを無効にし、そのアイデンティティプロバイダーのすべてのプロビジョニング設定を削除します。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
        },
        onAfter: () => toast.success("SCIM provisioning disabled"),
      },
    }}
    ```

    ***

    **provisioning.createScimTokenAction**

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

    アイデンティティプロバイダーがAuth0で認証するための新しいSCIMベアラートークンを生成します。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      createScimTokenAction: {
        onAfter: (provider, tokenResponse) => {
          // トークンは一度しか表示されないため、すぐにコピーしてください
          console.log("New SCIM token generated");
        },
      },
    }}
    ```

    ***

    **provisioning.deleteScimTokenAction**

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

    SCIM トークンを取り消します。新しいトークンが生成されるまで、アイデンティティプロバイダーはユーザーを同期できなくなります。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteScimTokenAction: {
        onBefore: () => {
          return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
        },
      },
    }}
    ```

    ***

    <h3 id="domains-tab-actions">
      Domainsタブの操作
    </h3>

    `domains` プロパティでは、ドメインタブのアクションを設定します。このタブでは、ユーザーの自動ルーティングのためにプロバイダーに関連付けられたドメインを管理します。

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>種類</th>
          <th>説明</th>
        </tr>
      </thead>

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

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを追加します。
          </td>
        </tr>

        <tr>
          <td>
            <code>verifyAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインの所有権を確認します。
          </td>
        </tr>

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

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを削除します。
          </td>
        </tr>

        <tr>
          <td>
            <code>associateToProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider | null></code>
          </td>

          <td>
            ドメインをプロバイダーに関連付けます。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider | null></code>
          </td>

          <td>
            プロバイダーからドメインを削除します。
          </td>
        </tr>
      </tbody>
    </table>

    **domains.createAction**

    **型:** `ComponentAction<Domain>`

    プロバイダー編集画面から組織に新しいドメインを追加できるかどうかを制御します。

    **例：**

    ```tsx wrap lines theme={null}
    domains={{
      createAction: {
        onAfter: (domain) => {
          toast.success(`Domain ${domain.domain} added`);
        },
      },
    }}
    ```

    ***

    **domains.verifyAction**

    **型:** `ComponentAction<Domain>`

    DNS TXTレコードによるドメイン検証を制御します。

    **例：**

    ```tsx wrap lines theme={null}
    domains={{
      verifyAction: {
        onBefore: (domain) => {
          return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`);
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully`);
        },
      },
    }}
    ```

    ***

    **domains.deleteAction**

    **型:** `ComponentAction<Domain>`

    ドメインの削除を制御します。

    **例：**

    ```tsx wrap lines theme={null}
    domains={{
      deleteAction: {
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}?`);
        },
      },
    }}
    ```

    ***

    **domains.associateToProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider | null>`

    検証済みドメインをこのSSOプロバイダーに関連付け、ユーザーを自動的にルーティングします。

    **例：**

    ```tsx wrap lines theme={null}
    domains={{
      associateToProviderAction: {
        onAfter: (domain, provider) => {
          console.log(`${domain.domain} now routes to ${provider?.name}`);
        },
      },
    }}
    ```

    ***

    **domains.deleteFromProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider | null>`

    このプロバイダーからドメインの関連付けを解除します。

    ***

    <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>SsoProviderEditSchema</code>
          </td>

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

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

          <td>
            <code>Partial\<SsoProviderEditMessages></code>
          </td>

          <td>
            i18n テキストの上書き。
          </td>
        </tr>

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

          <td>
            <code>ComponentStyling\<SsoProviderEditClasses></code>
          </td>

          <td>
            CSS 変数およびクラスの上書き。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

    プロバイダーとドメインのフィールドにカスタムバリデーションルールを設定します。

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

      **provider.**\*—strategyごとのProvider設定フィールド

      * 共通: `name`、`displayName`
      * strategy固有のフィールド (SsoProviderCreateと同じ)

      **domains.create.domainUrl**—Domain URLのバリデーション
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      schema={{
        provider: {
          displayName: {
            required: true,
            maxLength: 100,
          },
        },
        domains: {
          create: {
            domainUrl: {
              regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
              errorMessage: "Enter a valid domain (example.com)",
            },
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

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

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントのヘッダー

      * `title`, `back_button_text`

      **tabs**—タブのラベルとコンテンツ

      * `tabs.sso.name`—SSOタブのラベル
      * `tabs.sso.content`—SSOタブのメッセージ
        * `details.third_party_access`—`title`, `label`, `helper_text`
        * `details.cross_app_access`—`title`, `label`, `helper_text`, `domain_verification_text`, `saml_description`, `saml_discovery_url_label`, `saml_discovery_url_placeholder`, `saml_discovery_url_helper`
        * `title`, `description`
        * `fields.*`—strategyごとのフォームフィールドラベル
        * `actions.save_button_text`, `actions.delete_button_text`
        * `delete_modal.*`, `remove_modal.*`
      * `tabs.provisioning.name`—プロビジョニングタブのラベル
      * `tabs.domains.name`—ドメインタブのラベル

      **provisioning\_tab**—プロビジョニングタブ

      * `title`, `description`
      * `scim_endpoint.label`, `scim_token.label`
      * `actions.enable_button_text`, `actions.disable_button_text`
      * `actions.generate_token_button_text`, `actions.revoke_token_button_text`

      **domains\_tab**—ドメインタブ

      * `title`, `description`
      * DomainTableメッセージと同じ構造

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

      * `provider_update_success`, `provider_delete_success`
      * `provisioning_enable_success`, `provisioning_disable_success`
      * `scim_token_create_success`, `scim_token_delete_success`
      * ドメイン関連の通知
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      customMessages={{
        header: {
          title: "Edit Provider",
        },
        tabs: {
          sso: {
            name: "Settings",
            content: {
              details: {
                third_party_access: {
                  title: "Third-Party Application Access",
                  label: "Allow this provider to be used by third-party applications",
                  helper_text: "External applications can authenticate users through this provider.",
                },
                cross_app_access: {
                  title: "Cross App Access",
                  label: "Allow this provider to authorize access to this Resource Application",
                  helper_text: "Accept authorizations from this provider to issue API access tokens.",
                  domain_verification_text: "The OIDC issuer domain must be verified.",
                  saml_description: "Provide the identity provider's OpenID Connect Configuration.",
                  saml_discovery_url_label: "OIDC Issuer or Discovery URL",
                  saml_discovery_url_helper: "Enter an issuer URL or discovery URL",
                },
              },
              actions: {
                save_button_text: "Save Changes",
              },
            },
          },
          provisioning: { name: "User Sync" },
          domains: { name: "Domains" },
        },
        notifications: {
          provider_update_success: "Provider saved successfully!",
        },
      }}
    />
    ```

    ***

    **スタイリング**

    CSS変数やクラスのオーバーライドで外観をカスタマイズできます。テーマ対応のスタイル設定をサポートします。

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

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

      **クラス**—コンポーネントのクラス上書き

      * `SsoProviderEdit-header`
      * `SsoProviderEdit-tabs`
      * `ProviderConfigure-ThirdPartyAccess`
      * `ProviderConfigure-CrossAppAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "SsoProviderEdit-tabs": "border-b border-gray-200",
        },
      }}
    />
    ```

    ***

    <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>useSsoProviderEdit</code>
          </td>

          <td>Providerの読み込みと更新処理</td>
        </tr>

        <tr>
          <td>
            <code>useSsoDomainTab</code>
          </td>

          <td>ドメインの関連付け管理</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 { SsoProviderEdit } from "@auth0/universal-components-react";
    import { useRouter } from "next/navigation";

    export function EditProviderPage({ providerId }) {
      const router = useRouter();

      return (
        <SsoProviderEdit
          providerId={providerId}
          backButton={{
            onClick: () => router.push("/providers"),
          }}
          sso={{
            updateAction: {
              onAfter: () => console.log("Provider updated"),
            },
          }}
        />
      );
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      import React from "react";
      import { SsoProviderEdit } from "@auth0/universal-components-react";
      import { useRouter, useSearchParams } from "next/navigation";
      import { analytics } from "./lib/analytics";

      function EditProviderPage() {
        const router = useRouter();
        const searchParams = useSearchParams();
        const providerId = searchParams.get("id");

        return (
          <div className="max-w-4xl mx-auto p-6">
            <SsoProviderEdit
              providerId={providerId}
              backButton={{
                onClick: () => router.push("/providers"),
              }}
              sso={{
                updateAction: {
                  onAfter: (provider) => {
                    analytics.track("Provider Updated", { name: provider.name });
                    toast.success("Provider configuration saved");
                  },
                },
                deleteAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Permanently delete "${provider.display_name}"? This cannot be undone.`,
                    );
                  },
                },
                deleteFromOrganizationAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Remove "${provider.display_name}" from this organization?`,
                    );
                  },
                  onAfter: () => {
                    toast.success("Provider removed from organization");
                    router.push("/providers");
                  },
                },
              }}
              provisioning={{
                createAction: {
                  onAfter: () => toast.success("SCIM provisioning enabled"),
                },
                createScimTokenAction: {
                  onAfter: () =>
                    toast.info("Copy your SCIM token - it won't be shown again"),
                },
              }}
              domains={{
                verifyAction: {
                  onAfter: (domain) => {
                    toast.success(`${domain.domain} verified`);
                  },
                },
                deleteAction: {
                  onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
                },
              }}
              customMessages={{
                tabs: {
                  sso: "Configuration",
                  provisioning: "User Sync (SCIM)",
                  domains: "Linked Domains",
                },
              }}
              styling={{
                variables: {
                  common: { "--color-primary": "#059669" },
                },
              }}
            />
          </div>
        );
      }

      export default EditProviderPage;
      ```
    </Accordion>

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

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

    コアプロップスは、コンポーネントの動作に不可欠です。`SsoProviderEdit` で正しいプロバイダーを読み込み、編集するには、プロバイダーIDが必要です。

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

      <tbody>
        <tr>
          <td>
            <code>providerId</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>
            <strong>必須。</strong> 編集するSSO ProviderのID。
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    表示用プロップスは、コンポーネントの動作に影響を与えることなく、レンダリング方法を制御します。

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

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

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

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

        <tr>
          <td>
            <code>hideProvisioningTab</code>
          </td>

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

          <td>
            プロビジョニング (SCIM) タブを非表示にします。デフォルト: <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>

        <tr>
          <td>
            <code>hideAttributeMappings</code>
          </td>

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

          <td>
            属性マッピングのセクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    3つのタブにおけるユーザー操作は、各タブ名 (`sso`、`provisioning`、`domains`) の下に整理された複数のアクションプロップスで処理されます。

    <table class="table">
      <thead>
        <tr>
          <th>プロップス</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            戻るボタンの設定。
          </td>
        </tr>

        <tr>
          <td>
            <code>sso</code>
          </td>

          <td>
            <code>SsoProviderTabEditProps</code>
          </td>

          <td>
            SSOタブのアクション。<a href="#sso-tab-actions">詳細</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>provisioning</code>
          </td>

          <td>
            <code>SsoProvisioningTabEditProps</code>
          </td>

          <td>
            プロビジョニングタブのアクション。
            <a href="#provisioning-tab-actions">詳細</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>domains</code>
          </td>

          <td>
            <code>SsoDomainsTabEditProps</code>
          </td>

          <td>
            ドメインタブのアクション。<a href="#domains-tab-actions">詳細</a>
          </td>
        </tr>
      </tbody>
    </table>

    **backButton**

    **型:** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    コンポーネントのヘッダーにある戻るボタンを設定します。このボタンを使用すると、プロバイダー一覧に戻ることができます。

    **プロパティ:**

    * `icon`—カスタム Lucide アイコンコンポーネント (省略可。デフォルトは ArrowLeft)
    * `onClick`—ナビゲーション用のクリックハンドラー

    **例：**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        icon: ChevronLeft,
        onClick: () => router.push("/providers"),
      }}
    />;
    ```

    ***

    <h3 id="sso-tab-actions-2">
      SSO タブのアクション
    </h3>

    `sso` プロップは、SSO 設定タブの操作を構成します。このタブでは、プロバイダーの認証設定を管理します。

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>タイプ</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>updateAction</code>
          </td>

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

          <td>
            プロバイダーの設定を更新します。
          </td>
        </tr>

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

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

          <td>
            テナントからプロバイダーを完全に削除します。
          </td>
        </tr>

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

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

          <td>
            テナントから削除することなく、organization からプロバイダーを解除します。
          </td>
        </tr>
      </tbody>
    </table>

    **sso.updateAction**

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

    プロバイダー設定 (クライアントID、シークレット、証明書など) の変更を保存するかどうかを制御します。

    **プロパティ:**

    * `disabled`—保存ボタンを無効にします
    * `onBefore(provider)`—更新前に実行されます。保存を中止するには `false` を返します (たとえば、確認ダイアログを表示する場合) 。
    * `onAfter(provider, result)`—Provider が正常に更新された後に実行されます。通知の表示やイベントの追跡に使用します。

    **例：**

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      sso={{
        updateAction: {
          onBefore: (provider) => {
            return confirm("Save changes to provider configuration?");
          },
          onAfter: (provider) => {
            toast.success("Provider configuration saved");
            analytics.track("Provider Updated", { name: provider.name });
          },
        },
      }}
    />
    ```

    ***

    **sso.deleteAction**

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

    Auth0 テナントからプロバイダーを完全に削除するかどうかを制御します。この操作は元に戻せません。

    **例：**

    ```tsx wrap lines theme={null}
    sso={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
        },
        onAfter: () => router.push("/providers"),
      },
    }}
    ```

    ***

    **sso.deleteFromOrganizationAction**

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

    プロバイダーを組織から削除する操作を制御します。プロバイダーは組織から切り離されますが、テナントには残り、後で再追加できます。

    **例：**

    ```tsx wrap lines theme={null}
    sso={{
      deleteFromOrganizationAction: {
        onBefore: (provider) => {
          return confirm(`Remove "${provider.display_name}" from this organization?`);
        },
        onAfter: () => router.push("/providers"),
      },
    }}
    ```

    ***

    <h3 id="provisioning-tab-actions-2">
      プロビジョニングタブの操作
    </h3>

    `provisioning`プロパティは、SCIMプロビジョニングタブのアクションを設定します。このタブでは、SCIMプロトコルによるユーザーの自動プロビジョニングを管理します。

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>種類</th>
          <th>説明</th>
        </tr>
      </thead>

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

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

          <td>
            SCIM プロビジョニングを有効化します。
          </td>
        </tr>

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

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

          <td>
            SCIM プロビジョニングを無効化します。
          </td>
        </tr>

        <tr>
          <td>
            <code>createScimTokenAction</code>
          </td>

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

          <td>
            SCIM トークンを生成します。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteScimTokenAction</code>
          </td>

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

          <td>
            SCIM トークンを取り消します。
          </td>
        </tr>
      </tbody>
    </table>

    **provisioning.createAction**

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

    プロバイダーの SCIM プロビジョニングを有効にします。有効にすると、IDプロバイダーが使用するための SCIM トークンを生成できます。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      createAction: {
        onBefore: (provider) => {
          return confirm("Enable SCIM provisioning for this provider?");
        },
        onAfter: (provider, config) => {
          toast.success("SCIM provisioning enabled");
          console.log("SCIM endpoint:", config.scim_endpoint);
        },
      },
    }}
    ```

    ***

    **provisioning.deleteAction**

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

    SCIMプロビジョニングを無効にし、そのアイデンティティプロバイダーのすべてのプロビジョニング設定を削除します。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
        },
        onAfter: () => toast.success("SCIM provisioning disabled"),
      },
    }}
    ```

    ***

    **provisioning.createScimTokenAction**

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

    アイデンティティプロバイダーがAuth0で認証するための新しいSCIMベアラートークンを生成します。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      createScimTokenAction: {
        onAfter: (provider, tokenResponse) => {
          // トークンは一度しか表示されないため、すぐにコピーしてください
          console.log("New SCIM token generated");
        },
      },
    }}
    ```

    ***

    **provisioning.deleteScimTokenAction**

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

    SCIM トークンを取り消します。新しいトークンが生成されるまで、IDプロバイダーはユーザーを同期できなくなります。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteScimTokenAction: {
        onBefore: () => {
          return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
        },
      },
    }}
    ```

    ***

    <h3 id="domains-tab-actions-2">
      ドメインタブの操作
    </h3>

    `domains` プロパティでは、ドメインタブのアクションを設定します。このタブでは、ユーザーの自動ルーティングのためにプロバイダーに関連付けられたドメインを管理します。

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>種類</th>
          <th>説明</th>
        </tr>
      </thead>

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

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを追加します。
          </td>
        </tr>

        <tr>
          <td>
            <code>verifyAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインの所有権を確認します。
          </td>
        </tr>

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

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを削除します。
          </td>
        </tr>

        <tr>
          <td>
            <code>associateToProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider | null></code>
          </td>

          <td>
            ドメインをプロバイダーに関連付けます。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider | null></code>
          </td>

          <td>
            プロバイダーからドメインを削除します。
          </td>
        </tr>
      </tbody>
    </table>

    **domains.createAction**

    **型:** `ComponentAction<Domain>`

    プロバイダーの編集画面から組織に新しいドメインを追加できるようにします。

    **例：**

    ```tsx wrap lines theme={null}
    domains={{
      createAction: {
        onAfter: (domain) => {
          toast.success(`Domain ${domain.domain} added`);
        },
      },
    }}
    ```

    ***

    **domains.verifyAction**

    **型:** `ComponentAction<Domain>`

    DNS TXTレコードによるドメイン検証を制御します。

    **例：**

    ```tsx wrap lines theme={null}
    domains={{
      verifyAction: {
        onBefore: (domain) => {
          return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`);
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully`);
        },
      },
    }}
    ```

    ***

    **domains.deleteAction**

    **型:** `ComponentAction<Domain>`

    ドメインの削除を制御します。

    **例：**

    ```tsx wrap lines theme={null}
    domains={{
      deleteAction: {
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}?`);
        },
      },
    }}
    ```

    ***

    **domains.associateToProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider | null>`

    検証済みドメインをこのSSOプロバイダーに関連付け、ユーザーを自動的にルーティングします。

    **例：**

    ```tsx wrap lines theme={null}
    domains{{
      associateToProviderAction: {
        onAfter: (domain, provider) => {
          console.log(`${domain.domain} now routes to ${provider?.name}`);
        },
      },
    }}
    ```

    ***

    **domains.deleteFromProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider | null>`

    このプロバイダーからドメインの関連付けを解除します。

    ***

    <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>SsoProviderEditSchema</code>
          </td>

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

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

          <td>
            <code>Partial\<SsoProviderEditMessages></code>
          </td>

          <td>
            i18n テキストの上書き。
          </td>
        </tr>

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

          <td>
            <code>ComponentStyling\<SsoProviderEditClasses></code>
          </td>

          <td>
            CSS 変数およびクラスの上書き。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

    プロバイダーとドメインのフィールドにカスタムバリデーションルールを設定します。

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

      **provider.**\*—strategy別のProvider設定フィールド

      * 共通: `name`, `displayName`
      * strategy固有のフィールド (SsoProviderCreateと同じ)

      **domains.create.domainUrl**—ドメインURLのバリデーション
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      schema={{
        provider: {
          displayName: {
            required: true,
            maxLength: 100,
          },
        },
        domains: {
          create: {
            domainUrl: {
              regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
              errorMessage: "Enter a valid domain (example.com)",
            },
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

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

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントのヘッダー

      * `title`, `back_button_text`

      **tabs**—タブのラベルとコンテンツ

      * `tabs.sso.name`—SSOタブのラベル
      * `tabs.sso.content`—SSOタブのメッセージ
        * `details.third_party_access`—`title`、`label`、`helper_text`
        * `details.cross_app_access`—`title`、`label`、`helper_text`、`domain_verification_text`、`saml_description`、`saml_discovery_url_label`、`saml_discovery_url_placeholder`、`saml_discovery_url_helper`
        * `title`、`description`
        * `fields.*`—strategyごとのフォームフィールドラベル
        * `actions.save_button_text`、`actions.delete_button_text`
        * `delete_modal.*`、`remove_modal.*`
      * `tabs.provisioning.name`—プロビジョニングタブのラベル
      * `tabs.domains.name`—ドメインタブのラベル

      **provisioning\_tab**—プロビジョニングタブ

      * `title`、`description`
      * `scim_endpoint.label`、`scim_token.label`
      * `actions.enable_button_text`、`actions.disable_button_text`
      * `actions.generate_token_button_text`、`actions.revoke_token_button_text`

      **domains\_tab**—ドメインタブ

      * `title`、`description`
      * DomainTableメッセージと同じ構造

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

      * `provider_update_success`、`provider_delete_success`
      * `provisioning_enable_success`、`provisioning_disable_success`
      * `scim_token_create_success`、`scim_token_delete_success`
      * ドメイン関連の通知
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      customMessages={{
        header: {
          title: "Edit Provider",
        },
        tabs: {
          sso: {
            name: "Settings",
            content: {
              details: {
                third_party_access: {
                  title: "Third-Party Application Access",
                  label: "Allow this provider to be used by third-party applications",
                  helper_text: "External applications can authenticate users through this provider.",
                },
                cross_app_access: {
                  title: "Cross App Access",
                  label: "Allow this provider to authorize access to this Resource Application",
                  helper_text: "Accept authorizations from this provider to issue API access tokens.",
                  domain_verification_text: "The OIDC issuer domain must be verified.",
                  saml_description: "Provide the identity provider's OpenID Connect Configuration.",
                  saml_discovery_url_label: "OIDC Issuer or Discovery URL",
                  saml_discovery_url_helper: "Enter an issuer URL or discovery URL",
                },
              },
              actions: {
                save_button_text: "Save Changes",
              },
            },
          },
          provisioning: { name: "User Sync" },
          domains: { name: "Domains" },
        },
        notifications: {
          provider_update_success: "Provider saved successfully!",
        },
      }}
    />
    ```

    ***

    **スタイリング**

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

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

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

      **クラス**—コンポーネントのクラス上書き

      * `SsoProviderEdit-header`
      * `SsoProviderEdit-tabs`
      * `ProviderConfigure-ThirdPartyAccess`
      * `ProviderConfigure-CrossAppAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "SsoProviderEdit-tabs": "border-b border-gray-200",
        },
      }}
    />
    ```

    ***

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

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

    これらのHooksは、UIを伴わずに基盤となるロジックを提供します。Auth0 APIとの連携を活用して、完全にカスタマイズされたインターフェースを構築できます。

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

      <tbody>
        <tr>
          <td>
            <code>useSsoProviderEdit</code>
          </td>

          <td>Providerの読み込みと更新処理</td>
        </tr>

        <tr>
          <td>
            <code>useSsoDomainTab</code>
          </td>

          <td>ドメインの関連付け管理</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-edit
    ```

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

    <details>
      <summary>レガシー Vercel registry (廃止)</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-edit.json
      ```

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

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

    ```tsx wrap lines theme={null}
    import { SsoProviderEdit } from "@/components/auth0/my-organization/sso-provider-edit";

    export function EditProviderPage({ providerId }) {
      const navigate = useNavigate();

      return (
        <SsoProviderEdit
          providerId={providerId}
          backButton={{
            onClick: () => navigate("/providers"),
          }}
          sso={{
            updateAction: {
              onAfter: () => console.log("Provider updated"),
            },
          }}
        />
      );
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx lines theme={null}
      import React from "react";
      import { SsoProviderEdit } from "@/components/auth0/my-organization/sso-provider-edit";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate, useParams } from "react-router-dom";
      import { analytics } from "./lib/analytics";

      function EditProviderPage() {
        const { providerId } = useParams();
        const navigate = useNavigate();

        return (
          <div className="max-w-4xl mx-auto p-6">
            <SsoProviderEdit
              providerId={providerId}
              backButton={{
                onClick: () => navigate("/providers"),
              }}
              sso={{
                updateAction: {
                  onAfter: (provider) => {
                    analytics.track("Provider Updated", { name: provider.name });
                    toast.success("Provider configuration saved");
                  },
                },
                deleteAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Permanently delete "${provider.display_name}"? This cannot be undone.`,
                    );
                  },
                },
                deleteFromOrganizationAction: {
                  onBefore: (provider) => {
                    return confirm(
                      `Remove "${provider.display_name}" from this organization?`,
                    );
                  },
                  onAfter: () => {
                    toast.success("Provider removed from organization");
                    navigate("/providers");
                  },
                },
              }}
              provisioning={{
                createAction: {
                  onAfter: () => toast.success("SCIM provisioning enabled"),
                },
                createScimTokenAction: {
                  onAfter: () =>
                    toast.info("Copy your SCIM token - it won't be shown again"),
                },
              }}
              domains={{
                verifyAction: {
                  onAfter: (domain) => {
                    toast.success(`${domain.domain} verified`);
                  },
                },
                deleteAction: {
                  onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
                },
              }}
              customMessages={{
                tabs: {
                  sso: "Configuration",
                  provisioning: "User Sync (SCIM)",
                  domains: "Linked Domains",
                },
              }}
              styling={{
                variables: {
                  common: { "--color-primary": "#059669" },
                },
              }}
            />
          </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>
              <EditProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

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

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

    コアプロップスは、コンポーネントの動作に不可欠です。`SsoProviderEdit` で正しいプロバイダーを読み込み、編集するには、プロバイダーIDが必要です。

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

      <tbody>
        <tr>
          <td>
            <code>providerId</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>
            <strong>必須。</strong> 編集するSSO ProviderのID。
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    表示用プロップスは、コンポーネントの動作に影響を与えることなく、レンダリング方法を制御します。

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

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

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

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

        <tr>
          <td>
            <code>hideProvisioningTab</code>
          </td>

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

          <td>
            プロビジョニング (SCIM) タブを非表示にします。デフォルト: <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>

        <tr>
          <td>
            <code>hideAttributeMappings</code>
          </td>

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

          <td>
            属性マッピングのセクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

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

    3つのタブにおけるユーザー操作は、各タブ名 (`sso`、`provisioning`、`domains`) の下に整理された複数のアクションプロップスで処理されます。

    <table class="table">
      <thead>
        <tr>
          <th>プロップス</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            戻るボタンの設定。
          </td>
        </tr>

        <tr>
          <td>
            <code>sso</code>
          </td>

          <td>
            <code>SsoProviderTabEditProps</code>
          </td>

          <td>
            SSOタブのアクション。<a href="#sso-tab-actions">詳細</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>provisioning</code>
          </td>

          <td>
            <code>SsoProvisioningTabEditProps</code>
          </td>

          <td>
            プロビジョニングタブのアクション。
            <a href="#provisioning-tab-actions">詳細</a>
          </td>
        </tr>

        <tr>
          <td>
            <code>domains</code>
          </td>

          <td>
            <code>SsoDomainsTabEditProps</code>
          </td>

          <td>
            ドメインタブのアクション。<a href="#domains-tab-actions">詳細</a>
          </td>
        </tr>
      </tbody>
    </table>

    **backButton**

    **Type:** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    コンポーネントのヘッダーにある戻るボタンを設定します。このボタンを使用すると、プロバイダー一覧に戻ることができます。

    **プロパティ:**

    * `icon`—カスタム Lucide アイコンコンポーネント (省略可。デフォルトは ArrowLeft)
    * `onClick`—ナビゲーション用のクリックハンドラー

    **例：**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        icon: ChevronLeft,
        onClick: () => navigate("/providers"),
      }}
    />;
    ```

    ***

    <h3 id="sso-tab-actions-3">
      SSO タブのアクション
    </h3>

    `sso` プロップは、SSO 設定タブの操作を構成します。このタブでは、プロバイダーの認証設定を管理します。

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>タイプ</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>updateAction</code>
          </td>

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

          <td>
            プロバイダーの設定を更新します。
          </td>
        </tr>

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

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

          <td>
            テナントからプロバイダーを完全に削除します。
          </td>
        </tr>

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

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

          <td>
            テナントから削除することなく、organization からプロバイダーを解除します。
          </td>
        </tr>
      </tbody>
    </table>

    **sso.updateAction**

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

    プロバイダー設定 (クライアントID、シークレット、証明書など) の変更を保存するかどうかを制御します。

    **プロパティ:**

    * `disabled`—保存ボタンを無効にします
    * `onBefore(provider)`—更新前に実行されます。保存を中止するには `false` を返します (たとえば、確認ダイアログを表示する場合) 。
    * `onAfter(provider, result)`—Provider が正常に更新された後に実行されます。通知の表示やイベントの追跡に使用します。

    **例：**

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      sso={{
        updateAction: {
          onBefore: (provider) => {
            return confirm("Save changes to provider configuration?");
          },
          onAfter: (provider) => {
            toast.success("Provider configuration saved");
            analytics.track("Provider Updated", { name: provider.name });
          },
        },
      }}
    />
    ```

    ***

    **sso.deleteAction**

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

    Auth0 テナントからプロバイダーを完全に削除するかどうかを制御します。この操作は元に戻せません。

    **例：**

    ```tsx wrap lines theme={null}
    sso={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
        },
        onAfter: () => navigate("/providers"),
      },
    }}
    ```

    ***

    **sso.deleteFromOrganizationAction**

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

    プロバイダーを組織から削除する操作を制御します。プロバイダーは組織から切り離されますが、テナントには残り、後で再追加できます。

    **例：**

    ```tsx wrap lines theme={null}
    sso={{
      deleteFromOrganizationAction: {
        onBefore: (provider) => {
          return confirm(`Remove "${provider.display_name}" from this organization?`);
        },
        onAfter: () => navigate("/providers"),
      },
    }}
    ```

    ***

    <h3 id="provisioning-tab-actions-3">
      プロビジョニングタブの操作
    </h3>

    `provisioning`プロップは、SCIMプロビジョニングタブのアクションを設定します。このタブでは、SCIMプロトコルによるユーザーの自動プロビジョニングを管理します。

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>種類</th>
          <th>説明</th>
        </tr>
      </thead>

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

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

          <td>
            SCIM プロビジョニングを有効化します。
          </td>
        </tr>

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

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

          <td>
            SCIM プロビジョニングを無効化します。
          </td>
        </tr>

        <tr>
          <td>
            <code>createScimTokenAction</code>
          </td>

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

          <td>
            SCIM トークンを生成します。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteScimTokenAction</code>
          </td>

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

          <td>
            SCIM トークンを取り消します。
          </td>
        </tr>
      </tbody>
    </table>

    **provisioning.createAction**

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

    プロバイダーの SCIM プロビジョニングを有効にします。有効にすると、アイデンティティプロバイダーが使用するための SCIM トークンを生成できます。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      createAction: {
        onBefore: (provider) => {
          return confirm("Enable SCIM provisioning for this provider?");
        },
        onAfter: (provider, config) => {
          toast.success("SCIM provisioning enabled");
          console.log("SCIM endpoint:", config.scim_endpoint);
        },
      },
    }}
    ```

    ***

    **provisioning.deleteAction**

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

    SCIMプロビジョニングを無効にし、そのアイデンティティプロバイダーのすべてのプロビジョニング設定を削除します。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteAction: {
        onBefore: (provider) => {
          return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
        },
        onAfter: () => toast.success("SCIM provisioning disabled"),
      },
    }}
    ```

    ***

    **provisioning.createScimTokenAction**

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

    アイデンティティプロバイダーがAuth0で認証するための新しいSCIMベアラートークンを生成します。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      createScimTokenAction: {
        onAfter: (provider, tokenResponse) => {
          // トークンは一度しか表示されないため、すぐにコピーしてください
          console.log("New SCIM token generated");
        },
      },
    }}
    ```

    ***

    **provisioning.deleteScimTokenAction**

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

    SCIM トークンを取り消します。新しいトークンが生成されるまで、アイデンティティプロバイダーはユーザーを同期できなくなります。

    **例：**

    ```tsx wrap lines theme={null}
    provisioning={{
      deleteScimTokenAction: {
        onBefore: () => {
          return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
        },
      },
    }}
    ```

    ***

    <h3 id="domains-tab-actions-3">
      ドメインタブの操作
    </h3>

    `domains` プロパティでは、ドメインタブのアクションを設定します。このタブでは、ユーザーの自動ルーティングのためにプロバイダーに関連付けられたドメインを管理します。

    <table class="table">
      <thead>
        <tr>
          <th>Action</th>
          <th>種類</th>
          <th>説明</th>
        </tr>
      </thead>

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

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを追加します。
          </td>
        </tr>

        <tr>
          <td>
            <code>verifyAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインの所有権を確認します。
          </td>
        </tr>

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

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを削除します。
          </td>
        </tr>

        <tr>
          <td>
            <code>associateToProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider | null></code>
          </td>

          <td>
            ドメインをプロバイダーに関連付けます。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider | null></code>
          </td>

          <td>
            プロバイダーからドメインを削除します。
          </td>
        </tr>
      </tbody>
    </table>

    **domains.createAction**

    **型:** `ComponentAction<Domain>`

    プロバイダーの編集画面から組織に新しいドメインを追加できるようにします。

    **例：**

    ```tsx wrap lines theme={null}
    domains={{
      createAction: {
        onAfter: (domain) => {
          toast.success(`Domain ${domain.domain} added`);
        },
      },
    }}
    ```

    ***

    **domains.verifyAction**

    **型:** `ComponentAction<Domain>`

    DNS TXTレコードによるドメイン検証を制御します。

    **例：**

    ```tsx wrap lines theme={null}
    domains={{
      verifyAction: {
        onBefore: (domain) => {
          return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`);
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully`);
        },
      },
    }}
    ```

    ***

    **domains.deleteAction**

    **型:** `ComponentAction<Domain>`

    ドメインの削除を制御します。

    **例：**

    ```tsx wrap lines theme={null}
    domains={{
      deleteAction: {
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}?`);
        },
      },
    }}
    ```

    ***

    **domains.associateToProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider | null>`

    検証済みドメインをこのSSOプロバイダーに関連付け、ユーザーを自動的にルーティングします。

    **例：**

    ```tsx wrap lines theme={null}
    domains={{
      associateToProviderAction: {
        onAfter: (domain, provider) => {
          console.log(`${domain.domain} now routes to ${provider?.name}`);
        },
      },
    }}
    ```

    ***

    **domains.deleteFromProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider | null>`

    このプロバイダーからドメインの関連付けを解除します。

    ***

    <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>SsoProviderEditSchema</code>
          </td>

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

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

          <td>
            <code>Partial\<SsoProviderEditMessages></code>
          </td>

          <td>
            i18n テキストの上書き。
          </td>
        </tr>

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

          <td>
            <code>ComponentStyling\<SsoProviderEditClasses></code>
          </td>

          <td>
            CSS 変数およびクラスの上書き。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

    プロバイダーとドメインのフィールドにカスタムバリデーションルールを設定します。

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

      **provider.**\*—strategy別のProvider設定フィールド

      * 共通: `name`, `displayName`
      * strategy固有のフィールド (SsoProviderCreateと同じ)

      **domains.create.domainUrl**—ドメインURLのバリデーション
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      schema={{
        provider: {
          displayName: {
            required: true,
            maxLength: 100,
          },
        },
        domains: {
          create: {
            domainUrl: {
              regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
              errorMessage: "Enter a valid domain (example.com)",
            },
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

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

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントのヘッダー

      * `title`, `back_button_text`

      **tabs**—タブのラベルとコンテンツ

      * `tabs.sso.name`—SSOタブのラベル
      * `tabs.sso.content`—SSOタブのメッセージ
        * `details.third_party_access`—`title`, `label`, `helper_text`
        * `details.cross_app_access`—`title`, `label`, `helper_text`, `domain_verification_text`, `saml_description`, `saml_discovery_url_label`, `saml_discovery_url_placeholder`, `saml_discovery_url_helper`
        * `title`, `description`
        * `fields.*`—strategyごとのフォームフィールドラベル
        * `actions.save_button_text`, `actions.delete_button_text`
        * `delete_modal.*`, `remove_modal.*`
      * `tabs.provisioning.name`—プロビジョニングタブのラベル
      * `tabs.domains.name`—ドメインタブのラベル

      **provisioning\_tab**—プロビジョニングタブ

      * `title`, `description`
      * `scim_endpoint.label`, `scim_token.label`
      * `actions.enable_button_text`, `actions.disable_button_text`
      * `actions.generate_token_button_text`, `actions.revoke_token_button_text`

      **domains\_tab**—ドメインタブ

      * `title`, `description`
      * DomainTableメッセージと同じ構造

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

      * `provider_update_success`, `provider_delete_success`
      * `provisioning_enable_success`, `provisioning_disable_success`
      * `scim_token_create_success`, `scim_token_delete_success`
      * ドメイン関連の通知
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      customMessages={{
        header: {
          title: "Edit Provider",
        },
        tabs: {
          sso: {
            name: "Settings",
            content: {
              details: {
                third_party_access: {
                  title: "Third-Party Application Access",
                  label: "Allow this provider to be used by third-party applications",
                  helper_text: "External applications can authenticate users through this provider.",
                },
                cross_app_access: {
                  title: "Cross App Access",
                  label: "Allow this provider to authorize access to this Resource Application",
                  helper_text: "Accept authorizations from this provider to issue API access tokens.",
                  domain_verification_text: "The OIDC issuer domain must be verified.",
                  saml_description: "Provide the identity provider's OpenID Connect Configuration.",
                  saml_discovery_url_label: "OIDC Issuer or Discovery URL",
                  saml_discovery_url_helper: "Enter an issuer URL or discovery URL",
                },
              },
              actions: {
                save_button_text: "Save Changes",
              },
            },
          },
          provisioning: { name: "User Sync" },
          domains: { name: "Domains" },
        },
        notifications: {
          provider_update_success: "Provider saved successfully!",
        },
      }}
    />
    ```

    ***

    **スタイリング**

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

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

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

      **クラス**—コンポーネントのクラス上書き

      * `SsoProviderEdit-header`
      * `SsoProviderEdit-tabs`
      * `ProviderConfigure-ThirdPartyAccess`
      * `ProviderConfigure-CrossAppAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <SsoProviderEdit
      providerId={providerId}
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "SsoProviderEdit-tabs": "border-b border-gray-200",
        },
      }}
    />
    ```

    ***

    <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>useSsoProviderEdit</code>
          </td>

          <td>Providerの取得・編集ロジック</td>
        </tr>

        <tr>
          <td>
            <code>useSsoDomainTab</code>
          </td>

          <td>ドメインの関連付け管理</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>