メインコンテンツへスキップ
OrganizationDetailsEdit コンポーネントは、組織の詳細を一元的に編集できるインターフェースを提供します。

​
セットアップ要件

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

​
インストール

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

​
はじめに

import { OrganizationDetailsEdit } from "@auth0/universal-components-react/spa";
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/spa";
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={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "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 domain={domain}>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​
プロパティ

​
必須プロパティ

必須プロパティはコンポーネントの動作に不可欠です。OrganizationDetailsEdit には必須プロパティはありません。現在の組織の詳細は My Organization API から自動的に読み込まれます。

​
表示プロパティ

表示プロパティは、コンポーネントの動作に影響を与えずにレンダリング方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりするために使用します。
プロパティ型説明
readOnlybooleanすべてのフォーム入力を無効にします。デフォルト値: false
hideHeaderbooleanヘッダー部分を非表示にします。デフォルト値: false

​
アクションのプロパティ

アクションpropsはユーザー操作を処理し、変更の保存またはキャンセル時の動作を定義します。ライフサイクルフック (onBefore、onAfter) を使用して、アプリケーションのルーティングや分析機能と連携できます。
プロパティ型説明
saveActionComponentAction<OrganizationPrivate>変更を保存するためのアクション。
cancelActionComponentAction<OrganizationPrivate>変更をキャンセルまたは破棄するためのアクション。
backButtonObject戻るボタンの設定。
saveActionType: ComponentAction<OrganizationPrivate>ユーザーが組織の変更を送信した際の保存フローを制御します。保存成功後に別の画面へ遷移するには onAfter を使用してください。プロパティ:
  • disabled - 保存ボタンを無効にする (例：別の操作の処理中)
  • onBefore(data) - 保存処理の前に実行されます。保存を中止するには false を返します (例: 先に確認ダイアログを表示する場合) 。
  • onAfter(data) - 組織の保存が正常に完了した後に実行されます。画面遷移やイベントの追跡に使用できます。
例：
// 保存後に前の画面に戻る
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");
  },
}}
cancelActionType: ComponentAction<OrganizationPrivate>キャンセル/破棄フローを制御します。このアクションを使用して、破棄した変更を管理します。プロパティ:
  • disabled - キャンセルボタンを無効にする
  • onBefore(data) - キャンセル操作の前に実行されます。キャンセルを中止するには false を返します (例: 未保存の変更を破棄してよいか確認する場合) 。
  • onAfter(data) - キャンセルが確認された後に実行されます。フォームから離れる際の画面遷移に使用します。
例：
<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => navigate("/organization"),
  }}
/>
backButtonType: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }コンポーネントヘッダーの戻るボタンを設定します。組織の概要または前のページに戻るために使用します。プロパティ:
  • icon - カスタムのLucideアイコンコンポーネント (省略可、デフォルトはArrowLeft)
  • onClick - ナビゲーション用のクリックハンドラー
例：
import { ChevronLeft } from "lucide-react";

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

​
カスタマイズProps

カスタマイズ用のプロパティを使用すると、ソースコードを変更せずに、ブランド、ロケール、バリデーション要件に合わせてコンポーネントを調整できます。
プロパティ型説明
schemaOrganizationDetailsEditSchemasフィールドの検証ルール。
customMessagesPartial<OrganizationDetailsEditMessages>i18n テキストの上書き設定。
stylingComponentStyling<OrganizationEditClasses>CSS 変数およびクラスの上書き。
schema組織詳細フィールドのカスタムバリデーションルールを設定します。
すべてのスキーマフィールドで次をサポートしています: regex, errorMessage, minLength, maxLength, requireddetails.name - 組織の内部名 details.displayName - 組織の表示名 details.color - ブランドカラー (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,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>
customMessagesすべてのテキストと翻訳をカスタマイズできます。すべてのフィールドは省略可能で、指定しない場合はデフォルト値が使用されます。
header - コンポーネントのヘッダー
  • title, description, back_button_text
form - フォーム項目
  • fields.name - label, placeholder, helper_text, error
  • fields.display_name - label, placeholder, helper_text, error
  • fields.color - label, placeholder, helper_text, error
  • fields.logo_url - label, placeholder, helper_text, error
actions - ボタンのラベル
  • save_button_text, cancel_button_text
notifications - APIのレスポンス
  • save_success, save_error, general_error
<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>
スタイリングCSS変数とクラスの上書きで外観をカスタマイズできます。テーマに合わせたスタイリングにも対応しています。
変数 - CSS カスタムプロパティ
  • common - すべてのテーマに適用
  • light - ライトテーマのみ
  • dark - ダークテーマのみ
クラス - コンポーネントのクラスの上書き
  • OrganizationDetailsEdit-header
  • OrganizationDetailsEdit-form
  • OrganizationDetailsEdit-actions
<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

​
高度なカスタマイズ

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

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

高度なユースケースでは、個別のサブコンポーネントをインポートして、カスタムの組織編集インターフェースを構築できます。
コンポーネント説明
OrganizationFormすべての項目を含むメインのフォームコンポーネント
ColorPickerFieldブランドカラーを選択するフィールド
LogoUploadFieldプレビュー付きのロゴURL入力フィールド

​
利用可能なフック

これらのフックはUIを持たず、基盤となるロジックのみを提供します。Auth0 APIとの連携を活用しながら、完全にカスタムなインターフェースを構築するために使用してください。
フック説明
useOrganizationDetailsEdit組織の編集ロジックと API 連携