Web で SSO プロバイダーを編集

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

React
Next.js
shadcn

設定要件

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

インストール

pnpm add @auth0/universal-components-react

npm install @auth0/universal-components-react

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

はじめに

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

プロップス

必須プロップス

必須プロップスは、コンポーネントの動作に不可欠です。SsoProviderEdit では、対象のProviderを読み込んで編集するために、Provider IDが必要です。

プロパティ	型	説明
`providerId`	`string`	必須。編集するSSO ProviderのID。

プロップスの表示

表示用プロップスは、コンポーネントの動作に影響を与えることなく、レンダリング方法を制御します。

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

Action のプロップス

3つのタブにおけるユーザー操作は、各タブ名 (sso、provisioning、domains) の下に整理された複数のアクションプロップスで処理されます。

プロップス	型	説明
`backButton`	`Object`	戻るボタンの設定。
`sso`	`SsoProviderTabEditProps`	SSOタブのアクション。詳細
`provisioning`	`SsoProvisioningTabEditProps`	プロビジョニングタブのアクション。詳細
`domains`	`SsoDomainsTabEditProps`	ドメインタブのアクション。詳細

backButton型: { 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 タブのアクション

sso プロパティは、SSO 設定タブのアクションを設定します。このタブでは、プロバイダーの認証設定を管理します。

Action	タイプ	説明
`updateAction`	`ComponentAction<IdentityProvider, IdentityProvider>`	プロバイダーの設定を更新します。
`deleteAction`	`ComponentAction<IdentityProvider>`	プロバイダーを完全に削除します。
`removeFromOrganizationAction`	`ComponentAction<IdentityProvider>`	組織から削除します。

sso.updateAction型: ComponentAction<IdentityProvider, IdentityProvider>プロバイダー設定 (クライアントID、シークレット、証明書など) の変更を保存するかどうかを制御します。プロパティ:

disabled—保存ボタンを無効にします
onBefore(provider)—更新前に実行されます。保存を中止するには false を返します (たとえば、確認ダイアログを表示する場合) 。
onAfter(provider, result)—Provider が正常に更新された後に実行されます。通知の表示やイベントの追跡に使用します。

例：

<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.deleteAction型: ComponentAction<IdentityProvider>Auth0 テナントからプロバイダーを完全に削除するかどうかを制御します。例：

sso={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

sso.removeFromOrganizationAction型: ComponentAction<IdentityProvider>プロバイダーを削除することなく organization から解除する動作を制御します。プロバイダーはそのまま残るため、後から再度追加できます。例：

sso={{
  removeFromOrganizationAction: {
    onBefore: (provider) => {
      return confirm(`Remove "${provider.display_name}" from this organization?`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

[プロビジョニング]タブの操作

provisioning プロパティは、SCIM provisioning タブのアクションを設定します。このタブでは、SCIM プロトコルを介したユーザーの自動プロビジョニングを管理します。

Action	種類	説明
`createAction`	`ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>`	SCIM プロビジョニングを有効化します。
`deleteAction`	`ComponentAction<IdentityProvider>`	SCIM プロビジョニングを無効化します。
`createScimTokenAction`	`ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>`	SCIM トークンを生成します。
`deleteScimTokenAction`	`ComponentAction<IdentityProvider>`	SCIM トークンを取り消します。

provisioning.createAction型: ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>プロバイダーのSCIMプロビジョニングを有効にします。有効にすると、アイデンティティプロバイダーで使用する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.deleteAction型: ComponentAction<IdentityProvider>SCIMプロビジョニングを無効にし、そのアイデンティティプロバイダーのすべてのプロビジョニング設定を削除します。例：

provisioning={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
    },
    onAfter: () => toast.success("SCIM provisioning disabled"),
  },
}}

provisioning.createScimTokenAction型: ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>アイデンティティプロバイダーがAuth0で認証を行うための新しいSCIMベアラートークンを生成します。例:

provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // トークンは一度しか表示されないため、すぐにコピーしてください
      console.log("New SCIM token generated");
    },
  },
}}

