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

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

サードパーティアプリケーションによるアクセスとCross App Access

これらのコントロールは、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 設定という、サードパーティアクセスに関する両方の制御をバイパスします。

React
Next.js
shadcn

設定要件

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

インストール

pnpm add @auth0/universal-components-react

npm install @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>
        <CreateSsoProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

セットアップ要件

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

インストール

npm install @auth0/universal-components-react

pnpm add @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;

設定要件

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

インストール

GitHub Registry を使用して、shadcn CLI 経由でコンポーネントをインストールします：

npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/sso-provider-create

shadcn CLI は、共有ユーティリティと Auth0 連携に必要な @auth0/universal-components-core 依存関係もインストールします。 shadcn CLI v2.5.0+ が必要です。

はじめに

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

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のフィールド
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

<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 に対応したスタイリングをサポートします。

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

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

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

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

SsoProviderCreate-header
SsoProviderCreate-wizard
ProviderSelect-root
ProviderDetails-root
ProviderConfigure-root
ProviderConfigure-ThirdPartyAccess
ProviderConfigure-CrossAppAccess

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

高度なカスタマイズ

利用可能なフック

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

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

Web Components

iOS Components

Android Components

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

サードパーティアプリケーションによるアクセスとCross App Access

設定要件

インストール

はじめに

セットアップ要件

インストール

はじめに

設定要件

インストール

はじめに

プロップス

必須プロップス

表示プロップ

Action プロップ

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

高度なカスタマイズ

利用可能なフック

​サードパーティアプリケーションによるアクセスとCross App Access

​設定要件

​インストール

​はじめに

​セットアップ要件

​インストール

​はじめに

​設定要件

​インストール

​はじめに

​プロップス

​必須プロップス

​表示プロップ

​Action プロップ

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

​高度なカスタマイズ

​利用可能なフック

サードパーティアプリケーションによるアクセスとCross App Access

設定要件

インストール

はじめに

セットアップ要件

インストール

はじめに

設定要件

インストール

はじめに

プロップス

必須プロップス

表示プロップ

Action プロップ

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

高度なカスタマイズ

利用可能なフック