Manage Organization Members on Web

The OrganizationMemberManagement component gives your customers a single tabbed interface for managing who has access to their Auth0 Organization. Organization administrators can review the current member list with assigned roles, invite new members, and manage pending invitations through the full lifecycle—create, view details, copy the invitation URL, revoke, and revoke-and-resend. With the OrganizationMemberManagement component, you do not need to orchestrate navigation, call API endpoints, or manage state. The component loads the current Organization’s members and pending invitations from the My Organization API automatically.

React
Next.js
shadcn

Setup requirements

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

Removing a member and assigning roles are sensitive mutations 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

The component has no required props.

React SPA

import { OrganizationMemberManagement } from "@auth0/universal-components-react";

export function MembersPage() {
  return <OrganizationMemberManagement />;
}

To let administrators drill into a single member, wire viewMemberDetailsAction to the route that renders the OrganizationMemberDetail component. The action receives { userId, tab }: userId flows through to that component’s required userId prop, and the optional tab tells you which tab the administrator asked for.

React SPA

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

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

  return (
    <OrganizationMemberManagement
      viewMemberDetailsAction={{
        onAfter: ({ userId }) => navigate(`/members/${userId}`),
      }}
    />
  );
}

Full integration example

import React from "react";
import { OrganizationMemberManagement } 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";
import { auditLog } from "./lib/audit-log";

