メインコンテンツへスキップ

​
セットアップの要件

Auth0の構成が必要 - テナントがMy Organization APIで構成されていることを確認してください。セットアップガイドを表示 →

​
インストール

pnpm add @auth0/universal-components-react
shadcnコマンドを実行すると、共有ユーティリティとAuth0統合の@auth0/universal-components-core依存関係もインストールされます。

​
クイックスタート

import { SsoProviderCreate } from '@auth0/universal-components-react/spa';

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

return (

<SsoProviderCreate
createAction={{
        onAfter: () => navigate("/providers/list"),
      }}
backButton={{
        onClick: () => navigate("/providers/list"),
      }}
/>
);
}
この例ではReact SPAを使用していますが、props構成（schema、customMessages、stylingなど）はNext.jsや shadcnのセットアップにも同様に適用されます。
import React from "react";
import { SsoProviderCreate } from "@auth0/universal-components-react/spa";
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プロバイダーを追加" },
        }}
        styling={{
          variables: { common: { "--color-primary": "#059669" } },
        }}
      />
    </div>
  );
}

export default function App() {
  return (
    <Auth0Provider
      domain="your-domain.auth0.com"
      clientId="your-client-id"
      authorizationParams={{ redirect_uri: window.location.origin }}
    >
      <Auth0ComponentProvider>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​
Props

​
Core Props

Core propsは、コンポーネントの操作の基礎です。SsoProviderCreateの場合、プロバイダーの作成後を制御するcore propは1つだけです。
Prop種類説明
createActionComponentAction<...>必須。 作成後のフローを制御します。詳細

​
createAction

種類： ComponentAction<CreateIdentityProviderRequestContentPrivate, IdentityProvider> createAction propは、プロバイダーが作成された後のユーザーの移動先を制御するため、必須です。これがないと、コンポーネントは次の動作がわかりません。 プロパティ：
  • disabled - ［作成］ボタンを無効にします（たとえば、別の処理が進行中の場合）
  • onBefore(data) - プロバイダーの作成前に実行します。作成を防ぐ場合はfalseを返します（確認のダイアログを表示する場合など）。
  • onAfter(data, result) - プロバイダーが作成された後で実行します。別のページに移動する場合、またはイベントを追跡する場合に使用します。
一般的なパターン： 
// Navigate to providers list after creation
createAction={{
  onAfter: () => navigate("/providers/list"),
}}

// Navigate to edit the newly created provider
createAction={{
  onAfter: (_, result) => navigate(`/providers/${result.id}`),
}}

// Add confirmation dialog before creation
createAction={{
  onBefore: (provider) => {
    return confirm(`SSOプロバイダー"${provider.display_name}"を作成しますか？`);
  },
  onAfter: () => navigate("/providers/list"),
}}

​
Display Props

Display propsは、コンポーネントのレンダリングを制御します。その動作に影響することはありません。セクションを非表示にする場合、または読み取り専用モードを有効にする場合に使用します。
Prop種類説明
readOnlybooleanすべてのフォームの入力を無効にします。デフォルト値：false
hideHeaderbooleanヘッダーセクションを非表示にします。デフォルト値：false

​
Action Props

Action propsは、主要な作成フローに限らないユーザーインタラクションを処理するもので、ナビゲーションやウィザードステップの動作を制御します。
Prop種類説明
backButtonObject［戻る］ボタンの構成。詳細
onNextFunctionステップナビゲーションコールバック。詳細
onPreviousFunctionステップナビゲーションコールバック。詳細

​
backButton

種類： { icon?: LucideIcon; onClick: (e: MouseEvent) => void } コンポーネントヘッダー内の［戻る］ボタンを構成します。これを使ってプロバイダーリストまたは前のページに戻ります。 プロパティ：
  • icon - Lucide iconのカスタムコンポーネント（任意、デフォルト値はArrowLeft）
  • onClick - ナビゲーション用クリックハンドラー
例： 
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 - 現在のフォーム値
例： 
<SsoProviderCreate
  createAction={{ onAfter: () => navigate("/providers") }}
  onNext={(stepId, values) => {
    analytics.track("SSO Wizard Step Completed", { step: stepId });
    return true;
  }}
/>

​
Customization Props

Customization propsを使うと、ソースコードに変更を加えることなく、コンポーネントをブランド・ロケール・検証要件に合わせることができます。
Prop種類説明
schemaSsoProviderSchemaフィールド検証ルール。詳細
customMessagesPartial<SsoProviderCreateMessages>i18nテキストのオーバーライド。詳細
stylingComponentStyling<SsoProviderCreateClasses>CSS変数とクラスのオーバーライド。詳細

​
schema

プロバイダーフィールド用のカスタム検証ルールを設定します。ルールは、プロバイダーストラテジー別に整理されます（使用される認証プロトコルは、oidc、samlp、waad、google-apps、adfs、pingfederate、oktaなど）。すべてのフィールドがregex、errorMessage、minLength、maxLength、requiredをサポートします。
プロバイダーの詳細
  • 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
<SsoProviderCreate
  createAction={{}}
  schema={{
    name: {
      minLength: 3,
      maxLength: 50,
      regex: /^[a-zA-Z0-9-_]+$/,
      errorMessage: "名前には英数字、ハイフン、アンダースコア以外使用できません。",
    },
    displayName: {
      required: true,
      maxLength: 100,
    },
  }}
/>

​
customMessages

すべてのテキストと翻訳をカスタマイズします。フィールドはすべて任意で、入力しなかった場合はデフォルト値が使用されます。
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
<SsoProviderCreate
  createAction={{}}
  customMessages={{
    header: {
      title: "新しいSSOプロバイダーを追加",
      back_button_text: "キャンセル",
    },
    provider_details: {
      title: "プロバイダー情報",
      fields: {
        name: {
          label: "接続名",
          helper_text: "この接続の内部識別子",
        },
      },
    },
    notifications: {
      provider_create_success: "SSOプロバイダーが正常に作成されました",
    },
  }}
/>

​
styling

CSS変数とクラスのオーバーライドを使って外観をカスタマイズします。テーマ認識型のスタイルをサポートします。
Variables - CSSカスタムプロパティ
  • common - すべてのテーマに適用
  • light - ライトテーマのみ
  • dark - ダークテーマのみ
Classes - コンポーネントクラスのオーバーライド
  • SsoProviderCreate-header
  • SsoProviderCreate-wizard
  • ProviderSelect-root
  • ProviderDetails-root
  • ProviderConfigure-root
<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",
    },
  }}
