OrganizationMemberDetail Component
++ View and manage an individual organization member — user profile, assigned roles, and + removal — in a two-tab layout with full lifecycle controls. +
+Beta
++ This Auth0 Universal Component is in Beta. By using it, you agree to the applicable + Free Trial terms in Okta's Master Subscription Agreement. To learn more, read{' '} + + Product Release Stages + + . +
+Component Preview
+
+ 
+ Setup Requirements
++ Auth0 Configuration Required +
++ Before using the OrganizationMemberDetail component, ensure your tenant is + configured with the proper APIs, applications, and permissions. +
++ Setup guide:{' '} + + My Organization Components Introduction → + +
+Installation
+Option 1: NPM Package
+Install the React package:
+
+ Note: One install covers both React (SPA) and Next.js (RWA).
+ Components are always imported from the root entry{' '}
+ @auth0/universal-components-react; only{' '}
+ Auth0ComponentProvider uses a framework-specific subpath:
+
-
+
-
+ React (Vite, CRA, React Router) →{' '}
+
{`import { Auth0ComponentProvider } from '@auth0/universal-components-react/spa';`}+
+ -
+ Next.js (App Router or Pages Router) →{' '}
+
{`import { Auth0ComponentProvider } from '@auth0/universal-components-react/rwa';`}+
+
Option 2: Shadcn CLI
++ If you're using Shadcn, you can add the OrganizationMemberDetail block directly to + your project: +
+
+ Note: This installs the React component source code in your{' '}
+ src/components/auth0/ directory along with all UI dependencies and the
+ core package.
+
Basic Usage
+
+ Pass a userId from your route to the component. Wire onBack to
+ your router so the back button returns to the member list.
+
Props
+ + {/* Required props */} +Required props
+| + Prop + | ++ Type + | ++ Description + | +
|---|---|---|
| + userId * + | +
+ string
+ |
+
+ Auth0 user ID of the member to display (e.g. auth0|64abc...)
+ |
+
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
+ |
+
+ Disables role management and member removal actions. Default: false
+ |
+
| + hideHeader + | +
+ boolean
+ |
+
+ Hides the component header. Default: false
+ |
+
Action props
+
+ Action props handle user interactions and define what happens when users perform member
+ operations. Use lifecycle hooks (onBefore, onAfter) to
+ integrate with your application's routing and analytics.
+
| + Prop + | ++ Type + | ++ Description + | +
|---|---|---|
| + onBack + | +
+ {'() => void'}
+ |
+ + Called when the user clicks the back button in the header. Wire to your router. + | +
| + removeFromOrgAction + | +
+ ComponentAction<string>
+ |
+
+ Lifecycle hooks for member removal. Input is the userId.
+ |
+
| + assignRolesAction + | +
+ ComponentAction<{'{ userId: string; roleIds: string[] }'}>
+ |
+ + Lifecycle hooks for role assignment. + | +
| + removeRolesAction + | +
+ ComponentAction<{'{ userId: string; roleIds: string[] }'}>
+ |
+ + Lifecycle hooks for role removal. + | +
onBack
+
+ Type: {'() => void'}
+
+ Fires when the user clicks the back button in the header. The component does not
+ navigate on its own — wire this callback to your router so it returns to the
+ member-list route (typically the page that rendered{' '}
+ OrganizationMemberManagement).
+
Common Patterns:
+removeFromOrgAction
+
+ Type: ComponentAction<string>
+
+ Controls the remove-from-organization flow on the member's profile tab. Both
+ lifecycle hooks receive the userId string directly. This action
+ triggers a step-up auth challenge — make sure your Auth0Provider is
+ configured with interactiveErrorHandler="popup".
+
Properties:
+-
+
-
+
disabled— hide the remove button. +
+ -
+
onBefore(userId)— confirm before removing. Returnfalse{' '} + to cancel. +
+ -
+
onAfter(userId)— runs after the member is removed. Use this to + navigate away or write to an audit log. +
+
Common Patterns:
+assignRolesAction
+
+ Type:{' '}
+ ComponentAction<{'{ userId: string; roleIds: string[] }'}>
+
+ Fires after one or more roles are assigned to the member from the roles tab. Both
+ lifecycle hooks receive an object with the userId and the array of
+ roleIds being assigned.
+
Properties:
+-
+
-
+
disabled— hide the assign-roles button. +
+ -
+
onBefore({'{ userId, roleIds }'})— validate the selection. Return{' '} +falseto cancel. +
+ -
+
onAfter({'{ userId, roleIds }'})— runs after the roles are assigned. +
+
Common Patterns:
+removeRolesAction
+
+ Type:{' '}
+ ComponentAction<{'{ userId: string; roleIds: string[] }'}>
+
+ Fires after one or more roles are removed from the member's role table. Both
+ lifecycle hooks receive an object with the userId and the array of
+ roleIds being removed.
+
Properties:
+-
+
-
+
disabled— hide the remove-role buttons in the role table. +
+ -
+
onBefore({'{ userId, roleIds }'})— confirm before removing. Return{' '} +falseto cancel. +
+ -
+
onAfter({'{ userId, roleIds }'})— runs after the roles are removed. +
+
Common Patterns:
+Customization props
++ Customization props let you override default text and apply CSS variables or class names + to match your application's design system. +
+| + Prop + | ++ Type + | ++ Description + | +
|---|---|---|
| + customMessages + | +
+ Partial<OrganizationMemberDetailMessages>
+ |
+
+ Override any default UI text or translations. Default: {'{}'}
+ |
+
| + styling + | +
+ ComponentStyling
+ |
+
+ CSS variables and class overrides. Default:{' '}
+ {'{ variables: {}, classes: {} }'}
+ |
+
customMessages
+
+ Type: Partial<OrganizationMemberDetailMessages>
+
+ Customize all text and translations rendered by the component. Every field is + optional and falls back to the built-in default. Use this prop to localize the + component or to align microcopy with your product voice. +
++ Available Messages +
+-
+
- back_button +
- tabs.details, tabs.roles +
-
+
- title +
- name, email +
- phone_number, provider +
- created_at, last_login +
-
+
- title, description, button +
- modal.title, modal.description +
- modal.cancel_button, modal.confirm_button +
- success +
-
+
- title, description +
- assign_button +
- table.name, table.description +
- table.empty_message +
- table.remove_button_label +
-
+
- title, description +
- roles_label, roles_placeholder +
- submit_button, cancel_button +
- no_roles_available +
-
+
- fetch_failed, fetch_roles_failed +
- remove_from_org_failed +
- assign_role_failed, remove_role_failed +
Example:
+styling
+
+ Type: ComponentStyling
+
+ Customize appearance with CSS variables and class overrides. Variables are
+ theme-aware (separate light, dark, and common{' '}
+ scopes); class overrides target named slots inside the component tree so you can
+ attach Tailwind utilities or your own design-system classes without forking the
+ source.
+
+ Available Styling Options +
+-
+
-
+
common— applied to both themes +
+ -
+
light— light mode only +
+ -
+
dark— dark mode only +
+
-
+
-
+
OrganizationMemberDetail-root+
+ -
+
OrganizationMemberDetail-header+
+ -
+
OrganizationMemberDetail-tabs+
+ -
+
OrganizationMemberDetail-detailsTab+
+ -
+
OrganizationMemberDetail-rolesTab+
+
Example:
+
+
+
+ TypeScript Definitions
+
+
+
+ + Complete TypeScript interface definitions for all prop types: +
++ + {/* Complete Integration Example */} +
Complete Integration Example
+
+ The component requires an Auth0Provider and an{' '}
+ Auth0ComponentProvider in the React tree. Set{' '}
+ interactiveErrorHandler="popup" on Auth0Provider so step-up auth
+ challenges (triggered by removing the member or mutating roles) can be resolved without
+ losing page state.
+
+ + {/* Advanced Customization */} +
Advanced Customization
++ The OrganizationMemberDetail component is composed of smaller subcomponents and + hooks. You can import them individually to build custom workflows. +
+Available Subcomponents
+OrganizationMemberEditDetailsTab — User profile card + remove-from-org
+ danger zone
+ +
OrganizationMemberEditRolesTab — Role table with assign and remove
+ controls
+ +
OrganizationMemberAssignRolesModal — Role selector modal
+ +
OrganizationMemberRemoveRoleModal — Single-role removal confirmation
+ +
MemberRemoveFromOrgModal — Member removal confirmation modal
+ +
OrganizationMemberDetailView — Stateless view layer (bring your own data
+ via useOrganizationMemberDetail)
+ Available Hooks
+useOrganizationMemberDetail — Full data + interaction layer: member
+ query, role queries, modal state, and all event handlers
+ 
+ 
+