Manage an Organization Member on Web

The OrganizationMemberDetail component gives your customers a focused view of a single Auth0 Organization member. Organization administrators can review the member’s user profile, assign and remove roles, and remove the member from the Organization—all in a two-tab layout with full lifecycle controls. This component is the per-member drill-down for the OrganizationMemberManagement component. Wire that component’s viewMemberDetailsAction to the route that renders OrganizationMemberDetail; the userId it receives flows through to this component’s required userId prop.

React
Next.js
shadcn

Setup requirements

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

Removing the member and mutating roles are sensitive operations that trigger a step-up authentication challenge. Configure your Auth0Provider with interactiveErrorHandler="popup" so the challenge resolves in a popup without losing page state.

Install the component

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.

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—@auth0/universal-components-react/spa for React.

Get started

Pass a userId from your route to the component. Wire onBack to your router so the back button returns to the member list.

React SPA

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

export function MemberDetailPage() {
  const { userId } = useParams<{ userId: string }>();
  const navigate = useNavigate();

  return (
    <OrganizationMemberDetail
      userId={userId!}
      onBack={() => navigate("/members")}
    />
  );
}

Full integration example

import React from "react";
import { OrganizationMemberDetail } from "@auth0/universal-components-react";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate, useParams } from "react-router-dom";
import { auditLog } from "./lib/audit-log";

