メインコンテンツへスキップ
SsoProviderEdit コンポーネントは、シングルサインオンプロバイダーを編集するための統一インターフェイスを提供します。

​
セットアップ要件

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

​
インストール

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

​
はじめに

import { SsoProviderEdit } from "@auth0/universal-components-react/spa";
import { useNavigate, useParams } from "react-router-dom";

export function EditProviderPage() {
  const { providerId } = useParams();
  const navigate = useNavigate();

  return (
    <SsoProviderEdit
      providerId={providerId}
      backButton={{
        onClick: () => navigate("/providers"),
      }}
      sso={{
        updateAction: {
          onAfter: () => console.log("Provider updated"),
        },
      }}
    />
  );
}

import React from "react";
import { SsoProviderEdit } from "@auth0/universal-components-react/spa";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate, useParams } from "react-router-dom";
import { analytics } from "./lib/analytics";

function EditProviderPage() {
  const { providerId } = useParams();
  const navigate = useNavigate();

  return (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderEdit
        providerId={providerId}
        backButton={{
          onClick: () => navigate("/providers"),
        }}
        sso={{
          updateAction: {
            onAfter: (provider) => {
              analytics.track("Provider Updated", { name: provider.name });
              toast.success("Provider configuration saved");
            },
          },
          deleteAction: {
            onBefore: (provider) => {
              return confirm(
                `Delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
            onAfter: () => {
              toast.success("Provider deleted");
              navigate("/providers");
            },
          },
        }}
        provisioning={{
          createAction: {
            onAfter: () => toast.success("SCIM provisioning enabled"),
          },
          createScimTokenAction: {
            onAfter: () =>
              toast.info("Copy your SCIM token - it won't be shown again"),
          },
        }}
        domains={{
          verifyAction: {
            onAfter: (domain) => {
              toast.success(`${domain.domain} verified`);
            },
          },
          deleteAction: {
            onBefore: (domain) => confirm(`Delete ${domain.domain}?`),
          },
        }}
        customMessages={{
          tabs: {
            sso: "Configuration",
            provisioning: "User Sync (SCIM)",
            domains: "Linked Domains",
          },
        }}
        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}>
        <EditProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​
Props

​
必須プロパティ

必須プロパティはコンポーネントの動作に不可欠です。SsoProviderEdit は、正しいプロバイダーを読み込んで編集するためにプロバイダーIDが必要です。
プロパティ型説明
providerIdstring必須。 編集対象の SSO プロバイダー ID。

​
表示プロパティ

表示プロパティは、コンポーネントの動作に影響を与えずに、レンダリング方法を制御します。
プロパティ型説明
hideHeaderbooleanヘッダーを非表示にします。デフォルト: false

​
Action のプロパティ

3つのタブにおけるユーザー操作は、各タブの名前 (sso、provisioning、domains) の下に整理された複数のアクションプロパティによって処理されます。
プロパティ型説明
backButtonObject戻るボタンの設定。
ssoSsoProviderTabEditPropsSSOタブのアクション。詳細
provisioningSsoProvisioningTabEditPropsProvisioningタブのアクション。 詳細
domainsSsoDomainsTabEditPropsドメインタブのアクション。詳細
backButtonType: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }コンポーネントヘッダーの戻るボタンを設定します。プロバイダーリストに戻る際に使用します。プロパティ:
  • icon - Lucide のカスタムアイコンコンポーネント (省略可能。既定値は ArrowLeft)
  • onClick - ナビゲーションのクリックハンドラー
例：
import { ChevronLeft } from "lucide-react";

<SsoProviderEdit
  providerId={providerId}
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/providers"),
  }}
/>;

​
SSO タブの Actions

sso プロパティは、SSO 設定タブのアクションを設定します。このタブでは、プロバイダーの認証設定を管理します。
Action型説明
updateActionComponentAction<IdentityProvider, IdentityProvider>プロバイダーの設定を更新します。
deleteActionComponentAction<IdentityProvider>プロバイダーを完全に削除します。
removeFromOrganizationActionComponentAction<IdentityProvider>組織から削除します。
sso.updateActionType: ComponentAction<IdentityProvider, IdentityProvider>プロバイダー設定 (クライアントID、シークレット、証明書など) への変更の保存を制御します。プロパティ:
  • disabled - 保存ボタンを無効化します
  • onBefore(provider) - 更新前に実行されます。保存を行わないようにするには、false を返します (例: 確認ダイアログを表示する場合) 。
  • onAfter(provider, result) - プロバイダーの更新が正常に完了した後に実行されます。通知の表示やイベントの追跡に使用します。
例：
<SsoProviderEdit
  providerId={providerId}
  sso={{
    updateAction: {
      onBefore: (provider) => {
        return confirm("Save changes to provider configuration?");
      },
      onAfter: (provider) => {
        toast.success("Provider configuration saved");
        analytics.track("Provider Updated", { name: provider.name });
      },
    },
  }}
/>
sso.deleteActionType: ComponentAction<IdentityProvider>Auth0テナントからプロバイダーを完全に削除する操作を制御します。例：
sso={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
    },
    onAfter: () => navigate("/providers"),
  },
}}
sso.removeFromOrganizationActionType: ComponentAction<IdentityProvider>プロバイダーを完全に削除せずに組織から切り離す操作を制御します。プロバイダーは後で再追加できる状態で保持されます。例：
sso={{
  removeFromOrganizationAction: {
    onBefore: (provider) => {
      return confirm(`Remove "${provider.display_name}" from this organization?`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

​
「Provisioning」タブのActions

provisioning プロパティは、SCIMプロビジョニングタブのアクションを設定します。このタブでは、SCIMプロトコルを使用したユーザーの自動プロビジョニングを管理します。
アクション型説明
createActionComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>SCIMプロビジョニングを有効にします。
deleteActionComponentAction<IdentityProvider>SCIMプロビジョニングを無効にします。
createScimTokenActionComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>SCIMトークンを生成します。
deleteScimTokenActionComponentAction<IdentityProvider>SCIMトークンを失効させます。
provisioning.createActionType: ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>プロバイダーのSCIMプロビジョニングを有効にします。有効にすると、IDプロバイダーで使用するSCIMトークンを生成できます。例：
provisioning={{
  createAction: {
    onBefore: (provider) => {
      return confirm("Enable SCIM provisioning for this provider?");
    },
    onAfter: (provider, config) => {
      toast.success("SCIM provisioning enabled");
      console.log("SCIM endpoint:", config.scim_endpoint);
    },
  },
}}
provisioning.deleteActionType: ComponentAction<IdentityProvider>指定したIDプロバイダーのSCIMプロビジョニングを無効にし、すべてのプロビジョニング設定を削除します。例：
provisioning={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
    },
    onAfter: () => toast.success("SCIM provisioning disabled"),
  },
}}
provisioning.createScimTokenActionType: ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>IDプロバイダーがAuth0で認証するための新しいSCIM bearerトークンを生成します。例：
provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // トークンは一度しか表示されません - ユーザーはすぐにコピーする必要があります
      console.log("New SCIM token generated");
    },
  },
}}
provisioning.deleteScimTokenActionType: ComponentAction<IdentityProvider>SCIMトークンを失効させます。新しいトークンが生成されるまで、IDプロバイダーはユーザーを同期できなくなります。例：
provisioning={{
  deleteScimTokenAction: {
    onBefore: () => {
      return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
    },
  },
}}

​
ドメインタブの Actions

domains プロパティは、ドメインタブのActionsを設定します。このタブでは、ユーザーの自動ルーティングのためにプロバイダーに関連付けられたドメインを管理します。
Action型説明
createActionComponentAction<Domain>ドメインを追加します。
verifyActionComponentAction<Domain>ドメイン所有権を確認します。
deleteActionComponentAction<Domain>ドメインを削除します。
associateToProviderActionComponentAction<Domain, IdentityProvider | null>ドメインをプロバイダーに関連付けます。
deleteFromProviderActionComponentAction<Domain, IdentityProvider | null>プロバイダーからドメインの関連付けを解除します。
domains.createActionType: ComponentAction<Domain>プロバイダー編集インターフェースから組織への新しいドメインの追加を制御します。例：
domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`Domain ${domain.domain} added`);
    },
  },
}}
domains.verifyActionType: ComponentAction<Domain>DNS TXTレコードによるドメイン検証を制御します。例：
domains={{
  verifyAction: {
    onBefore: (domain) => {
      return confirm(`Verify ${domain.domain}? Ensure your DNS record is configured.`);
    },
    onAfter: (domain) => {
      toast.success(`${domain.domain} verified successfully`);
    },
  },
}}
domains.deleteActionType: ComponentAction<Domain>ドメインの削除を制御します。例：
domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`Delete ${domain.domain}?`);
    },
  },
}}
domains.associateToProviderActionType: ComponentAction<Domain, IdentityProvider | null>確認済みのドメインをこのSSOプロバイダーに関連付けて、ユーザーの自動ルーティングを有効にします。例：
domains={{
  associateToProviderAction: {
    onAfter: (domain, provider) => {
      console.log(`${domain.domain} now routes to ${provider?.name}`);
    },
  },
}}
domains.deleteFromProviderActionType: ComponentAction<Domain, IdentityProvider | null>このプロバイダーとのドメインの関連付けを削除します。

​
カスタマイズのプロパティ

カスタマイズ用プロパティを使用すると、ソースコードを変更せずに、ブランド、ロケール、検証要件に合わせてコンポーネントをカスタマイズできます。
プロパティ型説明
schemaSsoProviderEditSchemaフィールドの検証ルール。
customMessagesPartial<SsoProviderEditMessages>i18n テキストのオーバーライド。
stylingComponentStyling<SsoProviderEditClasses>CSS 変数とクラスのオーバーライド。
スキーマプロバイダーとドメインフィールドのカスタム検証ルールを設定します。
すべてのスキーマ フィールドで次をサポートしています: regex, errorMessage, minLength, maxLength, requiredprovider.* - 戦略別のプロバイダー設定フィールド
  • 共通: name, displayName
  • 戦略固有のフィールド (SsoProviderCreate と同じ)
domains.create.domainUrl - ドメイン URL の検証
<SsoProviderEdit
  providerId={providerId}
  schema={{
    provider: {
      displayName: {
        required: true,
        maxLength: 100,
      },
    },
    domains: {
      create: {
        domainUrl: {
          regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
          errorMessage: "Enter a valid domain (example.com)",
        },
      },
    },
  }}
/>
customMessagesすべてのテキストと翻訳をカスタマイズします。すべてのフィールドは省略可能で、指定しない場合はデフォルト値が使用されます。
header - コンポーネントのヘッダー
  • title, back_button_text
tabs - タブラベル
  • sso, provisioning, domains
sso_tab - SSO設定タブ
  • title, description
  • fields.* - 戦略ごとのフォームフィールドラベル
  • actions.save_button_text, actions.delete_button_text
  • delete_modal.*, remove_modal.*
provisioning_tab - Provisioningタブ
  • title, description
  • scim_endpoint.label, scim_token.label
  • actions.enable_button_text, actions.disable_button_text
  • actions.generate_token_button_text, actions.revoke_token_button_text
domains_tab - ドメインタブ
  • title, description
  • DomainTable のメッセージと同じ構造
notifications - APIレスポンス
  • provider_update_success, provider_delete_success
  • provisioning_enable_success, provisioning_disable_success
  • scim_token_create_success, scim_token_delete_success
  • ドメイン関連の通知
<SsoProviderEdit
  providerId={providerId}
  customMessages={{
    header: {
      title: "Edit Provider",
    },
    tabs: {
      sso: "Settings",
      provisioning: "User Sync",
      domains: "Domains",
    },
    sso_tab: {
      actions: {
        save_button_text: "Save Changes",
      },
    },
    notifications: {
      provider_update_success: "Provider saved successfully!",
    },
  }}
/>
スタイリングCSS変数とクラスのオーバーライドを使用して外観をカスタマイズします。テーマ対応のスタイリングをサポートします。
変数 - CSS カスタムプロパティ
  • common - すべてのテーマに適用
  • light - ライトテーマのみ
  • dark - ダークテーマのみ
クラス - コンポーネントクラスのオーバーライド
  • SsoProviderEdit-header
  • SsoProviderEdit-tabs
  • SsoProviderEdit-ssoTab
  • SsoProviderEdit-provisioningTab
  • SsoProviderEdit-domainsTab
<SsoProviderEdit
  providerId={providerId}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderEdit-tabs": "border-b border-gray-200",
    },
  }}
/>

​
高度なカスタマイズ

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

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

高度なユースケースでは、個別のサブコンポーネントをインポートして、特定のタブやセクションをさまざまなコンテキストに埋め込むことができます。
コンポーネント説明
SsoProviderSsoTabSSO 設定フォーム
SsoProviderProvisioningTabSCIMプロビジョニングの管理
SsoProviderDomainsTabドメイン関連付けの管理
ProviderConfigureFields戦略に応じた動的フォームフィールド
ScimTokenDisplayコピー機能付きのSCIMトークン表示

​
利用可能なHooks

これらのフックはUIを持たず、基盤となるロジックのみを提供します。Auth0 APIとの統合を活用しながら、完全にカスタムなインターフェースを構築できます。
フック説明
useSsoProviderEditプロバイダーの読み込みと更新のロジック
useSsoProviderProvisioningSCIM プロビジョニングの管理
useSsoProviderDomainsドメインの関連付けの管理