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

# Web で SSO プロバイダーを作成する

> プロバイダーの選択、詳細設定、認証設定を行う SSO プロバイダー作成用の複数ステップウィザード

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

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

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

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

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

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

<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` によって制御されます。ストラテジーの `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 の設定が必要です**—tenant で
      My Organization API が設定されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

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

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

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

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

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

    ```tsx wrap lines theme={null}
    import { SsoProviderCreate } from "@auth0/universal-components-react";
    import { useNavigate } from "react-router-dom";

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

      return (
        <SsoProviderCreate
          createAction={{
            onAfter: () => navigate("/providers/list"),
          }}
          backButton={{
            onClick: () => navigate("/providers/list"),
          }}
        />
      );
    }
    ```

    <Accordion title="統合例">
      ```tsx lines theme={null}
      import React from "react";
      import { SsoProviderCreate } 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 CreateSsoProviderPage() {
        const navigate = useNavigate();

        const handleCreateSuccess = (provider, result) => {
          analytics.track("SSO Provider Created", {
            strategy: provider.strategy,
            name: provider.name,
          });
          navigate("/sso-providers");
        };

        return (
          <div className="max-w-4xl mx-auto p-6">
            <SsoProviderCreate
              schema={{
                name: { required: true, minLength: 3, maxLength: 50 },
              }}
              createAction={{
                onBefore: (provider) => confirm(`Create "${provider.display_name}"?`),
                onAfter: handleCreateSuccess,
              }}
              backButton={{ onClick: () => navigate("/sso-providers") }}
              customMessages={{
                header: { title: "Add New SSO Provider" },
              }}
              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>
              <CreateSsoProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js">
    <h2 id="setup-requirements-2">
      セットアップ要件
    </h2>

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

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

    <CodeGroup>
      ```bash npm（推奨） 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 { SsoProviderCreate } from "@auth0/universal-components-react";
    import { useRouter } from "next/navigation";

    export function CreateProviderPage() {
      const router = useRouter();

      return (
        <SsoProviderCreate
          createAction={{
            onAfter: () => router.push("/providers/list"),
          }}
          backButton={{
            onClick: () => router.push("/providers/list"),
          }}
        />
      );
    }
    ```

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

      function CreateSsoProviderPage() {
        const router = useRouter();

        const handleCreateSuccess = (provider, result) => {
          analytics.track("SSO Provider Created", {
            strategy: provider.strategy,
            name: provider.name,
          });
          router.push("/sso-providers");
        };

        return (
          <div className="max-w-4xl mx-auto p-6">
            <SsoProviderCreate
              schema={{
                name: { required: true, minLength: 3, maxLength: 50 },
              }}
              createAction={{
                onBefore: (provider) => confirm(`Create "${provider.display_name}"?`),
                onAfter: handleCreateSuccess,
              }}
              backButton={{ onClick: () => router.push("/sso-providers") }}
              customMessages={{
                header: { title: "Add New SSO Provider" },
              }}
              styling={{
                variables: { common: { "--color-primary": "#059669" } },
              }}
            />
          </div>
        );
      }

      export default CreateSsoProviderPage;
      ```
    </Accordion>
  </Tab>

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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—tenant が
      My Organization API を使用するように設定されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#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-create
    ```

    <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-create.json
      ```

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

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

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

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

      return (
        <SsoProviderCreate
          createAction={{
            onAfter: () => navigate("/providers/list"),
          }}
          backButton={{
            onClick: () => navigate("/providers/list"),
          }}
        />
      );
    }
    ```

    <Accordion title="完全な連携例">
      ```tsx lines theme={null}
      import React from "react";
      import { SsoProviderCreate } from "@/components/auth0/my-organization/sso-provider-create";
      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 CreateSsoProviderPage() {
        const navigate = useNavigate();

        const handleCreateSuccess = (provider, result) => {
          analytics.track("SSO Provider Created", {
            strategy: provider.strategy,
            name: provider.name,
          });
          navigate("/sso-providers");
        };

        return (
          <div className="max-w-4xl mx-auto p-6">
            <SsoProviderCreate
              schema={{
                name: { required: true, minLength: 3, maxLength: 50 },
              }}
              createAction={{
                onBefore: (provider) => confirm(`Create "${provider.display_name}"?`),
                onAfter: handleCreateSuccess,
              }}
              backButton={{ onClick: () => navigate("/sso-providers") }}
              customMessages={{
                header: { title: "Add New SSO Provider" },
              }}
              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>
              <CreateSsoProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>
  </Tab>
</Tabs>

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

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

必須プロップスは、コンポーネントの動作に不可欠です。`SsoProviderCreate` には、プロバイダー が正常に作成された後の動作を制御する主要なプロップが 1 つだけあります。

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

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

      <td>
        <code>ComponentAction\<...></code>
      </td>

      <td>
        <strong>必須。</strong>作成後のフローを制御します。
      </td>
    </tr>
  </tbody>
</table>

**createAction**

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

`createAction` プロップは、プロバイダー が正常に作成された後にユーザーをどこへ遷移させるかを制御するため、必須です。これがないと、コンポーネントは次に何をすべきか判断できません。

**プロパティ:**

* `disabled`—作成ボタンを無効にします (例: 別の操作の実行中)
* `onBefore(data)`—プロバイダー が作成される前に実行されます。作成を中止するには `false` を返します (例: 先に確認ダイアログを表示する場合) 。
* `onAfter(data, result)`—プロバイダー が正常に作成された後に実行されます。別のページへの遷移やイベントの追跡に使用します。

**例:**

```tsx wrap lines theme={null}
// 作成後にプロバイダー一覧へ遷移する
createAction={{
  onAfter: () => navigate("/providers/list"),
}}

// 新規作成したプロバイダーの編集画面へ遷移する
createAction={{
  onAfter: (_, result) => navigate(`/providers/${result.id}`),
}}

// 作成前に確認ダイアログを表示する
createAction={{
  onBefore: (provider) => {
    return confirm(`Create SSO provider "${provider.display_name}"?`);
  },
  onAfter: () => navigate("/providers/list"),
}}
```

***

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

表示プロップは、コンポーネントの動作には影響を与えず、表示方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりできます。

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

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

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

      <td>
        すべてのフォーム入力を無効にします。デフォルト: <code>false</code>
      </td>
    </tr>
  </tbody>
</table>

***

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

Action プロップは、作成フロー以外のユーザー操作を処理します。ナビゲーションやウィザードのステップの動作を制御します。

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

      <td>
        <code>Function</code>
      </td>

      <td>
        ステップ間の移動時に呼び出されるコールバック。
      </td>
    </tr>

    <tr>
      <td>
        <code>onPrevious</code>
      </td>

      <td>
        <code>Function</code>
      </td>

      <td>
        ステップ間の移動時に呼び出されるコールバック。
      </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";

<SsoProviderCreate
  createAction={{ onAfter: () => navigate("/providers") }}
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/providers/list"),
  }}
