Manage Organization Members on Web

The OrganizationMemberManagement component provides a unified interface to manage members and invitations for your organization.

React
Next.js
shadcn

Setup requirements

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

Installation

pnpm

pnpm add @auth0/universal-components-react

Get started

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

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

To let administrators view an individual member, wire viewMemberDetailsAction to navigate to the route hosting OrganizationMemberDetail:

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

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

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

Full integration example

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

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

  return (
    <div className="max-w-5xl mx-auto p-6">
      <OrganizationMemberManagement
        createInvitationAction={{
          onBefore: (input) => {
            const email = input.invitees[0]?.email ?? "";
            return email.endsWith("@example.com");
          },
          onAfter: (input, createdInvitation) => {
            auditLog.record({
              action: "invitation_created",
              email: input.invitees[0]?.email,
              invitationId: createdInvitation.id,
            });
          },
        }}
        revokeInvitationAction={{
          onBefore: (invitations) =>
            window.confirm(`Revoke ${invitations.length} invitation(s)?`),
          onAfter: (invitations) => {
            auditLog.record({
              action: "invitations_revoked",
              count: invitations.length,
            });
          },
        }}
        resendInvitationAction={{
          onAfter: (original, newInvitation) => {
            auditLog.record({
              action: "invitation_resent",
              originalId: original.id,
              newId: newInvitation.id,
            });
          },
        }}
        viewMemberDetailsAction={{
          onAfter: ({ userId, tab }) =>
            navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
        }}
        removeFromOrganizationAction={{
          onBefore: (userId) =>
            window.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 }}
    >
      <Auth0ComponentProvider>
        <MembersPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Setup requirements

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

Installation

pnpm

pnpm add @auth0/universal-components-react

Get started

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

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

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

Full integration example

// 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
          mode="proxy"
          domain="YOUR_TENANT.auth0.com"
          proxyConfig={{ baseUrl: "/api/auth" }}
        >
          {children}
        </Auth0ComponentProvider>
      </body>
    </html>
  );
}

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

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

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

  return (
    <div className="max-w-5xl mx-auto p-6">
      <OrganizationMemberManagement
        createInvitationAction={{
          onBefore: (input) => {
            const email = input.invitees[0]?.email ?? "";
            return email.endsWith("@example.com");
          },
          onAfter: (input, createdInvitation) => {
            auditLog.record({
              action: "invitation_created",
              email: input.invitees[0]?.email,
              invitationId: createdInvitation.id,
            });
          },
        }}
        viewMemberDetailsAction={{
          onAfter: ({ userId, tab }) =>
            router.push(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
        }}
        removeFromOrganizationAction={{
          onBefore: (userId) =>
            window.confirm(`Remove member ${userId} from the organization?`),
          onAfter: (userId) => {
            auditLog.record({ action: "member_removed", userId });
            router.refresh();
          },
        }}
        assignRolesAction={{
          onAfter: ({ userId, roleIds }) => {
            auditLog.record({ action: "roles_assigned", userId, roleIds });
          },
        }}
        customMessages={{ header: { title: "Team Members" } }}
        styling={{
          variables: {
            light: { "--color-primary": "#4f46e5" },
            dark: { "--color-primary": "#818cf8" },
          },
        }}
      />
    </div>
  );
}

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-member-management

This installs the React component source code into src/components/auth0/my-organization/ along with dependencies and @auth0/universal-components-core.

