SSOプロバイダーの作成

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

React
Next.js
shadcn

セットアップ要件

Auth0 の設定が必要です - テナントで My Organization API が有効になっていることを確認してください。セットアップガイドを表示 →

インストール

pnpm add @auth0/universal-components-react

いずれかのコマンドを実行すると、共有ユーティリティと Auth0 統合に必要な @auth0/universal-components-core 依存パッケージもインストールされます。

はじめに

import { SsoProviderCreate } from "@auth0/universal-components-react/spa";
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/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 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>
  );
}

セットアップ要件

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

インストール

npm install @auth0/universal-components-react

npm または pnpm コマンドを実行すると、共有ユーティリティと Auth0 統合に必要な依存パッケージ @auth0/universal-components-core もインストールされます。

はじめに

page.tsx

import { SsoProviderCreate } from "@auth0/universal-components-react/rwa";
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/rwa";
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;

セットアップ要件

Auth0 の設定が必要です - テナントで 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>
  );
}

Props

必須 Props

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

Prop	型	説明
`createAction`	`ComponentAction<…>`	必須。作成後の動作を制御します。

createAction 型: ComponentAction<CreateIdentityProviderRequestContentPrivate, IdentityProvider> createAction prop は、プロバイダーの作成が正常に完了した後にユーザーをどこへ遷移させるかを制御するため、必須です。これがないと、コンポーネントは次に何をすべきか判断できません。 プロパティ:

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

表示Props

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

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

Action Props

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

Prop	Type	説明
`backButton`	`Object`	戻るボタンの設定。
`onNext`	`Function`	ステップ遷移用のコールバック。
`onPrevious`	`Function`	ステップ遷移用のコールバック。

backButton Type: { 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 ウィザードのステップ間の移動を制御します。これらのコールバックは、ユーザーが［Next］または［Previous］をクリックしたときに呼び出されます。移動を無効にするには 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;
  }}
/>

カスタマイズ用Props

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

プロパティ	型	説明
`schema`	`SsoProviderSchema`	フィールドのバリデーションルール。
`customMessages`	`Partial<SsoProviderCreateMessages>`	i18n テキストのオーバーライド。
`styling`	`ComponentStyling<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: "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!",
    },
  }}
/>

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

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

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

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

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

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 プロバイダー作成ワークフローを構築できます。これは、別の UI に単一のステップを埋め込む必要がある場合や、props で対応できる範囲を超えてウィザードのフローをカスタマイズしたい場合に便利です。

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

利用可能な Hooks

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

Hook	説明
`useSsoProviderCreate`	プロバイダーの作成ロジックと API 統合

​セットアップ要件

​インストール

​はじめに

​セットアップ要件

​インストール

​はじめに

​セットアップ要件

​インストール

​はじめに

​Props

​必須 Props

​表示Props

​Action Props

​カスタマイズ用Props

​高度なカスタマイズ

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

​利用可能な Hooks

セットアップ要件

インストール

はじめに

セットアップ要件

インストール

はじめに

セットアップ要件

インストール

はじめに

Props

必須 Props

表示Props

Action Props

カスタマイズ用Props

高度なカスタマイズ

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

利用可能な Hooks