provisioning.deleteScimTokenAction型: ComponentAction<IdentityProvider>SCIM トークンを取り消します。新しいトークンが生成されるまで、アイデンティティプロバイダーはユーザーを同期できなくなります。例:

provisioning={{
  deleteScimTokenAction: {
    onBefore: () => {
      return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
    },
  },
}}

ドメインタブの操作

domains プロパティは、ドメインタブの操作を設定します。このタブでは、自動ユーザールーティングのためにプロバイダーに関連付けられたドメインを管理します。

Action	種類	説明
`createAction`	`ComponentAction<Domain>`	ドメインを追加します。
`verifyAction`	`ComponentAction<Domain>`	ドメインの所有権を確認します。
`deleteAction`	`ComponentAction<Domain>`	ドメインを削除します。
`associateToProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	ドメインをProviderに関連付けます。
`deleteFromProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	Providerからドメインの関連付けを解除します。

domains.createAction型: ComponentAction<Domain>プロバイダーの編集画面から組織に新しいドメインを追加できるようにします。例：

domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`Domain ${domain.domain} added`);
    },
  },
}}

domains.verifyAction型: 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.deleteAction型： ComponentAction<Domain>ドメインの削除を制御します。例：

domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`Delete ${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>このプロバイダーからドメインの関連付けを解除します。

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

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

プロパティ	型	説明
`schema`	`SsoProviderEditSchema`	フィールドのバリデーションルール。
`customMessages`	`Partial<SsoProviderEditMessages>`	i18n テキストの上書き。
`styling`	`ComponentStyling<SsoProviderEditClasses>`	CSS 変数およびクラスの上書き。

スキーマプロバイダーとドメインのフィールドにカスタムのバリデーションルールを設定します。

利用可能なスキーマフィールド

すべてのschemaフィールドでサポートされる項目: regex、errorMessage、minLength、maxLength、requiredprovider.*—strategyごとのProvider設定フィールド

共通: name、displayName
strategy固有のフィールド (SsoProviderCreateと同じ)

domains.create.domainUrl—Domain 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.*—strategyごとのFormフィールドラベル
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—Domainsタブ

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 を使用している場合は、これらを個別にインポートして、カスタムプロバイダーを編集するためのワークフローを構築できます。

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

高度なユースケースでは、個別のサブコンポーネントをインポートして、特定のタブやセクションをさまざまなコンテキストに組み込むことができます。

コンポーネント	説明
`SsoProviderSsoTab`	SSO 設定フォーム
`SsoProviderProvisioningTab`	SCIM プロビジョニング管理
`SsoProviderDomainsTab`	ドメインの関連付け管理
`ProviderConfigureFields`	strategy ごとの動的フォームフィールド
`ScimTokenDisplay`	コピー機能付きの SCIM トークン表示

利用可能なフック

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

Hook	説明
`useSsoProviderEdit`	Providerの読み込みと更新処理
`useSsoProviderProvisioning`	SCIMプロビジョニングの管理
`useSsoProviderDomains`	ドメインの関連付け管理

設定要件

Auth0 Configuration が必要です—テナントが 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 { SsoProviderEdit } from "@auth0/universal-components-react";
import { useRouter } from "next/navigation";

export function EditProviderPage({ providerId }) {
  const router = useRouter();

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

連携の完全な例

import React from "react";
import { SsoProviderEdit } from "@auth0/universal-components-react";
import { useRouter, useSearchParams } from "next/navigation";
import { analytics } from "./lib/analytics";

function EditProviderPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const providerId = searchParams.get("id");

  return (
    <div className="max-w-4xl mx-auto p-6">
      <SsoProviderEdit
        providerId={providerId}
        backButton={{
          onClick: () => router.push("/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");
              router.push("/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 EditProviderPage;

プロップス

主要なプロップス

コアプロップスは、コンポーネントの動作に不可欠です。SsoProviderEdit で正しいプロバイダーを読み込み、編集するには、プロバイダーIDが必要です。

プロパティ	型	説明
`providerId`	`string`	必須。編集するSSO ProviderのID。

表示プロップス

表示用プロップスは、コンポーネントの動作に影響を与えることなく、レンダリング方法を制御します。

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

Action のプロップス

3つのタブでのユーザー操作は、それぞれのタブ名 (sso、provisioning、domains) の下にまとめられた複数のアクションプロップスによって処理されます。

プロップス	型	説明
`backButton`	`Object`	戻るボタンの設定。
`sso`	`SsoProviderTabEditProps`	SSO タブのアクション。詳細
`provisioning`	`SsoProvisioningTabEditProps`	プロビジョニングタブのアクション。詳細
`domains`	`SsoDomainsTabEditProps`	ドメインタブのアクション。詳細

戻るボタン型: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }コンポーネントヘッダーの戻るボタンを設定します。このボタンを使用して、プロバイダーの一覧に戻ります。プロパティ:

icon—カスタム Lucide アイコンコンポーネント (省略可。デフォルトは ArrowLeft)
onClick—ナビゲーション用のクリックハンドラー

例：

import { ChevronLeft } from "lucide-react";

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

SSO タブのアクション

sso プロパティでは、SSO 設定タブのアクションを設定します。このタブでは、プロバイダーの認証設定を管理します。

Action	タイプ	説明
`updateAction`	`ComponentAction<IdentityProvider, IdentityProvider>`	Provider の設定を更新します。
`deleteAction`	`ComponentAction<IdentityProvider>`	Provider を完全に削除します。
`removeFromOrganizationAction`	`ComponentAction<IdentityProvider>`	organization から削除します。

disabled—保存ボタンを無効にします
onBefore(provider)—更新前に実行されます。false を返すと保存を中止できます (確認ダイアログを表示する場合など) 。
onAfter(provider, result)—Provider が正常に更新された後に実行されます。通知の表示やイベントの追跡に使用します。

例：

<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.deleteAction型: ComponentAction<IdentityProvider>Auth0 テナントからプロバイダーを完全に削除するかどうかを指定します。例:

sso={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
    },
    onAfter: () => router.push("/providers"),
  },
}}

sso.removeFromOrganizationAction型: ComponentAction<IdentityProvider>プロバイダーを削除せずにorganizationから削除する操作を制御します。プロバイダーは後で再度追加できます。例：

sso={{
  removeFromOrganizationAction: {
    onBefore: (provider) => {
      return confirm(`Remove "${provider.display_name}" from this organization?`);
    },
    onAfter: () => router.push("/providers"),
  },
}}

プロビジョニングタブの操作

provisioningプロパティは、SCIMプロビジョニングタブの操作を設定します。このタブでは、SCIMプロトコルによるユーザーの自動プロビジョニングを管理します。

Action	種類	説明
`createAction`	`ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>`	SCIM プロビジョニングを有効化します。
`deleteAction`	`ComponentAction<IdentityProvider>`	SCIM プロビジョニングを無効化します。
`createScimTokenAction`	`ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>`	SCIM トークンを生成します。
`deleteScimTokenAction`	`ComponentAction<IdentityProvider>`	SCIM トークンを取り消します。

provisioning.createAction型: 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.deleteAction型: ComponentAction<IdentityProvider>SCIMプロビジョニングを無効にし、そのアイデンティティプロバイダーのプロビジョニング設定をすべて削除します。例：

provisioning={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
    },
    onAfter: () => toast.success("SCIM provisioning disabled"),
  },
}}

provisioning.createScimTokenAction型: ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>アイデンティティプロバイダーがAuth0で認証するための新しいSCIMベアラートークンを生成します。例：

provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // トークンは一度しか表示されないため、すぐにコピーしてください
      console.log("New SCIM token generated");
    },
  },
}}

provisioning.deleteScimTokenAction型: ComponentAction<IdentityProvider>SCIM トークンを取り消します。新しいトークンを生成するまで、アイデンティティプロバイダーはユーザーを同期できなくなります。例：

provisioning={{
  deleteScimTokenAction: {
    onBefore: () => {
      return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
    },
  },
}}

Domainsタブの操作

domains プロパティでは、ドメインタブのアクションを設定します。このタブでは、ユーザーの自動ルーティングのためにプロバイダーに関連付けられたドメインを管理します。

Action	種類	説明
`createAction`	`ComponentAction<Domain>`	ドメインを追加します。
`verifyAction`	`ComponentAction<Domain>`	ドメインの所有権を確認します。
`deleteAction`	`ComponentAction<Domain>`	ドメインを削除します。
`associateToProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	ドメインをプロバイダーに関連付けます。
`deleteFromProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	プロバイダーからドメインを削除します。

domains.createAction型: ComponentAction<Domain>プロバイダー編集画面から組織に新しいドメインを追加できるかどうかを制御します。例：

domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`Domain ${domain.domain} added`);
    },
  },
}}

domains.verifyAction型: 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.deleteAction型: ComponentAction<Domain>ドメインの削除を制御します。例：

domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`Delete ${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>ドメインとこのプロバイダーの関連付けを解除します。

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

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

プロパティ	型	説明
`schema`	`SsoProviderEditSchema`	フィールドのバリデーションルール。
`customMessages`	`Partial<SsoProviderEditMessages>`	i18n テキストの上書き。
`styling`	`ComponentStyling<SsoProviderEditClasses>`	CSS 変数およびクラスの上書き。

スキーマプロバイダーおよびドメインのフィールドにカスタムバリデーションルールを設定します。

利用可能なスキーマのフィールド

すべてのschemaフィールドでサポート: regex, errorMessage, minLength, maxLength, requiredprovider.*—strategy別のProvider設定フィールド

共通: name, displayName
strategy固有のフィールド (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すべてのテキストと翻訳をカスタマイズできます。すべてのフィールドは任意で、指定しない場合はデフォルト値が使用されます。

利用可能なメッセージ

ヘッダー—コンポーネントのヘッダー

title, back_button_text

タブ—タブのラベル

sso, provisioning, domains

sso_tab—SSO設定タブ

title, description
fields.*—strategy ごとのフォームフィールドラベル
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メッセージと同じ構造

通知—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 コンポーネントは、より小さなサブコンポーネントとフックで構成されています。これらを個別にインポートして、独自のプロバイダー編集ワークフローを構築できます。

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

高度なユースケースでは、個別のサブコンポーネントをインポートして、さまざまなコンテキストに特定のタブやセクションを組み込むことができます。

コンポーネント	説明
`SsoProviderSsoTab`	SSO 設定フォーム
`SsoProviderProvisioningTab`	SCIM プロビジョニング管理
`SsoProviderDomainsTab`	ドメインの関連付け管理
`ProviderConfigureFields`	strategy ごとの動的フォームフィールド
`ScimTokenDisplay`	コピー機能付き SCIM トークン表示

利用可能なHooks

これらのフックは、UIを含まない基盤ロジックのみを提供します。Auth0 APIとの連携を活用しつつ、完全に独自のインターフェイスを構築する際にご利用ください。

Hook	説明
`useSsoProviderEdit`	Providerの読み込みと更新処理
`useSsoProviderProvisioning`	SCIMプロビジョニングの管理
`useSsoProviderDomains`	ドメインの関連付け管理

設定要件

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

インストール

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

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

はじめに

import { SsoProviderEdit } from "@/components/auth0/my-organization/sso-provider-edit";

export function EditProviderPage({ providerId }) {
  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 "@/components/auth0/my-organization/sso-provider-edit";
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>
  );
}

プロップス

主要なプロップス

コアプロップスは、コンポーネントの動作に不可欠なものです。SsoProviderEdit では、正しい Provider を読み込んで編集するために provider ID が必要です。

プロパティ	型	説明
`providerId`	`string`	必須。編集するSSOプロバイダーのID。

表示プロパティ

表示用プロップスは、コンポーネントの動作に影響を与えることなく、レンダリング方法を制御します。

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

Action のプロップス

3つのタブにおけるユーザー操作は、各タブ名 (sso、provisioning、domains) ごとにまとめられた複数のアクションプロップスによって処理されます。

プロップス	型	説明
`backButton`	`Object`	戻るボタンの設定。
`sso`	`SsoProviderTabEditProps`	SSOタブのアクション。詳細
`provisioning`	`SsoProvisioningTabEditProps`	Provisioningタブのアクション。詳細
`domains`	`SsoDomainsTabEditProps`	ドメインタブのアクション。詳細

backButton型: { 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タブのアクション

sso プロパティでは、SSO 設定タブのアクションを設定します。このタブでプロバイダーの認証設定を管理します。

Action	タイプ	説明
`updateAction`	`ComponentAction<IdentityProvider, IdentityProvider>`	プロバイダーの設定を更新します。
`deleteAction`	`ComponentAction<IdentityProvider>`	プロバイダーを完全に削除します。
`removeFromOrganizationAction`	`ComponentAction<IdentityProvider>`	organization から削除します。

sso.updateAction型: ComponentAction<IdentityProvider, IdentityProvider>プロバイダー設定 (クライアントID、シークレット、証明書など) に対する変更の保存を制御します。プロパティ：

disabled—保存ボタンを無効にします
onBefore(provider)—更新前に実行されます。保存を中止するには (確認ダイアログを表示する場合など) 、false を返します。
onAfter(provider, result)—Provider が正常に更新された後に実行されます。通知の表示やイベントの追跡に使用します。

例：

<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.deleteAction型: ComponentAction<IdentityProvider>Auth0 テナントからプロバイダーを完全に削除するかどうかを指定します。例：

sso={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

sso.removeFromOrganizationAction型: ComponentAction<IdentityProvider>プロバイダーを削除せずに組織から削除するかどうかを制御します。プロバイダーは後で再度追加できます。例：

sso={{
  removeFromOrganizationAction: {
    onBefore: (provider) => {
      return confirm(`Remove "${provider.display_name}" from this organization?`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

プロビジョニングタブの操作

provisioning プロパティは、SCIMプロビジョニングタブのアクションを設定します。このタブでは、SCIMプロトコルによるユーザーの自動プロビジョニングを管理します。

Action	型	説明
`createAction`	`ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>`	SCIM プロビジョニングを有効化します。
`deleteAction`	`ComponentAction<IdentityProvider>`	SCIM プロビジョニングを無効化します。
`createScimTokenAction`	`ComponentAction<IdentityProvider, CreateIdpProvisioningScimTokenResponseContent>`	SCIM トークンを生成します。
`deleteScimTokenAction`	`ComponentAction<IdentityProvider>`	SCIM トークンを取り消します。

provisioning.createAction型: ComponentAction<IdentityProvider, CreateIdPProvisioningConfigResponseContent>プロバイダーの SCIM プロビジョニングを有効にします。有効にすると、アイデンティティプロバイダーで使用する 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.deleteAction型: ComponentAction<IdentityProvider>SCIMプロビジョニングを無効にし、そのアイデンティティプロバイダーに関するすべてのプロビジョニング設定を削除します。例：

provisioning={{
  deleteAction: {
    onBefore: (provider) => {
      return confirm("Disable SCIM provisioning? This will stop automatic user sync.");
    },
    onAfter: () => toast.success("SCIM provisioning disabled"),
  },
}}

provisioning={{
  createScimTokenAction: {
    onAfter: (provider, tokenResponse) => {
      // トークンは一度しか表示されないため、ユーザーはすぐにコピーする必要があります
      console.log("New SCIM token generated");
    },
  },
}}

provisioning.deleteScimTokenAction型: ComponentAction<IdentityProvider>SCIM トークンを取り消します。新しいトークンが生成されるまで、アイデンティティプロバイダーはユーザーを同期できなくなります。例：

provisioning={{
  deleteScimTokenAction: {
    onBefore: () => {
      return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
    },
  },
}}

Domains タブの操作

domains プロパティでは、ドメインタブのActionsを設定します。このタブでは、自動的にユーザーをルーティングするために、Providerに関連付けられたドメインを管理します。

Action	種類	説明
`createAction`	`ComponentAction<Domain>`	ドメインを追加します。
`verifyAction`	`ComponentAction<Domain>`	ドメインの所有権を確認します。
`deleteAction`	`ComponentAction<Domain>`	ドメインを削除します。
`associateToProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	ドメインをプロバイダーに関連付けます。
`deleteFromProviderAction`	`ComponentAction<Domain, IdentityProvider \| null>`	プロバイダーからドメインを削除します。

domains.createAction型: ComponentAction<Domain>プロバイダーの編集画面から組織に新しいドメインを追加できるかどうかを制御します。例:

domains={{
  createAction: {
    onAfter: (domain) => {
      toast.success(`Domain ${domain.domain} added`);
    },
  },
}}

domains.verifyAction型: 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.deleteAction型: ComponentAction<Domain>ドメインの削除を制御します。例：

domains={{
  deleteAction: {
    onBefore: (domain) => {
      return confirm(`Delete ${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>このプロバイダーとドメインの関連付けを削除します。

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

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

スキーマプロバイダーとドメインのフィールドにカスタムバリデーションルールを設定します。

利用可能なスキーマフィールド

すべてのスキーマフィールドでサポートされる項目: regex, errorMessage, minLength, maxLength, requiredprovider.*—strategy別のProvider設定フィールド

共通: name, displayName
strategy固有のフィールド (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.*—strategyごとのフォームフィールドラベル
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
ドメイン関連の通知

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

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

高度なユースケースでは、個別のタブコンポーネントをインポートして、カスタムProviderを編集するためのインターフェースを構築できます。

コンポーネント	説明
`SsoProviderEditTabs`	タブコンテナーとナビゲーション
`SsoTab`	SSO設定用タブ
`ProvisioningTab`	SCIMプロビジョニング用タブ
`DomainsTab`	ドメインの関連付け用タブ

利用可能な Hooks

これらのフックは、UIを介さずに基盤となるロジックを提供します。Auth0 API連携を活用して、独自のインターフェースを自由に構築できます。

Hook	説明
`useSsoProviderEdit`	Providerの取得・編集ロジック
`useSsoProviderEditLogic`	タブの状態とアクションハンドラー

​設定要件

​インストール

​はじめに

​プロップス

​必須プロップス

​プロップスの表示

​Action のプロップス

​SSO タブのアクション

​[プロビジョニング]タブの操作

​ドメインタブの操作

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

​高度なカスタマイズ

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

​利用可能なフック

​設定要件

​インストール

​はじめに

​プロップス

​主要なプロップス

​表示プロップス

​Action のプロップス

​SSO タブのアクション

​プロビジョニングタブの操作

​Domainsタブの操作

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

​高度なカスタマイズ

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

​利用可能なHooks

​設定要件

​インストール

​はじめに

​プロップス

​主要なプロップス

​表示プロパティ

​Action のプロップス

​SSOタブのアクション

​プロビジョニングタブの操作

​Domains タブの操作

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

​高度なカスタマイズ

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

​利用可能な Hooks

設定要件

インストール

はじめに

プロップス

必須プロップス

プロップスの表示

Action のプロップス

SSO タブのアクション

[プロビジョニング]タブの操作

ドメインタブの操作

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

高度なカスタマイズ

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

利用可能なフック

設定要件

インストール

はじめに

プロップス

主要なプロップス

表示プロップス

Action のプロップス

SSO タブのアクション

プロビジョニングタブの操作

Domainsタブの操作

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

高度なカスタマイズ

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

利用可能なHooks

設定要件

インストール

はじめに

プロップス

主要なプロップス

表示プロパティ

Action のプロップス

SSOタブのアクション

プロビジョニングタブの操作

Domains タブの操作

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

高度なカスタマイズ

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

利用可能な Hooks