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

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

サードパーティアプリケーションアクセスと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 によって制御されます。strategy の cross_app_access_resource_app 設定がない場合、このセクションは表示されません。 XAA は独立した認可経路であり、Organization レベルの third_party_client_access ポリシーと接続レベルの use_for_third_party_client_access 設定という、両方のサードパーティアクセス制御をバイパスします。

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(
                `Permanently delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
          },
          deleteFromOrganizationAction: {
            onBefore: (provider) => {
              return confirm(
                `Remove "${provider.display_name}" from this organization?`,
              );
            },
            onAfter: () => {
              toast.success("Provider removed from organization");
              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>
        <EditProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

プロップ

必須プロップス

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

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

表示プロップス

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

プロパティ	型	説明
`hideHeader`	`boolean`	ヘッダーセクションを非表示にします。デフォルト: `false`
`hideProvisioningTab`	`boolean`	プロビジョニング (SCIM) タブを非表示にします。デフォルト: `false`
`hideDeleteProvider`	`boolean`	プロバイダーの削除アクションを非表示にします。デフォルト: `false`
`hideRemoveFromOrganization`	`boolean`	Organizationから削除するアクションを非表示にします。デフォルト: `false`
`hideAttributeMappings`	`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>`	テナントからプロバイダーを完全に削除します。
`deleteFromOrganizationAction`	`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.deleteFromOrganizationAction型: ComponentAction<IdentityProvider>プロバイダーを組織から削除する操作を制御します。プロバイダーは組織から切り離されますが、テナントには残り、後で再追加できます。例：

sso={{
  deleteFromOrganizationAction: {
    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 プロビジョニングを有効にします。有効にすると、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—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—タブのラベルとコンテンツ

tabs.sso.name—SSOタブのラベル
tabs.sso.content—SSOタブのメッセージ
- details.third_party_access—title, label, helper_text
- details.cross_app_access—title, label, helper_text, domain_verification_text, saml_description, saml_discovery_url_label, saml_discovery_url_placeholder, saml_discovery_url_helper
- title, description
- fields.*—strategyごとのフォームフィールドラベル
- actions.save_button_text, actions.delete_button_text
- delete_modal.*, remove_modal.*
tabs.provisioning.name—プロビジョニングタブのラベル
tabs.domains.name—ドメインタブのラベル

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: {
        name: "Settings",
        content: {
          details: {
            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.",
              domain_verification_text: "The OIDC issuer domain must be verified.",
              saml_description: "Provide the identity provider's OpenID Connect Configuration.",
              saml_discovery_url_label: "OIDC Issuer or Discovery URL",
              saml_discovery_url_helper: "Enter an issuer URL or discovery URL",
            },
          },
          actions: {
            save_button_text: "Save Changes",
          },
        },
      },
      provisioning: { name: "User Sync" },
      domains: { name: "Domains" },
    },
    notifications: {
      provider_update_success: "Provider saved successfully!",
    },
  }}
/>

スタイリングCSS変数やクラスのオーバーライドで外観をカスタマイズできます。テーマ対応のスタイル設定をサポートします。

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

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

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

クラス—コンポーネントのクラス上書き

SsoProviderEdit-header
SsoProviderEdit-tabs
ProviderConfigure-ThirdPartyAccess
ProviderConfigure-CrossAppAccess

<SsoProviderEdit
  providerId={providerId}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderEdit-tabs": "border-b border-gray-200",
    },
  }}
/>

高度なカスタマイズ

利用可能なフック

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

Hook	説明
`useSsoProviderEdit`	Providerの読み込みと更新処理
`useSsoDomainTab`	ドメインの関連付け管理

