Edit Organization Details on Web

The OrganizationDetailsEdit component provides a unified interface to edit your organization details.

Third-party application access

third_party_client_access is an organization-level setting that controls whether third-party applications can authenticate users through the organization’s SSO providers. Its values are "allow" and "block", defaulting to "block". The component reads GET /my-org/config to determine which values the tenant permits. When third_party_client_access.allowed_values contains only "block", the radio group is shown but is read-only — the organization administrator cannot change it. When both values are permitted, the field is editable and saves to the organization details resource. This setting acts as an organization-wide gate. It does not configure Cross App Access (XAA), which is a separate authorization path controlled at the SSO provider level.

React
Next.js
shadcn

Setup requirements

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

Installation

pnpm add @auth0/universal-components-react

npm install @auth0/universal-components-react

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

Get started

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"),
      }}
    />
  );
}

Full integration example

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" // Required to handle step-up auth challenges via Universal Login popup
    >
      <Auth0ComponentProvider>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Required props

Required props are fundamental to the component’s operation. OrganizationDetailsEdit has no required props—it automatically loads the current organization’s details from the My Organization API.

Display props

Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.

Prop	Type	Description
`readOnly`	`boolean`	Disable all form inputs. Default: `false`
`hideHeader`	`boolean`	Hide 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.

Prop	Type	Description
`saveAction`	`ComponentAction<OrganizationPrivate>`	Save changes action.
`cancelAction`	`ComponentAction<OrganizationPrivate>`	Cancel/discard changes action.
`backButton`	`Object`	Back button configuration.

saveActionType: 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 (for example, while another operation is in progress)
onBefore(data)—Runs before the save operation. Return false to prevent saving (for example, to show a confirmation dialog first).
onAfter(data)—Runs after the organization is successfully saved. Use this to navigate away or track the event.

Example:

// 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");
  },
}}

cancelActionType: ComponentAction<OrganizationPrivate>Controls the cancel/discard flow. Use this action to manage discarded changes.Properties:

disabled—Disable the cancel button
onAfter(data)—Runs after the cancel is confirmed. Use this to navigate away from the form.

Example:

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

backButtonType: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }Configures the back button in the component header. Use this to navigate back to your organization overview or the 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.

Prop	Type	Description
`schema`	`OrganizationDetailsEditSchemas`	Field validation rules.
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	i18n text overrides.
`styling`	`ComponentStyling<OrganizationEditClasses>`	CSS variables and class overrides.

schemaSet custom validation rules for organization detail fields.

Available Schema Fields

All schema fields support: regex, errorMessage, minLength, maxLength, requireddetails.name—Organization internal name details.displayName—Organization display name details.primaryColor—Primary brand color (hex format) details.backgroundColor—Page background 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,
      },
      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",
      },
    },
  }}
/>

customMessagesCustomize all text and translations. All fields are optional and use defaults if not provided.

Available Messages

header—Component header

title, back_button_text

details.sections.settings—Settings section

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—Branding section

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

details—Form labels

unsaved_changes_text, submit_button_label, cancel_button_label

notifications—API responses

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!",
  }}
/>

stylingCustomize appearance with CSS variables and class overrides. Supports theme-aware styling.

Available Styling Options

Variables—CSS custom properties

common—Applied to all themes
light—Light theme only
dark—Dark theme only

Classes—Component class overrides

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",
    },
  }}
/>

Advanced customization

Available hooks

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

Hook	Description
`useOrganizationDetailsEdit`	Organization editing logic and API integration

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

pnpm add @auth0/universal-components-react

Running the npm or pnpm commands installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Get started

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"),
      }}
    />
  );
}

Full integration example

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;

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 My Organization API.

Display props

Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.

Prop	Type	Description
`readOnly`	`boolean`	Disable all form inputs. Default: `false`
`hideHeader`	`boolean`	Hide the header section. Default: `false`

Action props

Prop	Type	Description
`saveAction`	`ComponentAction<OrganizationPrivate>`	Save changes action.
`cancelAction`	`ComponentAction<OrganizationPrivate>`	Cancel/discard changes action.
`backButton`	`Object`	Back button configuration.

saveActionType: 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 (for example, while another operation is in progress)
onBefore(data)—Runs before the save operation. Return false to prevent saving (for example, to show a confirmation dialog first).
onAfter(data)—Runs after the organization is successfully saved. Use this to navigate away or track the event.

Common Patterns:

// Navigate back after saving
saveAction={{
  onAfter: () => router.push("/organization"),
}}

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

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

cancelActionType: ComponentAction<OrganizationPrivate>Controls the cancel/discard flow. Use this action to manage discarded changes.Properties:

disabled—Disable the cancel button
onAfter(data)—Runs after the cancel is confirmed. Use this to navigate away from the form.

Example:

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

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: () => router.push("/organization"),
  }}
