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

# SSOプロバイダーの作成

> プロバイダーの選択、詳細設定、認証のセットアップを行う、SSOプロバイダー作成用の多段階ウィザード

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <Spinner size={40} color="#8A94A6" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1
  }} />
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

export const Spinner = ({size = 40, color = "#8A94A6", style = {}}) => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  ...style
}} aria-label="読み込み中" role="status">
    <svg width={size} height={size} viewBox="0 0 50 50" style={{
  display: "block"
}}>
      <circle cx="25" cy="25" r="20" fill="none" stroke={color} strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
        <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
      </circle>
    </svg>
  </div>;

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

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

<Tabs>
  <Tab title="React">
    ## セットアップ要件

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 の設定が必要です** - テナントで My Organization API が有効になっていることを確認してください。[セットアップガイドを表示
      →](/ja/docs/get-started/universal-components/my-organization/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    ## インストール

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

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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      いずれかのコマンドを実行すると、共有ユーティリティと Auth0 統合に必要な
      @auth0/universal-components-core 依存パッケージもインストールされます。
    </Callout>

    ## はじめに

    ```tsx 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 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(`"${provider.display_name}" を作成しますか？`),
                onAfter: handleCreateSuccess,
              }}
              backButton={{ onClick: () => navigate("/sso-providers") }}
              customMessages={{
                header: { title: "新しい 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 domain={domain}>
              <CreateSsoProviderPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js">
    ## セットアップ要件

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

    ## インストール

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

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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      npm または pnpm コマンドを実行すると、共有ユーティリティと Auth0 統合に必要な依存パッケージ @auth0/universal-components-core もインストールされます。
    </Callout>

    ## はじめに

    ```tsx page.tsx 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 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">
    ## セットアップ要件

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

    ## インストール

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

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

    ## はじめに

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

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

<div id="props">
  ## Props
</div>

<div id="required-props">
  ### 必須 Props
</div>

必須 props は、コンポーネントの動作に不可欠です。`SsoProviderCreate` には、プロバイダーの作成が正常に完了した後の動作を制御する中核的な prop が 1 つだけあります。

<table class="table">
  <thead>
    <tr>
      <th>Prop</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` prop は、プロバイダーの作成が正常に完了した後にユーザーをどこへ遷移させるかを制御するため、必須です。これがないと、コンポーネントは次に何をすべきか判断できません。

**プロパティ:**

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

**例:**

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

***

<div id="display-props">
  ### 表示Props
</div>

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

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

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

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

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

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

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

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

***

<div id="action-props">
  ### Action Props
</div>

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

<table class="table">
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</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**

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

コンポーネントヘッダーの戻るボタンを設定します。これを使用して、プロバイダー一覧または前のページに戻れます。

**プロパティ:**

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

**例:**

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

ウィザードのステップ間の移動を制御します。これらのコールバックは、ユーザーが［Next］または［Previous］をクリックしたときに呼び出されます。移動を無効にするには `false` を返します。

**ユースケース:**

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

**パラメーター:**

* `stepId` - 現在のステップの識別子 (`"provider-select"`, `"provider-details"`, `"provider-configure"`)
* `values` - 現在のフォームの値

**例:**

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

***

<div id="customization-props">
  ### カスタマイズ用Props
</div>

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

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

プロバイダーのフィールドに対するカスタムのバリデーションルールを設定します。ルールはプロバイダーストラテジーごと (使用する認証プロトコル。例: `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 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 フィールド

  **notifications** - API レスポンス

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

```tsx 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",
        },
      },
    },
    notifications: {
      provider_create_success: "SSO provider created successfully!",
    },
  }}
/>
```

***

**スタイリング**

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

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

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

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

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

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

***

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

`SsoProviderCreate` コンポーネントは、複数の小さなサブコンポーネントとフックで構成されています。shadcn を使用している場合は、これらを個別にインポートして、カスタムの SSO プロバイダー作成ワークフローを構築できます。

<div id="available-subcomponents">
  ### 利用可能なサブコンポーネント
</div>

高度なユースケースでは、個々のサブコンポーネントをインポートして、カスタムの SSO プロバイダー作成ワークフローを構築できます。これは、別の UI に単一のステップを埋め込む必要がある場合や、props で対応できる範囲を超えてウィザードのフローをカスタマイズしたい場合に便利です。

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

  <tbody>
    <tr>
      <td>
        <code>ProviderSelect</code>
      </td>

      <td>プロバイダーアイコン付きのストラテジー選択ステップ</td>
    </tr>

    <tr>
      <td>
        <code>ProviderDetails</code>
      </td>

      <td>名前と表示名の設定ステップ</td>
    </tr>

    <tr>
      <td>
        <code>ProviderConfigure</code>
      </td>

      <td>ストラテジー固有の設定ステップ</td>
    </tr>

    <tr>
      <td>
        <code>ProviderConfigureFields</code>
      </td>

      <td>ストラテジーに応じて動的に変わるフォームフィールド</td>
    </tr>

    <tr>
      <td>
        <code>OktaProviderForm</code>
      </td>

      <td>Okta 固有の設定フォーム</td>
    </tr>

    <tr>
      <td>
        <code>AdfsProviderForm</code>
      </td>

      <td>ADFS 固有の設定フォーム</td>
    </tr>

    <tr>
      <td>
        <code>GoogleAppsProviderForm</code>
      </td>

      <td>Google Workspace 固有の設定フォーム</td>
    </tr>

    <tr>
      <td>
        <code>OidcProviderForm</code>
      </td>

      <td>OIDC 固有の設定フォーム</td>
    </tr>

    <tr>
      <td>
        <code>PingFederateProviderForm</code>
      </td>

      <td>PingFederate 固有の設定フォーム</td>
    </tr>

    <tr>
      <td>
        <code>SamlpProviderForm</code>
      </td>

      <td>SAML 固有の設定フォーム</td>
    </tr>

    <tr>
      <td>
        <code>WaadProviderForm</code>
      </td>

      <td>Azure AD 固有の設定フォーム</td>
    </tr>

    <tr>
      <td>
        <code>Wizard</code>
      </td>

      <td>複数ステップのウィザード UI</td>
    </tr>
  </tbody>
</table>

<div id="available-hooks">
  ### 利用可能な Hooks
</div>

これらの Hooks は、UI を含まずに基盤となるロジックを提供します。Auth0 API との統合を活用しつつ、完全にカスタマイズしたインターフェースを構築する際に使用します。

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