Better Auth UI

The <OrganizationMembersCard> component provides a comprehensive interface for managing organization members, including inviting new members, updating roles, and removing members.

Usage

import { OrganizationMembersCard } from '@daveyplate/better-auth-ui'

export function OrganizationMembersPage() {
  return (
    <OrganizationMembersCard />
  )
}

Features

Member List: View all organization members with their roles
Invite Members: Send email invitations to new members
Role Management: Update member roles (owner, admin, member, custom)
Remove Members: Remove members from the organization
Permission Control: Actions based on user permissions

Reference

Prop	Type	Default
`action?`	`(() => unknown)`	-
`localization?`	`Partial<{ INVALID_USERNAME_OR_PASSWORD: string; EMAIL_NOT_VERIFIED: string; UNEXPECTED_ERROR: string; USERNAME_IS_ALREADY_TAKEN: string; USERNAME_TOO_SHORT: string; USERNAME_TOO_LONG: string; ... 355 more ...; SLUG_DOES_NOT_MATCH: string; }>`	-
`variant?`	`"default" \| "destructive"`	-
`optimistic?`	`boolean`	-
`isPending?`	`boolean`	-
`disabled?`	`boolean`	-
`isSubmitting?`	`boolean`	-
`actionLabel?`	`any`	-
`instructions?`	`any`	-
`description?`	`any`	-
`title?`	`any`	-
`classNames?`	`SettingsCardClassNames`	-
`className?`	`string`	-
`children?`	`any`	-

Examples

Basic Usage

<OrganizationMembersCard />

With Custom Class Names

<OrganizationMembersCard 
  classNames={{
    base: "shadow-lg",
    cell: "hover:bg-accent",
    button: "rounded-full"
  }}
/>

With Custom Localization

<OrganizationMembersCard 
  localization={{
    MEMBERS: "Team Members",
    INVITE_MEMBER: "Add Team Member",
    OWNER: "Team Owner",
    ADMIN: "Team Admin",
    MEMBER: "Team Member"
  }}
/>

Member Management Features

Member Display

Each member shows:

User avatar and name
Email address
Current role
Actions dropdown (based on permissions)

Role Hierarchy

Owner: Full control, can transfer ownership
Admin: Can manage members and settings
Member: Basic access
Custom Roles: Additional roles defined in configuration

Invite Process

Enter email address
Select role for new member
Send invitation
Member receives email with invitation link
Member accepts invitation to join

Permissions

Actions are permission-based:

Invite Members: Requires invitation:create permission
Update Roles: Requires member:update permission
Remove Members: Requires member:delete permission

Requirements

Enable organization plugin with proper configuration:

providers.tsx

<AuthUIProvider
  authClient={authClient}
  organization={{
    customRoles: [
      { role: "developer", label: "Developer" },
      { role: "viewer", label: "Viewer" },
      { role: "billing", label: "Billing Admin" }
    ]
  }}
>
  {children}
</AuthUIProvider>

Invite Member Dialog

Email input with validation
Role selection dropdown
Send invitation with loading state

Update Role Dialog

Current member display
Role selection
Update with confirmation

Remove Member Dialog

Confirmation prompt
Member details display
Remove action with loading state

Best Practices

Role Assignment: Assign minimal necessary permissions
Regular Audits: Review member list periodically
Invitation Expiry: Set reasonable expiration for invites
Owner Protection: Prevent accidental owner removal
Clear Labels: Use descriptive role names

<OrganizationMembersCard>

On this page