Skip to main content
Preview of the Organization Details Edit component

​
Setup Requirements

Auth0 Configuration Required - Ensure your tenant is configured with the My Organization API. View setup guide →

​
Installation

npm install @auth0/universal-components-react
Running the shadcn command also installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

​
Quick Start

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

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

return (

<OrganizationDetailsEdit
saveAction={{
        onAfter: () => navigate("/organization"),
      }}
backButton={{
        onClick: () => navigate("/organization"),
      }}
/>
);
}
While this example uses a React SPA, the prop configurations (schema, customMessages, styling, etc.) apply equally to Next.js and shadcn setups.
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 authDetails = {
    domain: "your-domain.auth0.com",
    clientId: "your-client-id",
  };
  return (
    <Auth0Provider
      {...authDetails}
      redirectUri={window.location.origin}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <Auth0ComponentProvider>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​
Props

​
Core Props

Core props are fundamental to the component’s operation. OrganizationDetailsEdit has no required props - it automatically loads the current organization’s details from the Auth0 API.

​
Display Props

Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.
PropTypeDescription
readOnlybooleanDisable all form inputs. Default: false
hideHeaderbooleanHide the header section. Default: false

​
Action Props

Action props handle user interactions and define what happens when users save or cancel changes. Use lifecycle hooks (onBefore, onAfter) to integrate with your application’s routing and analytics.
PropTypeDescription
saveActionComponentAction<OrganizationPrivate>Save changes action. Details
cancelActionComponentAction<OrganizationPrivate>Cancel/discard changes action. Details
backButtonObjectBack button configuration. Details

​
saveAction

Type: ComponentAction<OrganizationPrivate> Controls the save flow when users submit organization changes. Use onAfter to navigate away after successful save. Properties:
  • disabled - Disable the save button (e.g., while another operation is in progress)
  • onBefore(data) - Called before save. Return false to cancel. Use for validation or confirmation.
  • onAfter(data) - Called after successful save. Use for navigation or analytics.
Common Patterns: 
// Navigate back after saving
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// Add confirmation before saving
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// Track analytics on save
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

​
cancelAction

Type: ComponentAction<OrganizationPrivate> Controls the cancel/discard flow. Use this to handle when users want to abandon their changes. Properties:
  • disabled - Disable the cancel button
  • onBefore(data) - Called before cancel. Return false to prevent. Use for “unsaved changes” confirmation.
  • onAfter(data) - Called after cancel is confirmed.
Example: 
<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => navigate("/organization"),
  }}
/>

​
backButton

Type: { icon?: LucideIcon; onClick: (e: MouseEvent) => void } Configures the back button in the component header. Use this to navigate back to your organization overview or previous page. Properties:
  • icon - Custom Lucide icon component (optional, defaults to ArrowLeft)
  • onClick - Click handler for navigation
Example: 
import { ChevronLeft } from "lucide-react";

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

​
Customization Props

Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.
PropTypeDescription
schemaOrganizationDetailsEditSchemasField validation rules. Details
customMessagesPartial<OrganizationDetailsEditMessages>i18n text overrides. Details
stylingComponentStyling<OrganizationEditClasses>CSS variables and class overrides. Details

​
schema

Set custom validation rules for organization detail fields.
All schema fields support: regex, errorMessage, minLength, maxLength, requireddetails.name - Organization internal name details.displayName - Organization display name details.color - Brand color (hex format) details.logoURL - Logo 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

Customize all text and translations. All fields are optional and use defaults if not provided.
header - Component header
  • title, description, back_button_text
form - Form fields
  • 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 - Button labels
  • save_button_text, cancel_button_text
notifications - API responses
  • 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!",
    },
  }}
/>

​
styling

Customize appearance with CSS variables and class overrides. Supports theme-aware styling.
Variables - CSS custom properties
  • common - Applied to all themes
  • light - Light theme only
  • dark - Dark theme only
Classes - Component class overrides
  • 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",
    },
  }}
/>

​
Advanced Customization

The OrganizationDetailsEdit component is composed of smaller subcomponents and hooks. You can import them individually to build custom organization editing workflows if you use shadcn.

​
Available Subcomponents

For advanced use cases, you can import individual subcomponents to build custom organization editing interfaces.
ComponentDescription
OrganizationFormMain form component with all fields
ColorPickerFieldBrand color selection field
LogoUploadFieldLogo URL input with preview

​
Available Hooks

These hooks provide the underlying logic without any UI. Use them to build completely custom interfaces while leveraging the Auth0 API integration.
HookDescription
useOrganizationDetailsEditOrganization editing logic and API integration