/>

​
高度なカスタマイズ

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

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

高度なユースケースの場合は、個々のサブコンポーネントをインポートしてカスタムのSSOプロバイダー作成ワークフローを構築できます。これは、1つのステップを異なるUIに埋め込む必要がある場合や、propsで可能な範囲を超えてウィザードフローをカスタマイズする必要がある場合に便利です。
コンポーネント説明
ProviderSelectプロバイダーアイコンを使ったストラテジー選択ステップ
ProviderDetails名前と表示名の構成ステップ
ProviderConfigureストラテジー固有の構成ステップ
ProviderConfigureFieldsストラテジーに基づく動的フォームフィールド
OktaProviderFormOkta固有の構成フォーム
AdfsProviderFormADFS固有の構成フォーム
GoogleAppsProviderFormGoogle Workspace固有の構成フォーム
OidcProviderFormOIDC固有の構成フォーム
PingFederateProviderFormPingFederate固有の構成フォーム
SamlpProviderFormSAML固有の構成フォーム
WaadProviderFormAzure AD固有の構成フォーム
WizardマルチステップウィザードのUI

​
利用可能なフック

これらのフックは、UIなしで基盤となるロジックを提供します。フックを使用することで、Auth0 API統合を活用しながら、完全にカスタムのインターフェイスを構築できます。
フック説明
useSsoProviderCreateプロバイダー作成ロジックとAPIの統合