Web で組織の詳細を編集する

OrganizationDetailsEdit コンポーネントは、組織の詳細を編集するための統合インターフェースを提供します。

サードパーティアプリケーションのアクセス

third_party_client_access は Organizationレベルの設定で、サードパーティアプリケーションがOrganizationの SSO プロバイダーを通じてユーザーを認証できるかどうかを制御します。設定できる値は "allow" と "block" で、既定値は "block" です。コンポーネントは GET /my-org/config を読み取り、テナントが許可している値を判断します。third_party_client_access.allowed_values に "block" のみが含まれる場合、ラジオグループは表示されるものの読み取り専用となり、Organizationの管理者は変更できません。両方の値が許可されている場合は、このフィールドを編集でき、Organization詳細リソースに保存されます。この設定はOrganization全体に適用されるゲートとして機能します。Cross App Access (XAA) を構成するものではありません。XAA は SSO プロバイダーレベルで制御される別の認可経路です。

React
Next.js
shadcn

設定の要件

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

インストール

pnpm add @auth0/universal-components-react

npm install @auth0/universal-components-react

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

はじめに

import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { useNavigate } from "react-router-dom";

export function OrganizationSettingsPage() {
  const navigate = useNavigate();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => navigate("/organization"),
      }}
      backButton={{
        onClick: () => navigate("/organization"),
      }}
    />
  );
}

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

function OrganizationSettingsPage() {
  const navigate = useNavigate();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          save_organization_changes_message: "Settings saved successfully!",
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetails_Card": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";
  const clientId = "your-client-id";

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Universal Login のポップアップでステップアップ認証のチャレンジを処理するために必要
    >
      <Auth0ComponentProvider>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

プロップス

必須のプロップス

必須の props はコンポーネントの動作に不可欠です。OrganizationDetailsEdit には必須の props はなく、現在の組織の詳細を My Organization API から自動的に読み込みます。

表示関連のプロップス

表示用のプロップスは、コンポーネントの動作に影響を与えることなく、その表示方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする際に使用します。

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

Action のプロップス

Actionのプロップスはユーザー操作を処理し、ユーザーが変更を保存またはキャンセルしたときの動作を定義します。ライフサイクルフック (onBefore、onAfter) を使用すると、アプリケーションのルーティングや分析と連携できます。

プロパティ	型	説明
`saveAction`	`ComponentAction<OrganizationPrivate>`	変更を保存するアクション。
`cancelAction`	`ComponentAction<OrganizationPrivate>`	変更をキャンセルまたは破棄するアクション。
`backButton`	`Object`	戻るボタンの設定。

saveAction型: ComponentAction<OrganizationPrivate>ユーザーが organization の変更を送信した際の保存フローを制御します。保存の成功後に別の画面へ遷移させるには onAfter を使用します。プロパティ:

disabled—保存ボタンを無効にします (たとえば、別の操作の実行中) 。
onBefore(data)—保存処理の前に実行されます。保存を中止するにはfalseを返します (たとえば、先に確認ダイアログを表示する場合) 。
onAfter(data)—organizationが正常に保存された後に実行されます。画面遷移やイベントの追跡に使用します。

例:

// 保存後に前の画面へ戻る
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// 保存前に確認ダイアログを表示する
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// 保存時に分析イベントを記録する
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

cancelAction型: ComponentAction<OrganizationPrivate>キャンセル/破棄のフローを制御します。破棄された変更の管理には、このアクションを使用します。プロパティ:

disabled—キャンセルボタンを無効にします
onAfter(data)—キャンセルが確定した後に実行されます。Formから移動する際に使用します。

例:

<OrganizationDetailsEdit
  cancelAction={{
    onAfter: () => navigate("/organization"),
  }}
/>

backButton型: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }コンポーネントのヘッダーにある戻るボタンを設定します。organization の概要ページや前のページに戻る導線として使用します。プロパティ:

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

例:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/organization"),
  }}
/>;

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

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

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

スキーマorganizationの詳細フィールドにカスタムのバリデーションルールを設定します。

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