/>;
```

***

**onNext / onPrevious**

**型:** `(stepId: string, values: Partial<SsoProviderFormValues>) => boolean`

ウィザードのステップ間の移動を制御します。これらのコールバックは、ユーザーが「次へ」または「前へ」をクリックしたときに呼び出されます。移動をキャンセルするには `false` を返します。

**ユースケース:**

* 次に進む前にステップのデータを検証する
* ステップ完了時の分析ログを記録する
* 条件に応じてステップをスキップする

**パラメータ:**

* `stepId`—現在のステップ識別子 (`"provider_select"`、`"provider_details"`、`"provider_configure"`)
* `values`—現在のフォーム値

**例:**

```tsx wrap lines theme={null}
<SsoProviderCreate
  createAction={{ onAfter: () => navigate("/providers") }}
  onNext={(stepId, values) => {
    analytics.track("SSO Wizard Step Completed", { step: stepId });
    return true;
  }}
/>
```

***

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

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

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

      <td>
        <code>Partial\<SsoProviderCreateMessages></code>
      </td>

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

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

      <td>
        <code>ComponentStyling\<SsoProviderCreateClasses></code>
      </td>

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

**schema**

プロバイダーのフィールドにカスタムバリデーションルールを設定します。ルールは、プロバイダーのstrategy (`oidc`、`samlp`、`waad`、`google-apps`、`adfs`、`pingfederate`、`okta` などの認証プロトコル) ごとに整理されています。すべてのフィールドで、`regex`、`errorMessage`、`minLength`、`maxLength`、`required` をサポートしています。

<Accordion title="利用可能なスキーマフィールド">
  **プロバイダーの詳細**

  * `name`, `displayName`

  **Okta**

  * `okta.domain`, `okta.client_id`, `okta.client_secret`, `okta.icon_url`, `okta.callback_url`

  **ADFS**

  * `adfs.meta_data_source`, `adfs.meta_data_location_url`, `adfs.adfs_server`, `adfs.fedMetadataXml`

  **Google Workspace**

  * `google-apps.domain`, `google-apps.client_id`, `google-apps.client_secret`, `google-apps.icon_url`, `google-apps.callback_url`

  **OIDC**

  * `oidc.type`, `oidc.client_id`, `oidc.client_secret`, `oidc.discovery_url`, `oidc.isFrontChannel`

  **PingFederate**

  * `pingfederate.signatureAlgorithm`, `pingfederate.digestAlgorithm`, `pingfederate.signSAMLRequest`, `pingfederate.metadataUrl`, `pingfederate.signingCert`, `pingfederate.idpInitiated`, `pingfederate.icon_url`

  **SAML**

  * `samlp.meta_data_source`, `samlp.single_sign_on_login_url`, `samlp.signatureAlgorithm`, `samlp.digestAlgorithm`, `samlp.protocolBinding`, `samlp.signSAMLRequest`, `samlp.bindingMethod`, `samlp.metadataUrl`, `samlp.cert`, `samlp.idpInitiated`, `samlp.icon_url`

  **Azure AD**

  * `waad.domain`, `waad.client_id`, `waad.client_secret`, `waad.icon_url`, `waad.callback_url`
</Accordion>

```tsx wrap lines theme={null}
<SsoProviderCreate
  createAction={{}}
  schema={{
    name: {
      minLength: 3,
      maxLength: 50,
      regex: /^[a-zA-Z0-9-_]+$/,
      errorMessage: "Name must be alphanumeric with hyphens/underscores",
    },
    displayName: {
      required: true,
      maxLength: 100,
    },
  }}