function MembersPage() {
  const navigate = useNavigate();

  return (
    <div className="max-w-6xl mx-auto p-6">
      <OrganizationMemberManagement
        createInvitationAction={{
          onBefore: async (input) => !blocklist.includes(input.invitees[0].email),
          onAfter: (input) => {
            analytics.track("Invitation Sent", {
              email: input.invitees[0].email,
            });
          },
        }}
        revokeInvitationAction={{
          onAfter: () => refetchSeatUsage(),
        }}
        resendInvitationAction={{
          onAfter: (_, newInvitation) => {
            toast.success(`Invitation resent to ${newInvitation.invitee.email}`);
          },
        }}
        viewMemberDetailsAction={{
          onAfter: ({ userId, tab }) =>
            navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
        }}
        removeFromOrganizationAction={{
          onBefore: async (userId) =>
            confirm(`Remove member ${userId} from the organization?`),
          onAfter: (userId) => {
            auditLog.record({ action: "member_removed", userId });
          },
        }}
        assignRolesAction={{
          onAfter: ({ userId, roleIds }) => {
            auditLog.record({ action: "roles_assigned", userId, roleIds });
          },
        }}
        customMessages={{
          header: {
            title: "Team Members",
            description: "Manage who has access to your organization",
          },
          tabs: { members: "Members", invitations: "Pending Invites" },
        }}
        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}>
        <MembersPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

OrganizationMemberManagement has no required props. It loads the current Organization’s members and pending invitations from the My Organization API automatically.

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
`hideHeader`	`boolean`	Hide the component header section. Default: `false`
`readOnly`	`boolean`	Disable all mutation actions (invite, revoke, resend). Default: `false`

Action props

Action props handle user interactions and define what happens when users perform member and invitation operations. Use lifecycle hooks (onBefore, onAfter) to integrate with your application’s routing and analytics.

Prop	Type	Description
`createInvitationAction`	`ComponentAction<CreateInvitationInput, MemberInvitation>`	Lifecycle hooks for invitation creation.
`revokeInvitationAction`	`ComponentAction<MemberInvitation>`	Lifecycle hooks for invitation revocation.
`resendInvitationAction`	`ComponentAction<MemberInvitation, MemberInvitation>`	Lifecycle hooks for revoke-and-resend.
`viewMemberDetailsAction`	`ComponentAction<ViewMemberDetailsParams>`	Lifecycle hooks for viewing member details. Input is `{ userId, tab }`, where the optional `tab` is `'details'` or `'roles'`. Use `onAfter` to navigate to the member detail page.
`removeFromOrganizationAction`	`ComponentAction<string>`	Lifecycle hooks for member removal. Input is the `userId`.
`assignRolesAction`	`ComponentAction<{ userId: string; roleIds: string[] }>`	Lifecycle hooks for role assignment to members.

createInvitationActionType: ComponentAction<CreateInvitationInput, MemberInvitation>Controls the invitation-creation flow. Fires when an administrator submits the “Invite member” modal. Use onBefore to validate the invitee list (for example, against a blocklist) and onAfter to track analytics or refetch dependent data.Properties:

disabled—Hide the “Invite member” button entirely.
onBefore(input)—Runs before the invitation is sent. Return false to cancel. input.invitees is the array of invitees being created (one per row in the modal).
onAfter(input, createdInvitation)—Runs after the invitation is successfully created. Receives both the original input and the created invitation record.

Example:

<OrganizationMemberManagement
  createInvitationAction={{
    onBefore: async (input) => {
      // Validate against a blocklist before sending
      return !blocklist.includes(input.invitees[0].email);
    },
    onAfter: (input) => {
      analytics.track("Invitation Sent", { email: input.invitees[0].email });
    },
  }}
/>

revokeInvitationActionType: ComponentAction<MemberInvitation>Controls the invitation-revoke flow. Fires when an administrator revokes a pending invitation from the invitation list. Receives the invitation record being revoked.Properties:

disabled—Hide the revoke option in the invitation row menu.
onBefore(invitation)—Runs before the invitation is revoked. Return false to cancel.
onAfter(invitation)—Runs after the invitation is revoked. Use this to refresh state outside the component.

Example:

<OrganizationMemberManagement
  revokeInvitationAction={{
    onBefore: (invitation) =>
      confirm(`Revoke invitation for ${invitation.invitee.email}?`),
    onAfter: () => refetchSeatUsage(),
  }}
/>

resendInvitationActionType: ComponentAction<MemberInvitation, MemberInvitation>Controls the revoke-and-resend flow. The component revokes the original invitation and creates a new one with the same details. onAfter receives both the old and the new invitation.Properties:

disabled—Hide the resend option in the invitation row menu.
onBefore(invitation)—Runs before the invitation is resent. Return false to cancel.
onAfter(originalInvitation, newInvitation)—Runs after the new invitation is sent.

Example:

<OrganizationMemberManagement
  resendInvitationAction={{
    onAfter: (original, newInvitation) => {
      toast.success(`Invitation resent to ${newInvitation.invitee.email}`);
      analytics.track("Invitation Resent", { email: original.invitee.email });
    },
  }}
/>

viewMemberDetailsActionType: ComponentAction<ViewMemberDetailsParams>Fires when an administrator requests the per-member detail view from the member list. Receives a ViewMemberDetailsParams object—the member’s userId, plus an optional tab ('details' or 'roles') when the request targets a specific tab. The standard wiring is to navigate to the route that renders OrganizationMemberDetail; userId flows through to its required userId prop.Properties:

disabled—Hide the “View details” entry in the row’s actions menu.
onAfter({ userId, tab })—Runs after the user requests the detail view. Wire this to your router. When tab is present, carry it into the destination URL so the detail view opens on the requested tab.

Example:

<OrganizationMemberManagement
  viewMemberDetailsAction={{
    onAfter: ({ userId, tab }) => {
      analytics.track("Member Details Viewed", { userId, tab });
      navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`);
    },
  }}
/>

removeFromOrganizationActionType: ComponentAction<string>Controls the remove-from-organization flow on a specific member row. 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 option in the row menu.
onBefore(userId)—Runs before the member is removed. Return false to cancel.
onAfter(userId)—Runs after the member is removed. Use this to refresh seat usage or write to an audit log.

Example:

<OrganizationMemberManagement
  removeFromOrganizationAction={{
    onBefore: async (userId) =>
      confirm(`Remove member ${userId} from the organization?`),
    onAfter: (userId) => {
      auditLog.record({ action: "member_removed", userId });
      refetchMemberList();
    },
  }}
/>

assignRolesActionType: ComponentAction<{ userId: string; roleIds: string[] }>Fires after an administrator assigns one or more roles to a member from the row’s role modal. Both lifecycle hooks receive an object with the userId and the array of roleIds being assigned.Properties:

disabled—Hide the assign-roles option.
onBefore({ userId, roleIds })—Validate the selection. Return false to cancel.
onAfter({ userId, roleIds })—Runs after the roles are assigned. Use this to write to an audit log or refresh role badges.

Example:

<OrganizationMemberManagement
  assignRolesAction={{
    onBefore: ({ roleIds }) => {
      if (roleIds.includes("admin") && roleIds.includes("viewer")) {
        toast.error("Admin and Viewer cannot be assigned together");
        return false;
      }
      return true;
    },
    onAfter: ({ userId, roleIds }) => {
      auditLog.record({ action: "roles_assigned", userId, 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<OrganizationMemberManagementMessages>`	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

header—Component header

title, description

tabs—Tab labels

members, invitations

member.table—Member table display

columns.name, columns.roles, columns.last_login
empty_message, search_placeholder
filter_by_role, all_roles

member.actions—Member row actions

assign_roles, remove_from_organization, view_details

member.assign_roles—Assign roles modal

title, description
roles_label, roles_placeholder
submit_button, cancel_button

member.remove_from_organization—Remove member confirmation

title, description
confirm_button, cancel_button

invitation.table—Invitation table display

columns.email, columns.status, columns.inviter
columns.created_at, columns.expires_at, columns.roles
empty_message, search_placeholder
filter_by_role, all_roles
status_pending, status_expired

invitation.create—Create invitation modal

title, description
email_label, email_placeholder
roles_label, provider_label
submit_button, cancel_button

invitation.details—Invitation details drawer

title, email_label, status_label
roles_label, provider_label
copy_url_button, revoke_button, resend_button

invitation.error / invitation.success—API responses

error.fetch_failed, error.create_failed, error.revoke_failed
success.url_copied, success.invitation_resent

<OrganizationMemberManagement
  customMessages={{
    header: {
      title: "Team Members",
      description: "Manage who has access to your organization",
    },
    tabs: { members: "Members", invitations: "Pending Invites" },
    member: {
      table: {
        empty_message: "No members yet.",
        search_placeholder: "Search by name or email...",
      },
      actions: {
        assign_roles: "Assign Roles",
        remove_from_organization: "Remove",
      },
    },
    invitation: {
      table: { empty_message: "No pending invitations." },
      create: { title: "Invite a team member", submit_button: "Send Invite" },
    },
  }}
/>

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

OrganizationMemberManagement-root
OrganizationMemberManagement-header
OrganizationMemberManagement-tabs
OrganizationMemberManagement-tableActions
OrganizationMemberTab-table
OrganizationInvitationTab-table
OrganizationInvitationTab-createModal
OrganizationInvitationTab-detailsModal
OrganizationInvitationTab-revokeModal
OrganizationInvitationTab-revokeResendModal

<OrganizationMemberManagement
  styling={{
    variables: {
      common: { "--font-size-title": "1.5rem" },
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "OrganizationMemberManagement-root": "rounded-xl border shadow-sm",
      "OrganizationMemberManagement-header": "mb-4",
      "OrganizationInvitationTab-table": "mt-4",
    },
  }}
/>

Advanced customization

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

Available subcomponents

Subcomponent	Description
`OrganizationMemberTable`	Member list with sorting, filtering, role badges, and actions menu
`OrganizationMemberAssignRolesModal`	Modal for assigning roles to members
`OrganizationMemberRemoveFromOrgModal`	Confirmation modal for member removal
`OrganizationInvitationTable`	Invitation list with sorting, filtering, and pagination
`OrganizationInvitationCreateModal`	Modal for sending new invitations
`OrganizationInvitationDetailsModal`	Drawer showing full invitation details with copy URL, resend, and revoke
`OrganizationInvitationRevokeModal`	Confirmation modal for revoke and revoke-and-resend
`OrganizationMemberManagementView`	Stateless view layer—bring your own data via `useOrganizationMemberManagement`

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
`useOrganizationMemberManagement`	Data + interaction layer: tab state, member and invitation 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 a member and assigning roles are sensitive mutations 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

The component has no required props.

page.tsx

// app/members/page.tsx
"use client";

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

export default function MembersPage() {
  const router = useRouter();

  return (
    <OrganizationMemberManagement
      viewMemberDetailsAction={{
        onAfter: ({ userId }) => router.push(`/members/${userId}`),
      }}
    />
  );
}

Full integration example

// app/members/page.tsx
"use client";

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

export default function MembersPage() {
  const router = useRouter();

  return (
    <div className="max-w-6xl mx-auto p-6">
      <OrganizationMemberManagement
        createInvitationAction={{
          onAfter: (input) => {
            analytics.track("Invitation Sent", {
              email: input.invitees[0].email,
            });
          },
        }}
        revokeInvitationAction={{
          onAfter: () => refetchSeatUsage(),
        }}
        viewMemberDetailsAction={{
          onAfter: ({ userId, tab }) =>
            router.push(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
        }}
        removeFromOrganizationAction={{
          onBefore: async (userId) =>
            confirm(`Remove member ${userId} from the organization?`),
          onAfter: (userId) => {
            auditLog.record({ action: "member_removed", userId });
          },
        }}
        assignRolesAction={{
          onAfter: ({ userId, roleIds }) => {
            auditLog.record({ action: "roles_assigned", userId, roleIds });
          },
        }}
        customMessages={{
          header: {
            title: "Team Members",
            description: "Manage who has access to your organization",
          },
          tabs: { members: "Members", invitations: "Pending Invites" },
        }}
        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

OrganizationMemberManagement has no required props. It loads the current Organization’s members and pending invitations from the My Organization API automatically.

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
`hideHeader`	`boolean`	Hide the component header section. Default: `false`
`readOnly`	`boolean`	Disable all mutation actions (invite, revoke, resend). Default: `false`

Action props

Prop	Type	Description
`createInvitationAction`	`ComponentAction<CreateInvitationInput, MemberInvitation>`	Lifecycle hooks for invitation creation.
`revokeInvitationAction`	`ComponentAction<MemberInvitation>`	Lifecycle hooks for invitation revocation.
`resendInvitationAction`	`ComponentAction<MemberInvitation, MemberInvitation>`	Lifecycle hooks for revoke-and-resend.
`viewMemberDetailsAction`	`ComponentAction<ViewMemberDetailsParams>`	Lifecycle hooks for viewing member details. Input is `{ userId, tab }`, where the optional `tab` is `'details'` or `'roles'`. Use `onAfter` to navigate to the member detail page.
`removeFromOrganizationAction`	`ComponentAction<string>`	Lifecycle hooks for member removal. Input is the `userId`.
`assignRolesAction`	`ComponentAction<{ userId: string; roleIds: string[] }>`	Lifecycle hooks for role assignment to members.

disabled—Hide the “Invite member” button entirely.
onBefore(input)—Runs before the invitation is sent. Return false to cancel. input.invitees is the array of invitees being created (one per row in the modal).
onAfter(input, createdInvitation)—Runs after the invitation is successfully created. Receives both the original input and the created invitation record.

Example:

<OrganizationMemberManagement
  createInvitationAction={{
    onBefore: async (input) => !blocklist.includes(input.invitees[0].email),
    onAfter: (input) => {
      analytics.track("Invitation Sent", { email: input.invitees[0].email });
    },
  }}
/>

disabled—Hide the revoke option in the invitation row menu.
onBefore(invitation)—Runs before the invitation is revoked. Return false to cancel.
onAfter(invitation)—Runs after the invitation is revoked. Use this to refresh state outside the component.

Example:

<OrganizationMemberManagement
  revokeInvitationAction={{
    onBefore: (invitation) =>
      confirm(`Revoke invitation for ${invitation.invitee.email}?`),
    onAfter: () => refetchSeatUsage(),
  }}
/>

disabled—Hide the resend option in the invitation row menu.
onBefore(invitation)—Runs before the invitation is resent. Return false to cancel.
onAfter(originalInvitation, newInvitation)—Runs after the new invitation is sent.

Example:

<OrganizationMemberManagement
  resendInvitationAction={{
    onAfter: (original, newInvitation) => {
      toast.success(`Invitation resent to ${newInvitation.invitee.email}`);
      analytics.track("Invitation Resent", { email: original.invitee.email });
    },
  }}
/>

disabled—Hide the “View details” entry in the row’s actions menu.
onAfter({ userId, tab })—Runs after the user requests the detail view. Wire this to your router. When tab is present, carry it into the destination URL so the detail view opens on the requested tab.

Example:

<OrganizationMemberManagement
  viewMemberDetailsAction={{
    onAfter: ({ userId, tab }) => {
      analytics.track("Member Details Viewed", { userId, tab });
      router.push(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`);
    },
  }}
/>

removeFromOrganizationActionType: ComponentAction<string>Controls the remove-from-organization flow on a specific member row. 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 option in the row menu.
onBefore(userId)—Runs before the member is removed. Return false to cancel.
onAfter(userId)—Runs after the member is removed. Use this to refresh seat usage or write to an audit log.

Example:

<OrganizationMemberManagement
  removeFromOrganizationAction={{
    onBefore: async (userId) =>
      confirm(`Remove member ${userId} from the organization?`),
    onAfter: (userId) => {
      auditLog.record({ action: "member_removed", userId });
      refetchMemberList();
    },
  }}
/>

disabled—Hide the assign-roles option.
onBefore({ userId, roleIds })—Validate the selection. Return false to cancel.
onAfter({ userId, roleIds })—Runs after the roles are assigned. Use this to write to an audit log or refresh role badges.

Example:

<OrganizationMemberManagement
  assignRolesAction={{
    onBefore: ({ roleIds }) => {
      if (roleIds.includes("admin") && roleIds.includes("viewer")) {
        toast.error("Admin and Viewer cannot be assigned together");
        return false;
      }
      return true;
    },
    onAfter: ({ userId, roleIds }) => {
      auditLog.record({ action: "roles_assigned", userId, 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<OrganizationMemberManagementMessages>`	Override any default UI text or translations. Default: `{}`
`styling`	`ComponentStyling`	CSS variables and class overrides. Default: `{ variables: {}, classes: {} }`

Available Messages

header—Component header

title, description

tabs—Tab labels

members, invitations

member.table—Member table display

columns.name, columns.roles, columns.last_login
empty_message, search_placeholder
filter_by_role, all_roles

member.actions—Member row actions

assign_roles, remove_from_organization, view_details

member.assign_roles—Assign roles modal

title, description
roles_label, roles_placeholder
submit_button, cancel_button

member.remove_from_organization—Remove member confirmation

title, description
confirm_button, cancel_button

invitation.table—Invitation table display

columns.email, columns.status, columns.inviter
columns.created_at, columns.expires_at, columns.roles
empty_message, search_placeholder
filter_by_role, all_roles
status_pending, status_expired

invitation.create—Create invitation modal

title, description
email_label, email_placeholder
roles_label, provider_label
submit_button, cancel_button

invitation.details—Invitation details drawer

title, email_label, status_label
roles_label, provider_label
copy_url_button, revoke_button, resend_button

invitation.error / invitation.success—API responses

error.fetch_failed, error.create_failed, error.revoke_failed
success.url_copied, success.invitation_resent

<OrganizationMemberManagement
  customMessages={{
    header: {
      title: "Team Members",
      description: "Manage who has access to your organization",
    },
    tabs: { members: "Members", invitations: "Pending Invites" },
    member: {
      table: {
        empty_message: "No members yet.",
        search_placeholder: "Search by name or email...",
      },
      actions: {
        assign_roles: "Assign Roles",
        remove_from_organization: "Remove",
      },
    },
    invitation: {
      table: { empty_message: "No pending invitations." },
      create: { title: "Invite a team member", submit_button: "Send Invite" },
    },
  }}
/>

Available Styling Options

Variables—CSS custom properties

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

Classes—Component class overrides

OrganizationMemberManagement-root
OrganizationMemberManagement-header
OrganizationMemberManagement-tabs
OrganizationMemberManagement-tableActions
OrganizationMemberTab-table
OrganizationInvitationTab-table
OrganizationInvitationTab-createModal
OrganizationInvitationTab-detailsModal
OrganizationInvitationTab-revokeModal
OrganizationInvitationTab-revokeResendModal

<OrganizationMemberManagement
  styling={{
    variables: {
      common: { "--font-size-title": "1.5rem" },
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "OrganizationMemberManagement-root": "rounded-xl border shadow-sm",
      "OrganizationMemberManagement-header": "mb-4",
      "OrganizationInvitationTab-table": "mt-4",
    },
  }}
/>

Advanced customization

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

Available subcomponents

Subcomponent	Description
`OrganizationMemberTable`	Member list with sorting, filtering, role badges, and actions menu
`OrganizationMemberAssignRolesModal`	Modal for assigning roles to members
`OrganizationMemberRemoveFromOrgModal`	Confirmation modal for member removal
`OrganizationInvitationTable`	Invitation list with sorting, filtering, and pagination
`OrganizationInvitationCreateModal`	Modal for sending new invitations
`OrganizationInvitationDetailsModal`	Drawer showing full invitation details with copy URL, resend, and revoke
`OrganizationInvitationRevokeModal`	Confirmation modal for revoke and revoke-and-resend
`OrganizationMemberManagementView`	Stateless view layer—bring your own data via `useOrganizationMemberManagement`

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
`useOrganizationMemberManagement`	Data + interaction layer: tab state, member and invitation 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-management

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

The component has no required props.

import { OrganizationMemberManagement } from "@/components/auth0/my-organization/organization-member-management";

export function MembersPage() {
  return <OrganizationMemberManagement />;
}

Full integration example

import React from "react";
import { OrganizationMemberManagement } from "@/components/auth0/my-organization/organization-member-management";
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";
import { auditLog } from "./lib/audit-log";

function MembersPage() {
  const navigate = useNavigate();

  return (
    <div className="max-w-6xl mx-auto p-6">
      <OrganizationMemberManagement
        createInvitationAction={{
          onAfter: (input) => {
            analytics.track("Invitation Sent", {
              email: input.invitees[0].email,
            });
          },
        }}
        viewMemberDetailsAction={{
          onAfter: ({ userId, tab }) =>
            navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
        }}
        removeFromOrganizationAction={{
          onBefore: async (userId) =>
            confirm(`Remove member ${userId} from the organization?`),
          onAfter: (userId) => {
            auditLog.record({ action: "member_removed", userId });
          },
        }}
        assignRolesAction={{
          onAfter: ({ userId, roleIds }) => {
            auditLog.record({ action: "roles_assigned", userId, roleIds });
          },
        }}
        customMessages={{
          header: { title: "Team Members" },
          tabs: { invitations: "Pending Invites" },
        }}
        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}>
        <MembersPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

OrganizationMemberManagement has no required props. It loads the current Organization’s members and pending invitations from the My Organization API automatically.

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
`hideHeader`	`boolean`	Hide the component header section. Default: `false`
`readOnly`	`boolean`	Disable all mutation actions (invite, revoke, resend). Default: `false`

Action props

Prop	Type	Description
`createInvitationAction`	`ComponentAction<CreateInvitationInput, MemberInvitation>`	Lifecycle hooks for invitation creation.
`revokeInvitationAction`	`ComponentAction<MemberInvitation>`	Lifecycle hooks for invitation revocation.
`resendInvitationAction`	`ComponentAction<MemberInvitation, MemberInvitation>`	Lifecycle hooks for revoke-and-resend.
`viewMemberDetailsAction`	`ComponentAction<ViewMemberDetailsParams>`	Lifecycle hooks for viewing member details. Input is `{ userId, tab }`, where the optional `tab` is `'details'` or `'roles'`. Use `onAfter` to navigate to the member detail page.
`removeFromOrganizationAction`	`ComponentAction<string>`	Lifecycle hooks for member removal. Input is the `userId`.
`assignRolesAction`	`ComponentAction<{ userId: string; roleIds: string[] }>`	Lifecycle hooks for role assignment to members.

disabled—Hide the “Invite member” button entirely.
onBefore(input)—Runs before the invitation is sent. Return false to cancel. input.invitees is the array of invitees being created (one per row in the modal).
onAfter(input, createdInvitation)—Runs after the invitation is successfully created. Receives both the original input and the created invitation record.

Example:

<OrganizationMemberManagement
  createInvitationAction={{
    onBefore: async (input) => !blocklist.includes(input.invitees[0].email),
    onAfter: (input) => {
      analytics.track("Invitation Sent", { email: input.invitees[0].email });
    },
  }}
/>

disabled—Hide the revoke option in the invitation row menu.
onBefore(invitation)—Runs before the invitation is revoked. Return false to cancel.
onAfter(invitation)—Runs after the invitation is revoked. Use this to refresh state outside the component.

Example:

<OrganizationMemberManagement
  revokeInvitationAction={{
    onBefore: (invitation) =>
      confirm(`Revoke invitation for ${invitation.invitee.email}?`),
    onAfter: () => refetchSeatUsage(),
  }}
/>

disabled—Hide the resend option in the invitation row menu.
onBefore(invitation)—Runs before the invitation is resent. Return false to cancel.
onAfter(originalInvitation, newInvitation)—Runs after the new invitation is sent.

Example:

<OrganizationMemberManagement
  resendInvitationAction={{
    onAfter: (original, newInvitation) => {
      toast.success(`Invitation resent to ${newInvitation.invitee.email}`);
      analytics.track("Invitation Resent", { email: original.invitee.email });
    },
  }}
/>

disabled—Hide the “View details” entry in the row’s actions menu.
onAfter({ userId, tab })—Runs after the user requests the detail view. Wire this to your router. When tab is present, carry it into the destination URL so the detail view opens on the requested tab.

Example:

<OrganizationMemberManagement
  viewMemberDetailsAction={{
    onAfter: ({ userId, tab }) => {
      analytics.track("Member Details Viewed", { userId, tab });
      navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`);
    },
  }}
/>

removeFromOrganizationActionType: ComponentAction<string>Controls the remove-from-organization flow on a specific member row. 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 option in the row menu.
onBefore(userId)—Runs before the member is removed. Return false to cancel.
onAfter(userId)—Runs after the member is removed. Use this to refresh seat usage or write to an audit log.

Example:

<OrganizationMemberManagement
  removeFromOrganizationAction={{
    onBefore: async (userId) =>
      confirm(`Remove member ${userId} from the organization?`),
    onAfter: (userId) => {
      auditLog.record({ action: "member_removed", userId });
      refetchMemberList();
    },
  }}
/>

disabled—Hide the assign-roles option.
onBefore({ userId, roleIds })—Validate the selection. Return false to cancel.
onAfter({ userId, roleIds })—Runs after the roles are assigned. Use this to write to an audit log or refresh role badges.

Example:

<OrganizationMemberManagement
  assignRolesAction={{
    onBefore: ({ roleIds }) => {
      if (roleIds.includes("admin") && roleIds.includes("viewer")) {
        toast.error("Admin and Viewer cannot be assigned together");
        return false;
      }
      return true;
    },
    onAfter: ({ userId, roleIds }) => {
      auditLog.record({ action: "roles_assigned", userId, 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<OrganizationMemberManagementMessages>`	Override any default UI text or translations. Default: `{}`
`styling`	`ComponentStyling`	CSS variables and class overrides. Default: `{ variables: {}, classes: {} }`

Available Messages

header—Component header

title, description

tabs—Tab labels

members, invitations

member.table—Member table display

columns.name, columns.roles, columns.last_login
empty_message, search_placeholder
filter_by_role, all_roles

member.actions—Member row actions

assign_roles, remove_from_organization, view_details

member.assign_roles—Assign roles modal

title, description
roles_label, roles_placeholder
submit_button, cancel_button

member.remove_from_organization—Remove member confirmation

title, description
confirm_button, cancel_button

invitation.table—Invitation table display

columns.email, columns.status, columns.inviter
columns.created_at, columns.expires_at, columns.roles
empty_message, search_placeholder
filter_by_role, all_roles
status_pending, status_expired

invitation.create—Create invitation modal

title, description
email_label, email_placeholder
roles_label, provider_label
submit_button, cancel_button

invitation.details—Invitation details drawer

title, email_label, status_label
roles_label, provider_label
copy_url_button, revoke_button, resend_button

invitation.error / invitation.success—API responses

error.fetch_failed, error.create_failed, error.revoke_failed
success.url_copied, success.invitation_resent

<OrganizationMemberManagement
  customMessages={{
    header: {
      title: "Team Members",
      description: "Manage who has access to your organization",
    },
    tabs: { members: "Members", invitations: "Pending Invites" },
    member: {
      table: {
        empty_message: "No members yet.",
        search_placeholder: "Search by name or email...",
      },
      actions: {
        assign_roles: "Assign Roles",
        remove_from_organization: "Remove",
      },
    },
    invitation: {
      table: { empty_message: "No pending invitations." },
      create: { title: "Invite a team member", submit_button: "Send Invite" },
    },
  }}
/>

Available Styling Options

Variables—CSS custom properties

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

Classes—Component class overrides

OrganizationMemberManagement-root
OrganizationMemberManagement-header
OrganizationMemberManagement-tabs
OrganizationMemberManagement-tableActions
OrganizationMemberTab-table
OrganizationInvitationTab-table
OrganizationInvitationTab-createModal
OrganizationInvitationTab-detailsModal
OrganizationInvitationTab-revokeModal
OrganizationInvitationTab-revokeResendModal

<OrganizationMemberManagement
  styling={{
    variables: {
      common: { "--font-size-title": "1.5rem" },
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "OrganizationMemberManagement-root": "rounded-xl border shadow-sm",
      "OrganizationMemberManagement-header": "mb-4",
      "OrganizationInvitationTab-table": "mt-4",
    },
  }}
/>

Advanced customization

The OrganizationMemberManagement 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
`OrganizationMemberTable`	Member list with sorting, filtering, role badges, and actions menu
`OrganizationMemberAssignRolesModal`	Modal for assigning roles to members
`OrganizationMemberRemoveFromOrgModal`	Confirmation modal for member removal
`OrganizationInvitationTable`	Invitation list with sorting, filtering, and pagination
`OrganizationInvitationCreateModal`	Modal for sending new invitations
`OrganizationInvitationDetailsModal`	Drawer showing full invitation details with copy URL, resend, and revoke
`OrganizationInvitationRevokeModal`	Confirmation modal for revoke and revoke-and-resend
`OrganizationMemberManagementView`	Stateless view layer—bring your own data via `useOrganizationMemberManagement`

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
`useOrganizationMemberManagement`	Data + interaction layer: tab state, member and invitation queries, modal state, and all event handlers

Web Components

iOS Components

Android Components

Manage Organization Members on Web

Setup requirements

Install the component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Install component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Install the component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

​Setup requirements

​Install the component

​Get started

​Props

​Display props

​Action props

​Customization props

​Advanced customization

​Available subcomponents

​Available hooks

​Setup requirements

​Install component

​Get started

​Props

​Display props

​Action props

​Customization props

​Advanced customization

​Available subcomponents

​Available hooks

​Setup requirements

​Install the component

​Get started

​Props

​Display props

​Action props

​Customization props

​Advanced customization

​Available subcomponents

​Available hooks

Setup requirements

Install the component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Install component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks

Setup requirements

Install the component

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available subcomponents

Available hooks