すべてのschemaフィールドでサポートされる項目: regex, errorMessage, minLength, maxLength, requireddetails.name—組織の内部名 details.displayName—組織の表示名 details.primaryColor—プライマリブランドカラー (16進数形式) details.backgroundColor—ページの背景色 (16進数形式) details.logoURL—ロゴのURL

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      primaryColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      backgroundColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesすべてのテキストと翻訳をカスタマイズします。すべてのフィールドは任意で、指定されていない場合はデフォルトが使用されます。

利用可能なメッセージ

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

title, back_button_text

details.sections.settings—設定セクション

title
fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.third_party_client_access—label, options.block.label, options.block.helper_text, options.allow.label, options.allow.helper_text

details.sections.branding—ブランディングセクション

title
fields.logo—label, helper_text, error
fields.primary_color—label, helper_text, error
fields.page_background_color—label, helper_text, error

details—フォームのラベル

unsaved_changes_text, submit_button_label, cancel_button_label

notifications—APIレスポンス

save_organization_changes_message, organization_changes_error_message, organization_changes_error_message_generic

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
    },
    details: {
      sections: {
        settings: {
          fields: {
            name: {
              label: "Organization ID",
              helper_text: "Internal identifier (cannot be changed after creation)",
            },
            display_name: {
              label: "Organization Name",
              placeholder: "Enter display name",
            },
            third_party_client_access: {
              label: "Third-Party Application Access",
              options: {
                block: {
                  label: "Block Third-Party Access",
                  helper_text: "Users can only authenticate through official apps",
                },
                allow: {
                  label: "Allow Third-Party Access",
                  helper_text: "Users can authenticate through external applications",
                },
              },
            },
          },
        },
      },
    },
    save_organization_changes_message: "Organization updated successfully!",
  }}
/>

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

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

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

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

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

OrganizationDetails_Card
OrganizationDetails_FormActions
OrganizationDetails_SettingsDetails
OrganizationDetails_BrandingDetails
OrganizationDetails_ThirdPartyAccess

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetails_Card": "shadow-lg rounded-xl p-6",
    },
  }}
/>

高度なカスタマイズ

利用可能なフック

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

Hook	説明
`useOrganizationDetailsEdit`	組織の編集ロジックとAPI連携

設定の要件

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

インストール

npm install @auth0/universal-components-react

pnpm add @auth0/universal-components-react

npm または pnpm コマンドを実行すると、共通ユーティリティと Auth0 連携用の @auth0/universal-components-core 依存パッケージがインストールされます。

はじめに

page.tsx

import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { useRouter } from "next/navigation";

export function OrganizationSettingsPage() {
  const router = useRouter();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => router.push("/organization"),
      }}
      backButton={{
        onClick: () => router.push("/organization"),
      }}
    />
  );
}

連携の完全な例

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

function OrganizationSettingsPage() {
  const router = useRouter();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    router.push("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onAfter: () => router.push("/organization"),
        }}
        backButton={{
          onClick: () => router.push("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          save_organization_changes_message: "Settings saved successfully!",
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetails_Card": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default OrganizationSettingsPage;

プロップス

主要なプロップス

コアプロップスはコンポーネントの動作に不可欠です。OrganizationDetailsEdit には必須のプロップはなく、現在の組織の詳細を My Organization API から自動的に読み込みます。

表示関連のプロップス

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

Action のプロップス

Actionのプロップスは、ユーザー操作を処理し、ユーザーが変更を保存またはキャンセルしたときの動作を定義します。ライフサイクルフック (onBefore、onAfter) を使用すると、アプリケーションのルーティングや分析と連携できます。

プロパティ	型	説明
`saveAction`	`ComponentAction<OrganizationPrivate>`	変更を保存するアクション。
`cancelAction`	`ComponentAction<OrganizationPrivate>`	変更をキャンセルまたは破棄するアクション。
`backButton`	`Object`	戻るボタンの設定。

disabled—保存ボタンを無効にします (たとえば、別の操作の実行中) 。
onBefore(data)—保存処理の前に実行されます。保存を中止するにはfalseを返します (たとえば、先に確認ダイアログを表示する場合) 。
onAfter(data)—organizationが正常に保存された後に実行されます。画面遷移やイベントの追跡に使用します。

よくあるパターン:

// 保存後に前の画面へ戻る
saveAction={{
  onAfter: () => router.push("/organization"),
}}

// 保存前に確認ダイアログを表示する
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => router.push("/organization"),
}}

// 保存時に分析イベントを記録する
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    router.push("/organization");
  },
}}