/>
```

***

**customMessages**

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

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

  * `title`, `back_button_text`

  **provider\_select**—ステップ1

  * `title`, `description`

  **provider\_details**—ステップ2

  * `title`, `description`
  * `fields.name`—`label`, `placeholder`, `helper_text`, `error`
  * `fields.display_name`—`label`, `placeholder`, `helper_text`, `error`

  **provider\_configure**—ステップ3

  * `title`, `description`, `guided_setup_button_text`
  * `fields.okta`—Oktaのフィールド
  * `fields.adfs`—ADFSのフィールド
  * `fields.google-apps`—Google Workspaceのフィールド
  * `fields.oidc`—OIDCのフィールド
  * `fields.pingfederate`—PingFederateのフィールド
  * `fields.samlp`—SAMLのフィールド
  * `fields.waad`—Azure ADのフィールド
  * `third_party_access`—`title`, `label`, `helper_text`
  * `cross_app_access`—`title`, `label`, `helper_text`, `domain_verification_text`, `saml_description`, `saml_discovery_url_label`, `saml_discovery_url_placeholder`, `saml_discovery_url_helper`

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

  * `general_error`, `provider_create_success`
</Accordion>

```tsx wrap lines theme={null}
<SsoProviderCreate
  createAction={{}}
  customMessages={{
    header: {
      title: "Add New SSO Provider",
      back_button_text: "Cancel",
    },
    provider_details: {
      title: "Provider Information",
      fields: {
        name: {
          label: "Connection Name",
          helper_text: "Internal identifier for this connection",
        },
      },
    },
    provider_configure: {
      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.",
      },
    },
    notifications: {
      provider_create_success: "SSO provider created successfully!",
    },
  }}
/>
```

***

**styling**

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

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

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

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

  * `SsoProviderCreate-header`
  * `SsoProviderCreate-wizard`
  * `ProviderSelect-root`
  * `ProviderDetails-root`
  * `ProviderConfigure-root`
  * `ProviderConfigure-ThirdPartyAccess`
  * `ProviderConfigure-CrossAppAccess`
</Accordion>

```tsx wrap lines theme={null}
<SsoProviderCreate
  createAction={{}}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderCreate-wizard": "shadow-xl rounded-xl",
      "ProviderSelect-root": "grid grid-cols-3 gap-6",
    },
  }}
/>
```

***

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

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

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

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

  <tbody>
    <tr>
      <td>
        <code>useSsoProviderCreate</code>
      </td>

      <td>プロバイダー の作成ロジックと API 連携</td>
    </tr>
  </tbody>
</table>