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

​
セットアップの要件

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

​
インストール

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

​
クイックスタート

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

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

return (

<SsoProviderEdit
providerId={providerId}
backButton={{
        onClick: () => navigate("/providers"),
      }}
sso={{
        updateAction: {
          onAfter: () => console.log("Provider updated"),
        },
      }}
/>
);
}
この例ではReact SPAを使用していますが、props構成（schema、customMessages、stylingなど）はNext.jsやshadcnのセットアップにも同様に適用されます。
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("プロバイダー設定が保存されました");
            },
          },
          deleteAction: {
            onBefore: (provider) => {
              return confirm(
                `"${provider.display_name}"を削除しますか？この操作は元に戻せません。`,
              );
            },
            onAfter: () => {
              toast.success("プロバイダーが削除されました");
              navigate("/providers");
            },
          },
        }}
        provisioning={{
          createAction: {
            onAfter: () => toast.success("SCIMプロビジョニングが有効化されました"),
          },
          createScimTokenAction: {
            onAfter: () =>
              toast.info("SCIMトークンをコピーします。トークンは再度表示されません"),
          },
        }}
        domains={{
          verifyAction: {
            onAfter: (domain) => {
              toast.success(`${domain.domain}が検証されました`);
            },
          },
          deleteAction: {
            onBefore: (domain) => confirm(`${domain.domain}を削除しますか？`),
          },
        }}
        customMessages={{
          tabs: {
            sso: "構成",
            provisioning: "ユーザー同期（SCIM）",
            domains: "リンクされたドメイン",
          },
        }}
        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>
        <EditProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​
Props

​
Core Props

Core propsは、コンポーネントの操作の基礎です。SsoProviderEditで正しいプロバイダーを読み込み、編集するには、プロバイダーIDが必要です。
Prop種類説明
providerIdstring必須。 編集するSSOプロバイダーのID。

​
Display Props

Display propsは、コンポーネントのレンダリングを制御します。その動作に影響することはありません。
Prop種類説明
hideHeaderbooleanヘッダーセクションを非表示にします。デフォルト値：false

​
Action Props

3つのタブでのユーザーインタラクションは、それぞれのタブ名（「SSO」・「プロビジョニング」・「ドメイン」）の下で整理された複数のaction propsによって処理されます。
Prop種類説明
backButtonObject［戻る］ボタンの構成。詳細
ssoSsoProviderTabEditProps［SSO］タブのアクション。詳細
provisioningSsoProvisioningTabEditProps［プロビジョニング］タブのアクション。詳細
domainsSsoDomainsTabEditProps［ドメイン］タブのアクション。詳細

​
backButton

種類： { icon?: LucideIcon; onClick: (e: MouseEvent) => void } コンポーネントヘッダー内の［戻る］ボタンを構成します。これを使ってプロバイダーリストに戻ります。 プロパティ：
  • icon - Lucide iconのカスタムコンポーネント（任意、デフォルト値はArrowLeft）
  • onClick - ナビゲーション用クリックハンドラー
例： 
import { ChevronLeft } from "lucide-react";

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

​
［SSO］タブのアクション

sso propは、［SSO］設定タブのアクションを構成します。このタブは、プロバイダーの認証構成を管理します。
アクション種類説明
updateActionComponentAction<IdentityProvider, IdentityProvider>プロバイダーの設定を更新します。詳細
deleteActionComponentAction<IdentityProvider>プロバイダーを完全に削除します。詳細
removeFromOrganizationActionComponentAction<IdentityProvider>Organizationから削除します。詳細

​
sso.updateAction

種類： ComponentAction<IdentityProvider, IdentityProvider> プロバイダー構成への変更の保存を制御します（クライアントID、シークレット、証明書など）。 プロパティ：
  • disabled - ［保存］ボタンを無効にします
  • onBefore(provider) - 更新の前に実行します。保存を防ぐ場合はfalseを返します（確認のダイアログを表示する場合など）。
  • onAfter(provider, result) - プロバイダーが更新された後に実行します。通知を表示する場合、またはイベントを追跡する場合に使用します。
例： 
<SsoProviderEdit
  providerId={providerId}
  sso={{
    updateAction: {
      onBefore: (provider) => {
        return confirm("プロバイダー構成への変更を保存しますか？");
      },
      onAfter: (provider) => {
        toast.success("プロバイダー構成が保存されました");
        analytics.track("Provider Updated", { name: provider.name });
      },
    },
  }}
/>

​
sso.deleteAction