disabled—キャンセルボタンを無効にします
onAfter(data)—キャンセルが確定した後に実行されます。Formから移動する際に使用します。

例:

<OrganizationDetailsEdit
  cancelAction={{
    onAfter: () => router.push("/organization"),
  }}
/>

backButton型: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }コンポーネントヘッダー内の戻るボタンを設定します。organizationの概要ページや前のページに戻る導線として使用します。プロパティ:

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

例:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => router.push("/organization"),
  }}
/>;

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

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

スキーマorganizationの詳細フィールドにカスタムのバリデーションルールを設定します。

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

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      primaryColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      backgroundColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesすべてのテキストと翻訳をカスタマイズします。すべてのフィールドは任意で、指定されていない場合はデフォルトが使用されます。

利用可能なメッセージ

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

title, back_button_text

details.sections.settings—設定セクション

title
fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.third_party_client_access—label, options.block.label, options.block.helper_text, options.allow.label, options.allow.helper_text

details.sections.branding—ブランディングセクション

title
fields.logo—label, helper_text, error
fields.primary_color—label, helper_text, error
fields.page_background_color—label, helper_text, error

details—Formのラベル

unsaved_changes_text, submit_button_label, cancel_button_label

notifications—APIレスポンス

save_organization_changes_message, organization_changes_error_message, organization_changes_error_message_generic

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
    },
    details: {
      sections: {
        settings: {
          fields: {
            name: {
              label: "Organization ID",
              helper_text: "Internal identifier (cannot be changed after creation)",
            },
            display_name: {
              label: "Organization Name",
              placeholder: "Enter display name",
            },
            third_party_client_access: {
              label: "Third-Party Application Access",
              options: {
                block: {
                  label: "Block Third-Party Access",
                  helper_text: "Users can only authenticate through official apps",
                },
                allow: {
                  label: "Allow Third-Party Access",
                  helper_text: "Users can authenticate through external applications",
                },
              },
            },
          },
        },
      },
    },
    save_organization_changes_message: "Organization updated successfully!",
  }}
/>

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

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

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

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

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

OrganizationDetails_Card
OrganizationDetails_FormActions
OrganizationDetails_SettingsDetails
OrganizationDetails_BrandingDetails
OrganizationDetails_ThirdPartyAccess

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetails_Card": "shadow-lg rounded-xl p-6",
    },
  }}
/>

高度なカスタマイズ

利用可能なフック

Hook	説明
`useOrganizationDetailsEdit`	組織の編集ロジックとAPI連携

設定の要件

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

インストール

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

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

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

はじめに

import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

export function OrganizationSettingsPage() {
  const navigate = useNavigate();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => navigate("/organization"),
      }}
      backButton={{
        onClick: () => navigate("/organization"),
      }}
    />
  );
}

連携の完全な例

import React from "react";
import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

function OrganizationSettingsPage() {
  const navigate = useNavigate();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          save_organization_changes_message: "Settings saved successfully!",
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetails_Card": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";
  const clientId = "your-client-id";

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Universal Login のポップアップでステップアップ認証のチャレンジを処理するために必要
    >
      <Auth0ComponentProvider>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

プロップス

主要なプロップス

表示関連のプロップス

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

Action のプロップス

プロパティ	型	説明
`saveAction`	`ComponentAction<OrganizationPrivate>`	変更を保存するアクション。
`cancelAction`	`ComponentAction<OrganizationPrivate>`	変更をキャンセルまたは破棄するアクション。
`backButton`	`Object`	戻るボタンの設定。

disabled—保存ボタンを無効にします (たとえば、別の操作の実行中) 。
onBefore(data)—保存処理の前に実行されます。保存を中止するにはfalseを返します (たとえば、先に確認ダイアログを表示する場合) 。
onAfter(data)—organizationが正常に保存された後に実行されます。画面遷移やイベントの追跡に使用します。

よくあるパターン:

// 保存後に前の画面へ戻る
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// 保存前に確認ダイアログを表示する
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// 保存時に分析イベントを記録する
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

disabled—キャンセルボタンを無効にします
onAfter(data)—キャンセルが確定した後に実行されます。Formから移動する際に使用します。

例:

<OrganizationDetailsEdit
  cancelAction={{
    onAfter: () => navigate("/organization"),
  }}
/>

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

例:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/organization"),
  }}