Get started

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

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

  return (
    <OrganizationMemberManagement
      createInvitationAction={{
        onBefore: (input) => {
          const email = input.invitees[0]?.email ?? "";
          return email.endsWith("@example.com");
        },
        onAfter: (input, createdInvitation) => {
          auditLog.record({
            action: "invitation_created",
            email: input.invitees[0]?.email,
            invitationId: createdInvitation.id,
          });
        },
      }}
      viewMemberDetailsAction={{
        onAfter: ({ userId, tab }) =>
          navigate(tab ? `/members/${userId}?tab=${tab}` : `/members/${userId}`),
      }}
      removeFromOrganizationAction={{
        onBefore: (userId) =>
          window.confirm(`Remove member ${userId} from the organization?`),
        onAfter: (userId) => {
          auditLog.record({ action: "member_removed", userId });
          navigate("/members");
        },
      }}
      assignRolesAction={{
        onAfter: ({ userId, roleIds }) => {
          auditLog.record({ action: "roles_assigned", userId, roleIds });
        },
      }}
      customMessages={{ header: { title: "Team Members" } }}
      styling={{
        variables: {
          light: { "--color-primary": "#4f46e5" },
          dark: { "--color-primary": "#818cf8" },
        },
      }}
    />
  );
}

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 }}
    >
      <Auth0ComponentProvider>
        <MembersPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

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 (title and description). Default: `false`
`readOnly`	`boolean`	Disable all mutation actions (invite, revoke, resend, remove, assign). 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>`	Invite members action.
`revokeInvitationAction`	`ComponentAction<MemberInvitation[]>`	Revoke invitation action.
`resendInvitationAction`	`ComponentAction<MemberInvitation, MemberInvitation>`	Resend invitation action.
`viewMemberDetailsAction`	`ComponentAction<ViewMemberDetailsParams>`	View member details action.
`removeFromOrganizationAction`	`ComponentAction<string>`	Remove member action.
`assignRolesAction`	`ComponentAction`	Assign roles. Hooks receive `{ userId, roleIds }`.

createInvitationAction Type: ComponentAction<CreateInvitationInput, MemberInvitation> Controls invitation creation (up to 10 invitees per request).

onBefore(input) runs synchronously before sending. Return false to cancel.
onAfter(input, createdInvitation) runs after the invitation is created.

<OrganizationMemberManagement
  createInvitationAction={{
    onBefore: (input) => {
      const email = input.invitees[0]?.email ?? "";
      return email.endsWith("@example.com");
    },
    onAfter: (input, createdInvitation) => {
      auditLog.record({
        action: "invitation_created",
        email: input.invitees[0]?.email,
        invitationId: createdInvitation.id,
      });
    },
  }}
/>

Invitation connection routing The invitation picker lists eligible Enterprise SSO identity providers and enabled User Stores / User Directories configured for the organization. The connection selector queries both sources:

GET /my-org/identity-providers (filters for eligible member access levels)
GET /my-org/user-stores (filters for is_enabled: true)

type ConnectionOptionType = 'identity_provider' | 'user_store';

interface ConnectionOption {
  id: string;
  name: string;
  type: ConnectionOptionType;
}

The payload sent to createInvitationAction routes using exactly one applicable identifier based on the selected connection type:

Enterprise SSO connection selected: the payload populates identity_provider_id.
User Store / Directory connection selected: the payload populates user_store_id.

interface CreateInvitationInput {
  invitees: Array<{
    email: string;
    roles?: string[];
  }>;
  inviter?: {
    name?: string;
  };
  identity_provider_id?: string;
  user_store_id?: string;
  ttl_sec?: number;
}

Connection routing rules:

Auto-selection: If an organization has only one eligible connection, that connection is selected by default and remains editable.
Zero connections: If no eligible connections exist, the invitation entry point is disabled and displays explanatory feedback.
Revoke and resend: The revoke-and-resend flow preserves the original connection routing source (user_store_id or identity_provider_id).
Connection eligibility: The invitation picker includes connections configured with a limited or full member access level.

revokeInvitationAction Type: ComponentAction<MemberInvitation[]> Controls invitation revocation (supports single and bulk revocations up to 10 invitations per batch).

onBefore(invitations) confirms before revoking. Return false to cancel.
onAfter(invitations) runs after invitations are revoked.

<OrganizationMemberManagement
  revokeInvitationAction={{
    onBefore: (invitations) =>
      window.confirm(`Revoke ${invitations.length} invitation(s)?`),
    onAfter: (invitations) => {
      auditLog.record({
        action: "invitations_revoked",
        count: invitations.length,
      });
    },
  }}
/>

resendInvitationAction Type: ComponentAction<MemberInvitation, MemberInvitation> Controls the revoke-and-resend flow.

onBefore(invitation) confirms before resending. Return false to cancel.
onAfter(original, newInvitation) runs after a fresh invitation is created.

<OrganizationMemberManagement
  resendInvitationAction={{
    onAfter: (original, newInvitation) => {
      auditLog.record({
        action: "invitation_resent",
        originalId: original.id,
        newId: newInvitation.id,
      });
    },
  }}
/>

viewMemberDetailsAction Type: ComponentAction<ViewMemberDetailsParams> Fires when selecting a member row or roles badge. Receives { userId, tab }. Wire this to navigate to OrganizationMemberDetail.

onAfter({ userId, tab }) runs on selection. Preserve tab in your router URL to open the requested tab directly.

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

removeFromOrganizationAction Type: ComponentAction<string> Controls member removal from the organization (membership only; does not delete the user profile from the Auth0 user store). Both hooks receive the userId.

onBefore(userId) confirms before removal. Return false to cancel.
onAfter(userId) runs after removal.

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

assignRolesAction Type: ComponentAction<{ userId: string; roleIds: string[] }> Fires after assigning roles from the row modal. Role selections are capped at 10 roles per assignment request, and an individual member can have up to 50 total roles assigned. Both hooks receive { userId, roleIds }.

onBefore({ userId, roleIds }) validates selection. Return false to cancel.
onAfter({ userId, roleIds }) runs after roles are assigned.

<OrganizationMemberManagement
  assignRolesAction={{
    onAfter: ({ userId, roleIds }) => {
      auditLog.record({ action: "roles_assigned", userId, roleIds });
    },
  }}
/>

Customization props

Prop	Type	Description
`customMessages`	`Partial<OrganizationMemberManagementMessages>`	Copy and text overrides.
`styling`	`ComponentStyling<OrganizationMemberManagementClasses>`	CSS variables and class overrides.

customMessages Override bundled component text. Every field is optional and falls back to the built-in default.

Common message groups

header—Component header

title, description

tabs—Tab labels

members, invitations

count_capped—Capped count indicator

Text displayed when member or invitation count exceeds 1,000 items

member.table—Member table display

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

member.actions—Member row actions

menu_label, remove_from_organization, view_details

member.assign_roles—Assign roles modal

title, description
roles_label, roles_placeholder
submit_button, cancel_button, no_roles_available

member.remove_from_organization—Remove member confirmation

title, description
confirm_button, cancel_button

member.success / member.error—Member action statuses

success.removed_from_organization, success.role_assigned
error.fetch_failed, error.assign_roles_failed, error.remove_from_organization_failed

invitation.table—Invitation table display

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

invitation.actions—Invitation row actions

menu_label, view_details, copy_url, revoke_and_resend, revoke

invitation.create—Create invitation modal

title, description
email_label, email_placeholder, email_helper
email_limit_error, email_invalid_error, email_duplicate_error, email_required_error
roles_label, roles_placeholder, roles_max_selection_message, roles_searching_message
connection_label, connection_placeholder, connection_helper
connection_group_user_store, connection_group_identity_provider
submit_button, creating, cancel_button

invitation.details—Invitation details drawer

title, email_label, status_label
roles_label, connection_label
created_at_label, expires_at_label, invited_by_label, invitation_url_label
copy_url_button, close_button, revoke_button, resend_button

invitation.revoke / invitation.revoke_resend—Revocation confirmations

revoke.title, revoke.description, revoke.confirm_button, revoke.cancel_button
revoke_resend.title, revoke_resend.description, revoke_resend.confirm_button, revoke_resend.cancel_button

invitation.bulk_revoke—Bulk revocation confirmation

button, button_plural, count, count_plural, success, max_selection_message
confirm.title, confirm.title_plural, confirm.description, confirm.description_plural
confirm.confirm_button, confirm.confirm_button_plural, confirm.cancel_button

invitation.error / invitation.success—Invitation statuses and alerts

success.url_copied, success.invitation_resent
error.fetch_failed, error.fetch_roles_failed, error.create_failed
error.revoke_failed, error.resend_failed, error.revoke_resend_failed
error.bulk_revoke_failed, error.connection_required, error.copy_url_failed

<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: {
        remove_from_organization: "Remove",
      },
    },
    invitation: {
      table: { empty_message: "No pending invitations." },
      create: { title: "Invite a team member", submit_button: "Send Invite" },
    },
  }}
/>

styling Customize appearance with CSS variables and class overrides. Variables support light, dark, and common scopes. Class overrides target named slots inside the component tree.

Available styling options

Variables—CSS custom properties

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

Classes—Targeted element class overrides

OrganizationMemberManagement-root
OrganizationMemberManagement-header
OrganizationMemberManagement-tabs
OrganizationInvitationTab-root
OrganizationInvitationTab-table
OrganizationInvitationTab-createModal
OrganizationInvitationTab-detailsModal
OrganizationInvitationTab-revokeModal
OrganizationInvitationTab-revokeResendModal
OrganizationInvitationTab-bulkRevokeModal
OrganizationInvitationTab-searchInput
OrganizationInvitationTab-filterDropdown
OrganizationInvitationTab-pagination

<OrganizationMemberManagement
  styling={{
    variables: {
      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

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`	Member and invitation data, tab and pagination state, modal state, and interaction handlers.

Web Components

iOS Components

Android Components

Manage Organization Members on Web

Setup requirements

Installation

Get started

Setup requirements

Installation

Get started

Setup requirements

Installation

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available hooks

​Setup requirements

​Installation

​Get started

​Setup requirements

​Installation

​Get started

​Setup requirements

​Installation

​Get started

​Props

​Display props

​Action props

​Customization props

​Advanced customization

​Available hooks

Setup requirements

Installation

Get started

Setup requirements

Installation

Get started

Setup requirements

Installation

Get started

Props

Display props

Action props

Customization props

Advanced customization

Available hooks