設定要件

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(
                `Permanently delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
          },
          deleteFromOrganizationAction: {
            onBefore: (provider) => {
              return confirm(
                `Remove "${provider.display_name}" from this organization?`,
              );
            },
            onAfter: () => {
              toast.success("Provider removed from organization");
              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`
`hideProvisioningTab`	`boolean`	プロビジョニング (SCIM) タブを非表示にします。デフォルト: `false`
`hideDeleteProvider`	`boolean`	プロバイダー削除のアクションを非表示にします。デフォルト: `false`
`hideRemoveFromOrganization`	`boolean`	organization から削除するアクションを非表示にします。デフォルト: `false`
`hideAttributeMappings`	`boolean`	属性マッピングのセクションを非表示にします。デフォルト: `false`

Action のプロップス

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

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

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>`	プロバイダーの設定を更新します。
`deleteAction`	`ComponentAction<IdentityProvider>`	テナントからプロバイダーを完全に削除します。
`deleteFromOrganizationAction`	`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={{
  deleteFromOrganizationAction: {
    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: {
    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: {
    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 トークンを取り消します。新しいトークンが生成されるまで、IDプロバイダーはユーザーを同期できなくなります。例：

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

ドメインタブの操作

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: {
    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—タブのラベルとコンテンツ

tabs.sso.name—SSOタブのラベル
tabs.sso.content—SSOタブのメッセージ
- details.third_party_access—title、label、helper_text
- details.cross_app_access—title、label、helper_text、domain_verification_text、saml_description、saml_discovery_url_label、saml_discovery_url_placeholder、saml_discovery_url_helper
- title、description
- fields.*—strategyごとのフォームフィールドラベル
- actions.save_button_text、actions.delete_button_text
- delete_modal.*、remove_modal.*
tabs.provisioning.name—プロビジョニングタブのラベル
tabs.domains.name—ドメインタブのラベル

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: {
        name: "Settings",
        content: {
          details: {
            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.",
              domain_verification_text: "The OIDC issuer domain must be verified.",
              saml_description: "Provide the identity provider's OpenID Connect Configuration.",
              saml_discovery_url_label: "OIDC Issuer or Discovery URL",
              saml_discovery_url_helper: "Enter an issuer URL or discovery URL",
            },
          },
          actions: {
            save_button_text: "Save Changes",
          },
        },
      },
      provisioning: { name: "User Sync" },
      domains: { name: "Domains" },
    },
    notifications: {
      provider_update_success: "Provider saved successfully!",
    },
  }}
/>

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

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

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

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

クラス—コンポーネントのクラス上書き

SsoProviderEdit-header
SsoProviderEdit-tabs
ProviderConfigure-ThirdPartyAccess
ProviderConfigure-CrossAppAccess

<SsoProviderEdit
  providerId={providerId}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderEdit-tabs": "border-b border-gray-200",
    },
  }}
/>

高度なカスタマイズ

利用可能なフック

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

Hook	説明
`useSsoProviderEdit`	Providerの読み込みと更新処理
`useSsoDomainTab`	ドメインの関連付け管理

設定要件

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

インストール

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

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

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