/>;

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

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

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

スキーマorganizationの詳細フィールドにカスタムのバリデーションルールを設定します。

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

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      primaryColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      backgroundColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesすべてのテキストと翻訳をカスタマイズします。すべてのフィールドは任意で、指定されていない場合はデフォルトが使用されます。

利用可能なメッセージ

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

title, back_button_text

details.sections.settings—設定セクション

title
fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.third_party_client_access—label, options.block.label, options.block.helper_text, options.allow.label, options.allow.helper_text

details.sections.branding—ブランディングセクション

title
fields.logo—label, helper_text, error
fields.primary_color—label, helper_text, error
fields.page_background_color—label, helper_text, error

details—Formのラベル

unsaved_changes_text, submit_button_label, cancel_button_label

notifications—APIレスポンス

save_organization_changes_message, organization_changes_error_message, organization_changes_error_message_generic

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
    },
    details: {
      sections: {
        settings: {
          fields: {
            name: {
              label: "Organization ID",
              helper_text: "Internal identifier (cannot be changed after creation)",
            },
            display_name: {
              label: "Organization Name",
              placeholder: "Enter display name",
            },
            third_party_client_access: {
              label: "Third-Party Application Access",
              options: {
                block: {
                  label: "Block Third-Party Access",
                  helper_text: "Users can only authenticate through official apps",
                },
                allow: {
                  label: "Allow Third-Party Access",
                  helper_text: "Users can authenticate through external applications",
                },
              },
            },
          },
        },
      },
    },
    save_organization_changes_message: "Organization updated successfully!",
  }}
/>

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

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

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

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

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

OrganizationDetails_Card
OrganizationDetails_FormActions
OrganizationDetails_SettingsDetails
OrganizationDetails_BrandingDetails
OrganizationDetails_ThirdPartyAccess

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetails_Card": "shadow-lg rounded-xl p-6",
    },
  }}
/>

高度なカスタマイズ

利用可能なフック

Hook	説明
`useOrganizationDetailsEdit`	Organization データの取得・編集ロジック

Web Components

iOS Components

Android Components

Web で組織の詳細を編集する

サードパーティアプリケーションのアクセス

設定の要件

インストール

はじめに

プロップス

必須のプロップス

表示関連のプロップス

Action のプロップス

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

高度なカスタマイズ

利用可能なフック

設定の要件

インストール

はじめに

プロップス

主要なプロップス

表示関連のプロップス

Action のプロップス

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

高度なカスタマイズ

利用可能なフック

設定の要件

インストール

はじめに

プロップス

主要なプロップス

表示関連のプロップス

Action のプロップス

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

高度なカスタマイズ

利用可能なフック

​サードパーティアプリケーションのアクセス

​設定の要件

​インストール

​はじめに

​プロップス

​必須のプロップス

​表示関連のプロップス

​Action のプロップス

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

​高度なカスタマイズ

​利用可能なフック

​設定の要件

​インストール

​はじめに

​プロップス

​主要なプロップス

​表示関連のプロップス

​Action のプロップス

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

​高度なカスタマイズ

​利用可能なフック

​設定の要件

​インストール

​はじめに

​プロップス

​主要なプロップス

​表示関連のプロップス

​Action のプロップス

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

​高度なカスタマイズ

​利用可能なフック

サードパーティアプリケーションのアクセス

設定の要件

インストール

はじめに

プロップス

必須のプロップス

表示関連のプロップス

Action のプロップス

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

高度なカスタマイズ

利用可能なフック

設定の要件

インストール

はじめに

プロップス

主要なプロップス

表示関連のプロップス

Action のプロップス

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

高度なカスタマイズ

利用可能なフック

設定の要件

インストール

はじめに

プロップス

主要なプロップス

表示関連のプロップス

Action のプロップス

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

高度なカスタマイズ

利用可能なフック