種類： ComponentAction<IdentityProvider> Auth0テナントからプロバイダーを完全に削除する操作を制御します。 例： 
sso={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(`"${provider.display_name}"を完全に削除しますか？この操作は元に戻せません。`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

​
sso.removeFromOrganizationAction

種類： ComponentAction<IdentityProvider> プロバイダーを削除せずに、Organizationから除外する操作を制御します。プロバイダーは、後でまた追加できます。 例： 
sso={{
  removeFromOrganizationAction: {
    onBefore: (provider) => {
      return confirm(`"${provider.display_name}"をこのOrganizationから除外しますか？`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

​
［プロビジョニング］タブのアクション

provisioning propは、SCIMの［プロビジョニング］タブのアクションを構成します。このタブは、SCIMプロトコルを介した自動のユーザープロビジョニングを管理します。
アクション種類説明
createActionComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>SCIMプロビジョニングを有効にします。詳細
deleteActionComponentAction<IdentityProvider>SCIMプロビジョニングを無効にします。詳細
createScimTokenActionComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>SCIMトークンを生成します。詳細
deleteScimTokenActionComponentAction<IdentityProvider>SCIMトークンを取り消します。詳細

​
provisioning.createAction

種類： ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent> プロバイダーのSCIMプロビジョニングを有効にします。有効にすると、アイデンティティプロバイダーが使用するSCIMトークンを生成できます。 例： 
provisioning={{
  createAction: {
    onBefore: (provider) => {
      return confirm("このプロバイダーのSCIMプロビジョニングを有効にしますか？");
    },
    onAfter: (provider, config) => {
      toast.success("SCIMプロビジョニングが有効化されました");
      console.log("SCIM endpoint:", config.scim_endpoint);
    },
  },
}}

​
provisioning.deleteAction

種類： ComponentAction<IdentityProvider> SCIMプロビジョニングを無効にし、そのアイデンティティプロバイダーのプロビジョニング構成をすべて削除します。 例： 
provisioning={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm("SCIMプロビジョニングを無効にしますか？これにより、自動のユーザー同期が停止されます。");
    },
    onAfter: () => toast.success("SCIMプロビジョニングが無効化されました "),
  },
}}

​
provisioning.createScimTokenAction

種類： ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent> アイデンティティプロバイダーのAuth0での認証用に、新しいSCIMベアラートークンを生成します。 例： 
provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // Token is shown once - user should copy it immediately
      console.log("New SCIM token generated");
    },
  },
}}

​
provisioning.deleteScimTokenAction

種類： ComponentAction<IdentityProvider> SCIMトークンを取り消します。アイデンティティプロバイダーは、新しいトークンが生成されるまでの間、ユーザーの同期ができなくなります。 例： 
provisioning={{
  deleteScimTokenAction: {
    onBefore: () => {
      return confirm("SCIMトークンを取り消しますか？アイデンティティプロバイダーはすぐにアクセスを失います。");
    },
  },
}}

​
［ドメイン］タブのアクション

domains propは、［ドメイン］タブのアクションを構成します。このタブは、自動ユーザールーティングのためにプロバイダーに関連付けられているドメインを管理します。
アクション種類説明
createActionComponentAction<Domain>ドメインを追加します。詳細
verifyActionComponentAction<Domain>ドメインの所有権を検証します。詳細
deleteActionComponentAction<Domain>ドメインを削除します。詳細
associateToProviderActionComponentAction<Domain, IdentityProvider | null>ドメインをプロバイダーに関連付けます。詳細
deleteFromProviderActionComponentAction<Domain, IdentityProvider | null>ドメインをプロバイダーから削除します。詳細

​
domains.createAction

種類： ComponentAction<Domain> プロバイダー編集インターフェイス内から新しいドメインをOrganizationに追加する操作を制御します。 例： 
domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`ドメイン${domain.domain}が追加されました`);
    },
  },
}}

​
domains.verifyAction

種類： ComponentAction<Domain> DNS TXTレコードを介したドメイン検証を制御します。 例： 
domains={{
  verifyAction: {
    onBefore: (domain) => {
      return confirm(`${domain.domain}を検証しますか？DNSレコードが構成されていることを確認してください。`);
    },
    onAfter: (domain) => {
      toast.success(`${domain.domain}が正常に検証されました`);
    },
  },
}}

​
domains.deleteAction

種類： ComponentAction<Domain> ドメインの削除を制御します。 例： 
domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`${domain.domain}を削除しますか？`);
    },
  },
}}

​
domains.associateToProviderAction

種類： ComponentAction<Domain, IdentityProvider | null> 自動ユーザールーティングのために、このSSOプロバイダーに検証済みドメインを関連付けます。 例： 
domains={{
  associateToProviderAction: {
    onAfter: (domain, provider) => {
      console.log(`${domain.domain} now routes to ${provider?.name}`);
    },
  },
}}

​
domains.deleteFromProviderAction

種類： ComponentAction<Domain, IdentityProvider | null> ドメインとこのプロバイダーの関連付けを削除します。

​
Customization Props

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

​
schema

プロバイダーおよびドメインフィールド用にカスタム検証ルールを設定します。
すべてのスキーマフィールドがサポート：regex、errorMessage, minLength, maxLength, requiredprovider.* - ストラテジー別のプロバイダー構成フィールド
  • 共通：name, displayName
  • Strategy-specificフィールド（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: "有効なドメイン（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 - プロビジョニングタブ
  • 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
  • Domain-related notifications
<SsoProviderEdit
  providerId={providerId}
  customMessages={{
    header: {
      title: "プロバイダーを編集",
    },
    tabs: {
      sso: "設定",
      provisioning: "ユーザー同期",
      domains: "ドメイン",
    },
    sso_tab: {
      actions: {
        save_button_text: "変更を保存",
      },
    },
    notifications: {
      provider_update_success: "プロバイダーが正常に保存されました",
    },
  }}
/>

​
styling

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

​
利用可能なフック

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