/>;

Customization props

Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.

Prop	Type	Description
`schema`	`OrganizationDetailsEditSchemas`	Field validation rules.
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	i18n text overrides.
`styling`	`ComponentStyling<OrganizationEditClasses>`	CSS variables and class overrides.

schemaSet custom validation rules for organization detail fields.

Available Schema Fields

<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",
      },
    },
  }}
/>

customMessagesCustomize all text and translations. All fields are optional and use defaults if not provided.

Available Messages

header—Component header

title, back_button_text

details.sections.settings—Settings section

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—Branding section

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

details—Form labels

unsaved_changes_text, submit_button_label, cancel_button_label

notifications—API responses

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!",
  }}
/>

stylingCustomize appearance with CSS variables and class overrides. Supports theme-aware styling.

Available Styling Options

Variables—CSS custom properties

common—Applied to all themes
light—Light theme only
dark—Dark theme only

Classes—Component class overrides

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",
    },
  }}
/>

Advanced customization

Available hooks

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

Hook	Description
`useOrganizationDetailsEdit`	Organization editing logic and API integration

Setup requirements

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

Installation

Install the component via the shadcn CLI using the GitHub Registry:

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

The shadcn CLI also installs the @auth0/universal-components-core dependency for shared utilities and Auth0 integration. Requires shadcn CLI v2.5.0+.

Get started

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"),
      }}
    />
  );
}

Full integration example

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" // Required to handle step-up auth challenges via Universal Login popup
    >
      <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 My Organization API.

Display props

Display props control how the component renders without affecting its behavior. Use these to hide sections or enable read-only mode.

Prop	Type	Description
`readOnly`	`boolean`	Disable all form inputs. Default: `false`
`hideHeader`	`boolean`	Hide the header section. Default: `false`

Action props

Prop	Type	Description
`saveAction`	`ComponentAction<OrganizationPrivate>`	Save changes action.
`cancelAction`	`ComponentAction<OrganizationPrivate>`	Cancel/discard changes action.
`backButton`	`Object`	Back button configuration.

saveActionType: 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 (for example, while another operation is in progress)
onBefore(data)—Runs before the save operation. Return false to prevent saving (for example, to show a confirmation dialog first).
onAfter(data)—Runs after the organization is successfully saved. Use this to navigate away or track the event.

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");
  },
}}

cancelActionType: ComponentAction<OrganizationPrivate>Controls the cancel/discard flow. Use this action to manage discarded changes.Properties:

disabled—Disable the cancel button
onAfter(data)—Runs after the cancel is confirmed. Use this to navigate away from the form.

Example:

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

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.

Prop	Type	Description
`schema`	`OrganizationDetailsEditSchemas`	Field validation rules.
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	i18n text overrides.
`styling`	`ComponentStyling<OrganizationEditClasses>`	CSS variables and class overrides.

schemaSet custom validation rules for organization detail fields.

Available Schema Fields

<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",
      },
    },
  }}
/>

customMessagesCustomize all text and translations. All fields are optional and use defaults if not provided.

Available Messages

header—Component header

title, back_button_text

details.sections.settings—Settings section

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—Branding section

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

details—Form labels

unsaved_changes_text, submit_button_label, cancel_button_label

notifications—API responses

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!",
  }}
/>

stylingCustomize appearance with CSS variables and class overrides. Supports theme-aware styling.

Available Styling Options

Variables—CSS custom properties

common—Applied to all themes
light—Light theme only
dark—Dark theme only

Classes—Component class overrides

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",
    },
  }}
/>

Advanced customization

Available hooks

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

Hook	Description
`useOrganizationDetailsEdit`	Organization data fetching and editing logic

Web Components

iOS Components

Android Components

Edit Organization Details on Web

Third-party application access

Setup requirements

Installation

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available hooks

Setup requirements

Installation

Get started

Props

Core props

Display props

Action props

Customization props

Advanced customization

Available hooks

Setup requirements

Installation

Get started

Props

Core props

Display props

Action props

Customization props

Advanced customization

Available hooks

​Third-party application access

​Setup requirements

​Installation

​Get started

​Props

​Required props

​Display props

​Action props

​Customization props

​Advanced customization

​Available hooks

​Setup requirements

​Installation

​Get started

​Props

​Core props

​Display props

​Action props

​Customization props

​Advanced customization

​Available hooks

​Setup requirements

​Installation

​Get started

​Props

​Core props

​Display props

​Action props

​Customization props

​Advanced customization

​Available hooks

Third-party application access

Setup requirements

Installation

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available hooks

Setup requirements

Installation

Get started

Props

Core props

Display props

Action props

Customization props

Advanced customization

Available hooks

Setup requirements

Installation

Get started

Props

Core props

Display props

Action props

Customization props

Advanced customization

Available hooks