はじめに

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(
                `Permanently delete "${provider.display_name}"? This cannot be undone.`,
              );
            },
          },
          deleteFromOrganizationAction: {
            onBefore: (provider) => {
              return confirm(
                `Remove "${provider.display_name}" from this organization?`,
              );
            },
            onAfter: () => {
              toast.success("Provider removed from organization");
              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>
        <EditProviderPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

プロップス

主要なプロップス

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

表示プロップス

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

プロパティ	型	説明
`hideHeader`	`boolean`	ヘッダーセクションを非表示にします。デフォルト: `false`
`hideProvisioningTab`	`boolean`	プロビジョニング (SCIM) タブを非表示にします。デフォルト: `false`
`hideDeleteProvider`	`boolean`	プロバイダー削除のアクションを非表示にします。デフォルト: `false`
`hideRemoveFromOrganization`	`boolean`	organization からの削除アクションを非表示にします。デフォルト: `false`
`hideAttributeMappings`	`boolean`	属性マッピングのセクションを非表示にします。デフォルト: `false`

Action のプロップス

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

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

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

sso プロップは、SSO 設定タブの操作を構成します。このタブでは、プロバイダーの認証設定を管理します。

Action	タイプ	説明
`updateAction`	`ComponentAction<IdentityProvider, IdentityProvider>`	プロバイダーの設定を更新します。
`deleteAction`	`ComponentAction<IdentityProvider>`	テナントからプロバイダーを完全に削除します。
`deleteFromOrganizationAction`	`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: {
    onBefore: (provider) => {
      return confirm(`Permanently delete "${provider.display_name}"? This cannot be undone.`);
    },
    onAfter: () => navigate("/providers"),
  },
}}

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

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

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: {
    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: {
    onBefore: () => {
      return confirm("Revoke SCIM token? Your identity provider will lose access immediately.");
    },
  },
}}

ドメインタブの操作

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: {
    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—タブのラベルとコンテンツ

tabs.sso.name—SSOタブのラベル
tabs.sso.content—SSOタブのメッセージ
- details.third_party_access—title, label, helper_text
- details.cross_app_access—title, label, helper_text, domain_verification_text, saml_description, saml_discovery_url_label, saml_discovery_url_placeholder, saml_discovery_url_helper
- title, description
- fields.*—strategyごとのフォームフィールドラベル
- actions.save_button_text, actions.delete_button_text
- delete_modal.*, remove_modal.*
tabs.provisioning.name—プロビジョニングタブのラベル
tabs.domains.name—ドメインタブのラベル

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: {
        name: "Settings",
        content: {
          details: {
            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.",
              domain_verification_text: "The OIDC issuer domain must be verified.",
              saml_description: "Provide the identity provider's OpenID Connect Configuration.",
              saml_discovery_url_label: "OIDC Issuer or Discovery URL",
              saml_discovery_url_helper: "Enter an issuer URL or discovery URL",
            },
          },
          actions: {
            save_button_text: "Save Changes",
          },
        },
      },
      provisioning: { name: "User Sync" },
      domains: { name: "Domains" },
    },
    notifications: {
      provider_update_success: "Provider saved successfully!",
    },
  }}
/>

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

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

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

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

クラス—コンポーネントのクラス上書き

SsoProviderEdit-header
SsoProviderEdit-tabs
ProviderConfigure-ThirdPartyAccess
ProviderConfigure-CrossAppAccess

<SsoProviderEdit
  providerId={providerId}
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "SsoProviderEdit-tabs": "border-b border-gray-200",
    },
  }}
/>

高度なカスタマイズ

利用可能なフック

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

Hook	説明
`useSsoProviderEdit`	Providerの取得・編集ロジック
`useSsoDomainTab`	ドメインの関連付け管理

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

​設定要件

​インストール

​はじめに

​プロップ

​必須プロップス

​表示プロップス

​Action のプロップス

​SSO タブのアクション

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

​Domainsタブの操作

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

​高度なカスタマイズ

​利用可能なフック

​設定要件

​インストール

​はじめに

​プロップス

​主要なプロップス

​表示プロップス

​Action のプロップス

​SSO タブのアクション

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

​ドメインタブの操作

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

​高度なカスタマイズ

​利用可能なフック

​設定要件

​インストール

​はじめに

​プロップス

​主要なプロップス

​表示プロップス

​Action のプロップス

​SSO タブのアクション

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

​ドメインタブの操作

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

​高度なカスタマイズ

​利用可能なフック

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

設定要件

インストール

はじめに

プロップ

必須プロップス

表示プロップス

Action のプロップス

SSO タブのアクション

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

Domainsタブの操作

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

高度なカスタマイズ

利用可能なフック

設定要件

インストール

はじめに

プロップス

主要なプロップス

表示プロップス

Action のプロップス

SSO タブのアクション

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

ドメインタブの操作

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

高度なカスタマイズ

利用可能なフック

設定要件

インストール

はじめに

プロップス

主要なプロップス

表示プロップス

Action のプロップス

SSO タブのアクション

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

ドメインタブの操作

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

高度なカスタマイズ

利用可能なフック