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

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

SsoProviderCreateコンポーネントは、新しいシングルサインオンプロバイダーを追加するための統合インターフェースを提供します。

React

​

設定要件

Auth0 の設定が必要です—tenant で My Organization API が設定されていることを確認してください。設定ガイドを表示 →

​

インストール

pnpm

pnpm add @auth0/universal-components-react

どちらのコマンドでも、共有ユーティリティと Auth0 連携に必要な @auth0/universal-components-core の依存関係もインストールされます。

​

はじめに

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

統合例

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

Next.js

​

セットアップ要件

Auth0 Configuration が必要です—tenant で My Organization API が設定されていることを確認してください。設定ガイドを表示 →

​

インストール

npm（推奨）

npm install @auth0/universal-components-react

npm または pnpm コマンドを実行すると、共有ユーティリティおよび Auth0 連携用の @auth0/universal-components-core の依存関係がインストールされます。

​

はじめに

page.tsx

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

連携の完全な例

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;

shadcn

​

設定要件

Auth0 Configuration が必要です—tenant が My Organization API を使用するように設定されていることを確認してください。設定ガイドを表示 →

​

インストール

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/sso-provider-create.json

shadcn コマンドを実行すると、共有ユーティリティと Auth0 連携に必要な @auth0/universal-components-core 依存関係もインストールされます。

​

はじめに

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

完全な連携例

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

​

プロップス

​

必須プロップス

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

プロップ	型	説明
createAction	ComponentAction<…>	必須。作成後のフローを制御します。

createAction

型: ComponentAction<CreateIdentityProviderRequestContentPrivate, IdentityProvider>

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

プロパティ:

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

例:

// 作成後にプロバイダー一覧へ遷移する
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"),
}}

---

​

表示プロップ

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

プロップ	型	説明
readOnly	boolean	すべてのフォーム入力を無効にします。デフォルト: false
hideHeader	boolean	ヘッダーセクションを非表示にします。デフォルト: false

---

​

Action プロップ

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

プロップ	型	説明
backButton	Object	戻るボタンの設定。
onNext	Function	ステップ間の移動時に呼び出されるコールバック。
onPrevious	Function	ステップ間の移動時に呼び出されるコールバック。

backButton

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

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

プロパティ:

• icon—カスタム Lucide アイコンコンポーネント (省略可能。デフォルトは 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;
  }}
/>

---

​

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

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

プロップ	型	説明
schema	SsoProviderSchema	フィールドのバリデーションルール。
customMessages	Partial<SsoProviderCreateMessages>	i18n テキストの上書き。
styling	ComponentStyling<SsoProviderCreateClasses>	CSS 変数とクラスの上書き。

schema

プロバイダーのフィールドにカスタムバリデーションルールを設定します。ルールは、プロバイダーのstrategy (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: "Name must be alphanumeric with hyphens/underscores",
    },
    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: "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!",
    },
  }}
/>

---

styling

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

利用可能なスタイリングオプション

変数—CSS カスタムプロパティ

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

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

• 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 を使用している場合は、これらを個別に import して、カスタム SSO プロバイダー作成ワークフローを構築できます。

​

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

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

コンポーネント	説明
ProviderSelect	プロバイダーアイコン付きの strategy 選択ステップ
ProviderDetails	名前と表示名の設定ステップ
ProviderConfigure	strategy 固有の設定ステップ
ProviderConfigureFields	strategy に応じた動的なフォームフィールド
OktaProviderForm	Okta 固有の設定フォーム
AdfsProviderForm	ADFS 固有の設定フォーム
GoogleAppsProviderForm	Google Workspace 固有の設定フォーム
OidcProviderForm	OIDC 固有の設定フォーム
PingFederateProviderForm	PingFederate 固有の設定フォーム
SamlpProviderForm	SAML 固有の設定フォーム
WaadProviderForm	Azure AD 固有の設定フォーム
Wizard	複数ステップのウィザード UI

​

利用可能なフック

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

Hook	説明
useSsoProviderCreate	プロバイダー の作成ロジックと API 連携