function MemberDetailPage() {
  const { userId } = useParams<{ userId: string }>();
  const navigate = useNavigate();

  return (
    <div className="max-w-3xl mx-auto p-6">
      <OrganizationMemberDetail
        userId={userId!}
        onBack={() => navigate("/members")}
        removeFromOrganizationAction={{
          onBefore: async () =>
            confirm("Remove this member from the organization?"),
          onAfter: () => navigate("/members"),
        }}
        assignRolesAction={{
          onAfter: ({ userId: memberId, roleIds }) => {
            auditLog.record({
              action: "roles_assigned",
              userId: memberId,
              roleIds,
            });
          },
        }}
        removeRolesAction={{
          onAfter: ({ userId: memberId, roleIds }) => {
            auditLog.record({
              action: "roles_removed",
              userId: memberId,
              roleIds,
            });
          },
        }}
        customMessages={{
          member: {
            detail: {
              back_button: "Back to Members",
              roles: { assign_button: "Assign Roles" },
            },
          },
        }}
        styling={{
          variables: {
            light: { "--color-primary": "#4f46e5" },
            dark: { "--color-primary": "#818cf8" },
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "YOUR_TENANT.auth0.com";
  const clientId = "YOUR_CLIENT_ID";

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{ redirect_uri: window.location.origin }}
      interactiveErrorHandler="popup"
    >
      <Auth0ComponentProvider domain={domain}>
        <MemberDetailPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Required props

Prop	Type	Description
`userId`	`string`	Auth0 user ID of the member to display (for example, `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`	Disable role management and member removal actions. Default: `false`
`hideHeader`	`boolean`	Hide 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 this to your router.
`removeFromOrganizationAction`	`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.

onBackType: () => voidFires 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 renders OrganizationMemberManagement.Example:

// Navigate to a fixed route
<OrganizationMemberDetail userId={userId} onBack={() => navigate("/members")} />

// Or pop the history stack instead
<OrganizationMemberDetail userId={userId} onBack={() => history.back()} />

removeFromOrganizationActionType: 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 authentication challenge. Configure your Auth0Provider with interactiveErrorHandler="popup".

Properties:

disabled—Hide the remove button.
onBefore(userId)—Runs before the member is removed. Return false to cancel.
onAfter(userId)—Runs after the member is removed. Use this to navigate away or write to an audit log.

Example:

<OrganizationMemberDetail
  userId={userId}
  removeFromOrganizationAction={{
    onBefore: async () => confirm("Remove this member from the organization?"),
    onAfter: (removedUserId) => {
      auditLog.record({ action: "member_removed", userId: removedUserId });
      navigate("/members");
    },
  }}
/>

assignRolesActionType: 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 false to cancel.
onAfter({ userId, roleIds })—Runs after the roles are assigned.

Example:

<OrganizationMemberDetail
  userId={userId}
  assignRolesAction={{
    onAfter: ({ userId: memberId, roleIds }) => {
      auditLog.record({
        action: "roles_assigned",
        userId: memberId,
        roleIds,
      });
      analytics.track("Roles Assigned", { count: roleIds.length });
    },
  }}
/>

removeRolesActionType: 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 })—Runs before the roles are removed. Return false to cancel.
onAfter({ userId, roleIds })—Runs after the roles are removed.

Example:

<OrganizationMemberDetail
  userId={userId}
  removeRolesAction={{
    onBefore: async ({ roleIds }) =>
      confirm(`Remove ${roleIds.length} role(s) from this member?`),
    onAfter: ({ userId: memberId, roleIds }) => {
      auditLog.record({ action: "roles_removed", userId: memberId, roleIds });
    },
  }}
/>

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: {} }`

customMessagesCustomize 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

member.detail—Header and tabs

back_button
tabs.details, tabs.roles

member.detail.user_details—Profile card

title
name, email
created_at, last_login

member.detail.actions.remove_from_organization—Remove member

title, description, button
modal.title, modal.description
modal.cancel_button, modal.confirm_button
success

member.detail.roles—Roles tab

title, description
assign_button
table.name, table.description
table.empty_message
table.remove_button_label

member.detail.roles.assign_modal—Assign roles modal

title, description
roles_label, roles_placeholder
submit_button, cancel_button
no_roles_available

member.detail.error—API responses

fetch_failed, fetch_roles_failed
remove_from_organization_failed
assign_role_failed, remove_role_failed

<OrganizationMemberDetail
  userId={userId}
  customMessages={{
    member: {
      detail: {
        back_button: "Back to Members",
        tabs: { details: "Profile", roles: "Permissions" },
        roles: {
          assign_button: "Add Permission",
          table: { empty_message: "No permissions assigned yet." },
        },
        actions: {
          remove_from_organization: {
            title: "Remove from Organization",
            button: "Remove",
            modal: {
              title: "Remove Member",
              confirm_button: "Yes, Remove",
            },
          },
        },
      },
    },
  }}
/>

stylingCustomize 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 utility or design-system classes without forking the source.

Available Styling Options

Variables—CSS custom properties

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

Classes—Component class overrides

OrganizationMemberDetail-root
OrganizationMemberDetail-header
OrganizationMemberDetail-tabs
OrganizationMemberDetail-detailsTab
OrganizationMemberDetail-rolesTab
MemberRemoveFromOrgModal-dialogContent
OrganizationMemberRemoveRoleModal-dialogContent
OrganizationMemberAssignRolesModal-dialogContent

<OrganizationMemberDetail
  userId={userId}
  styling={{
    variables: {
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "OrganizationMemberDetail-root": "max-w-3xl mx-auto",
      "OrganizationMemberDetail-header": "mb-6",
      "OrganizationMemberDetail-rolesTab": "mt-4",
    },
  }}
/>

Advanced customization

The OrganizationMemberDetail component is composed of smaller subcomponents and hooks. Import them individually to build custom workflows.

Available subcomponents

Subcomponent	Description
`OrganizationMemberEditDetailsTab`	User profile card plus the remove-from-organization 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

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

Hook	Description
`useOrganizationMemberDetail`	Data + interaction layer: member query, role queries, modal state, and all event handlers

Setup requirements

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

Removing the member and mutating roles are sensitive operations that trigger a step-up authentication challenge. Configure your Auth0 SDK with interactiveErrorHandler="popup" so the challenge resolves in a popup without losing page state.

Install component

npm install @auth0/universal-components-react

pnpm add @auth0/universal-components-react

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

Get started

Pass a userId from your dynamic route segment to the component. Wire onBack to your router so the back button returns to the member list.

page.tsx

// app/members/[userId]/page.tsx
"use client";

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

export default function MemberDetailPage() {
  const { userId } = useParams<{ userId: string }>();
  const router = useRouter();

  return (
    <OrganizationMemberDetail
      userId={userId}
      onBack={() => router.push("/members")}
    />
  );
}

Full integration example

// app/members/[userId]/page.tsx
"use client";

import React from "react";
import { OrganizationMemberDetail } from "@auth0/universal-components-react";
import { useRouter, useParams } from "next/navigation";
import { auditLog } from "@/lib/audit-log";

export default function MemberDetailPage() {
  const { userId } = useParams<{ userId: string }>();
  const router = useRouter();

  return (
    <div className="max-w-3xl mx-auto p-6">
      <OrganizationMemberDetail
        userId={userId}
        onBack={() => router.push("/members")}
        removeFromOrganizationAction={{
          onBefore: async () =>
            confirm("Remove this member from the organization?"),
          onAfter: () => router.push("/members"),
        }}
        assignRolesAction={{
          onAfter: ({ userId: memberId, roleIds }) => {
            auditLog.record({
              action: "roles_assigned",
              userId: memberId,
              roleIds,
            });
          },
        }}
        removeRolesAction={{
          onAfter: ({ userId: memberId, roleIds }) => {
            auditLog.record({
              action: "roles_removed",
              userId: memberId,
              roleIds,
            });
          },
        }}
        customMessages={{
          member: {
            detail: {
              back_button: "Back to Members",
              roles: { assign_button: "Assign Roles" },
            },
          },
        }}
        styling={{
          variables: {
            light: { "--color-primary": "#4f46e5" },
            dark: { "--color-primary": "#818cf8" },
          },
        }}
      />
    </div>
  );
}

Wrap your application with the RWA provider in the root layout:

layout.tsx

// app/layout.tsx
import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Auth0ComponentProvider domain="YOUR_TENANT.auth0.com">
          {children}
        </Auth0ComponentProvider>
      </body>
    </html>
  );
}

Props

Required props

Prop	Type	Description
`userId`	`string`	Auth0 user ID of the member to display (for example, `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`	Disable role management and member removal actions. Default: `false`
`hideHeader`	`boolean`	Hide the component header. Default: `false`

Action props

Prop	Type	Description
`onBack`	`() => void`	Called when the user clicks the back button in the header. Wire this to your router.
`removeFromOrganizationAction`	`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.

// Navigate to a fixed route
<OrganizationMemberDetail
  userId={userId}
  onBack={() => router.push("/members")}
/>

// Or pop the history stack instead
<OrganizationMemberDetail userId={userId} onBack={() => router.back()} />

removeFromOrganizationActionType: 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 authentication challenge. Configure your Auth0 SDK with interactiveErrorHandler="popup".

Properties:

disabled—Hide the remove button.
onBefore(userId)—Runs before the member is removed. Return false to cancel.
onAfter(userId)—Runs after the member is removed. Use this to navigate away or write to an audit log.

Example:

<OrganizationMemberDetail
  userId={userId}
  removeFromOrganizationAction={{
    onBefore: async () => confirm("Remove this member from the organization?"),
    onAfter: (removedUserId) => {
      auditLog.record({ action: "member_removed", userId: removedUserId });
      router.push("/members");
    },
  }}
/>

disabled—Hide the assign-roles button.
onBefore({ userId, roleIds })—Validate the selection. Return false to cancel.
onAfter({ userId, roleIds })—Runs after the roles are assigned.

Example:

<OrganizationMemberDetail
  userId={userId}
  assignRolesAction={{
    onAfter: ({ userId: memberId, roleIds }) => {
      auditLog.record({
        action: "roles_assigned",
        userId: memberId,
        roleIds,
      });
      analytics.track("Roles Assigned", { count: roleIds.length });
    },
  }}
/>

disabled—Hide the remove-role buttons in the role table.
onBefore({ userId, roleIds })—Runs before the roles are removed. Return false to cancel.
onAfter({ userId, roleIds })—Runs after the roles are removed.

Example:

<OrganizationMemberDetail
  userId={userId}
  removeRolesAction={{
    onBefore: async ({ roleIds }) =>
      confirm(`Remove ${roleIds.length} role(s) from this member?`),
    onAfter: ({ userId: memberId, roleIds }) => {
      auditLog.record({ action: "roles_removed", userId: memberId, roleIds });
    },
  }}
/>

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: {} }`

Available Messages

member.detail—Header and tabs

back_button
tabs.details, tabs.roles

member.detail.user_details—Profile card

title
name, email
created_at, last_login

member.detail.actions.remove_from_organization—Remove member

title, description, button
modal.title, modal.description
modal.cancel_button, modal.confirm_button
success

member.detail.roles—Roles tab

title, description
assign_button
table.name, table.description
table.empty_message
table.remove_button_label

member.detail.roles.assign_modal—Assign roles modal

title, description
roles_label, roles_placeholder
submit_button, cancel_button
no_roles_available

member.detail.error—API responses

fetch_failed, fetch_roles_failed
remove_from_organization_failed
assign_role_failed, remove_role_failed

<OrganizationMemberDetail
  userId={userId}
  customMessages={{
    member: {
      detail: {
        back_button: "Back to Members",
        tabs: { details: "Profile", roles: "Permissions" },
        roles: {
          assign_button: "Add Permission",
          table: { empty_message: "No permissions assigned yet." },
        },
        actions: {
          remove_from_organization: {
            title: "Remove from Organization",
            button: "Remove",
            modal: {
              title: "Remove Member",
              confirm_button: "Yes, Remove",
            },
          },
        },
      },
    },
  }}
/>

Available Styling Options

Variables—CSS custom properties

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

Classes—Component class overrides

OrganizationMemberDetail-root
OrganizationMemberDetail-header
OrganizationMemberDetail-tabs
OrganizationMemberDetail-detailsTab
OrganizationMemberDetail-rolesTab
MemberRemoveFromOrgModal-dialogContent
OrganizationMemberRemoveRoleModal-dialogContent
OrganizationMemberAssignRolesModal-dialogContent

<OrganizationMemberDetail
  userId={userId}
  styling={{
    variables: {
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "OrganizationMemberDetail-root": "max-w-3xl mx-auto",
      "OrganizationMemberDetail-header": "mb-6",
      "OrganizationMemberDetail-rolesTab": "mt-4",
    },
  }}
/>

Advanced customization

The OrganizationMemberDetail component is composed of smaller subcomponents and hooks. Import them individually to build custom workflows.

Available subcomponents

Subcomponent	Description
`OrganizationMemberEditDetailsTab`	User profile card plus the remove-from-organization 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

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

Hook	Description
`useOrganizationMemberDetail`	Data + interaction layer: member query, role queries, modal state, and all event handlers

Setup requirements

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

Install the component

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

npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-member-detail

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

The CLI installs the React component source code in your src/components/auth0/ directory along with all UI dependencies and the core package.

Get started

Pass a userId from your route to the component. Wire onBack to your router so the back button returns to the member list.

import { OrganizationMemberDetail } from "@/components/auth0/my-organization/organization-member-detail";
import { useNavigate, useParams } from "react-router-dom";

export function MemberDetailPage() {
  const { userId } = useParams<{ userId: string }>();
  const navigate = useNavigate();

  return (
    <OrganizationMemberDetail
      userId={userId!}
      onBack={() => navigate("/members")}
    />
  );
}

Full integration example

import React from "react";
import { OrganizationMemberDetail } from "@/components/auth0/my-organization/organization-member-detail";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate, useParams } from "react-router-dom";
import { auditLog } from "./lib/audit-log";

function MemberDetailPage() {
  const { userId } = useParams<{ userId: string }>();
  const navigate = useNavigate();

  return (
    <div className="max-w-3xl mx-auto p-6">
      <OrganizationMemberDetail
        userId={userId!}
        onBack={() => navigate("/members")}
        removeFromOrganizationAction={{
          onBefore: async () =>
            confirm("Remove this member from the organization?"),
          onAfter: () => navigate("/members"),
        }}
        assignRolesAction={{
          onAfter: ({ userId: memberId, roleIds }) => {
            auditLog.record({
              action: "roles_assigned",
              userId: memberId,
              roleIds,
            });
          },
        }}
        removeRolesAction={{
          onAfter: ({ userId: memberId, roleIds }) => {
            auditLog.record({
              action: "roles_removed",
              userId: memberId,
              roleIds,
            });
          },
        }}
        customMessages={{
          member: {
            detail: {
              back_button: "Back to Members",
              roles: { assign_button: "Assign Roles" },
            },
          },
        }}
        styling={{
          variables: {
            light: { "--color-primary": "#4f46e5" },
            dark: { "--color-primary": "#818cf8" },
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "YOUR_TENANT.auth0.com";
  const clientId = "YOUR_CLIENT_ID";

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{ redirect_uri: window.location.origin }}
      interactiveErrorHandler="popup"
    >
      <Auth0ComponentProvider domain={domain}>
        <MemberDetailPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Required props

Prop	Type	Description
`userId`	`string`	Auth0 user ID of the member to display (for example, `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`	Disable role management and member removal actions. Default: `false`
`hideHeader`	`boolean`	Hide the component header. Default: `false`

Action props

Prop	Type	Description
`onBack`	`() => void`	Called when the user clicks the back button in the header. Wire this to your router.
`removeFromOrganizationAction`	`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.

// Navigate to a fixed route
<OrganizationMemberDetail userId={userId} onBack={() => navigate("/members")} />

// Or pop the history stack instead
<OrganizationMemberDetail userId={userId} onBack={() => history.back()} />

removeFromOrganizationActionType: 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 authentication challenge. Configure your Auth0Provider with interactiveErrorHandler="popup".

Properties:

disabled—Hide the remove button.
onBefore(userId)—Runs before the member is removed. Return false to cancel.
onAfter(userId)—Runs after the member is removed. Use this to navigate away or write to an audit log.

Example:

<OrganizationMemberDetail
  userId={userId}
  removeFromOrganizationAction={{
    onBefore: async () => confirm("Remove this member from the organization?"),
    onAfter: (removedUserId) => {
      auditLog.record({ action: "member_removed", userId: removedUserId });
      navigate("/members");
    },
  }}
/>

disabled—Hide the assign-roles button.
onBefore({ userId, roleIds })—Validate the selection. Return false to cancel.
onAfter({ userId, roleIds })—Runs after the roles are assigned.

Example:

<OrganizationMemberDetail
  userId={userId}
  assignRolesAction={{
    onAfter: ({ userId: memberId, roleIds }) => {
      auditLog.record({
        action: "roles_assigned",
        userId: memberId,
        roleIds,
      });
      analytics.track("Roles Assigned", { count: roleIds.length });
    },
  }}
/>

disabled—Hide the remove-role buttons in the role table.
onBefore({ userId, roleIds })—Runs before the roles are removed. Return false to cancel.
onAfter({ userId, roleIds })—Runs after the roles are removed.

Example:

<OrganizationMemberDetail
  userId={userId}
  removeRolesAction={{
    onBefore: async ({ roleIds }) =>
      confirm(`Remove ${roleIds.length} role(s) from this member?`),
    onAfter: ({ userId: memberId, roleIds }) => {
      auditLog.record({ action: "roles_removed", userId: memberId, roleIds });
    },
  }}
/>

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: {} }`

Available Messages

member.detail—Header and tabs

back_button
tabs.details, tabs.roles

member.detail.user_details—Profile card

title
name, email
created_at, last_login

member.detail.actions.remove_from_organization—Remove member

title, description, button
modal.title, modal.description
modal.cancel_button, modal.confirm_button
success

member.detail.roles—Roles tab

title, description
assign_button
table.name, table.description
table.empty_message
table.remove_button_label

member.detail.roles.assign_modal—Assign roles modal

title, description
roles_label, roles_placeholder
submit_button, cancel_button
no_roles_available

member.detail.error—API responses

fetch_failed, fetch_roles_failed
remove_from_organization_failed
assign_role_failed, remove_role_failed

<OrganizationMemberDetail
  userId={userId}
  customMessages={{
    member: {
      detail: {
        back_button: "Back to Members",
        tabs: { details: "Profile", roles: "Permissions" },
        roles: {
          assign_button: "Add Permission",
          table: { empty_message: "No permissions assigned yet." },
        },
        actions: {
          remove_from_organization: {
            title: "Remove from Organization",
            button: "Remove",
            modal: {
              title: "Remove Member",
              confirm_button: "Yes, Remove",
            },
          },
        },
      },
    },
  }}
/>

Available Styling Options

Variables—CSS custom properties

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

Classes—Component class overrides

OrganizationMemberDetail-root
OrganizationMemberDetail-header
OrganizationMemberDetail-tabs
OrganizationMemberDetail-detailsTab
OrganizationMemberDetail-rolesTab
MemberRemoveFromOrgModal-dialogContent
OrganizationMemberRemoveRoleModal-dialogContent
OrganizationMemberAssignRolesModal-dialogContent

<OrganizationMemberDetail
  userId={userId}
  styling={{
    variables: {
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "OrganizationMemberDetail-root": "max-w-3xl mx-auto",
      "OrganizationMemberDetail-header": "mb-6",
      "OrganizationMemberDetail-rolesTab": "mt-4",
    },
  }}
/>

Advanced customization

The OrganizationMemberDetail component is composed of smaller subcomponents and hooks. Because the shadcn CLI installs the source into your project, you can import them individually to build custom workflows.

Available subcomponents

Subcomponent	Description
`OrganizationMemberEditDetailsTab`	User profile card plus the remove-from-organization 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

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

Hook	Description
`useOrganizationMemberDetail`	Data + interaction layer: member query, role queries, modal state, and all event handlers

Web Components

iOS Components

Android Components

Manage an Organization Member on Web

Setup requirements

Install the component

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Install component

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Install the component

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

​Setup requirements

​Install the component

​Get started

​Props

​Required props

​Display props

​Action props

​Customization props

​Advanced customization

​Available subcomponents

​Available hooks

​Setup requirements

​Install component

​Get started

​Props

​Required props

​Display props

​Action props

​Customization props

​Advanced customization

​Available subcomponents

​Available hooks

​Setup requirements

​Install the component

​Get started

​Props

​Required props

​Display props

​Action props

​Customization props

​Advanced customization

​Available subcomponents

​Available hooks

Setup requirements

Install the component

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Install component

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Install the component

Get started

Props

Required props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks