<AcceptInvitationCard>

The <AcceptInvitationCard> component handles the organization invitation acceptance flow. It displays invitation details and allows users to accept or reject organization invitations.

Usage

This component is typically used on a dedicated invitation acceptance page:

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

export function AcceptInvitationPage() {
  return (
    <AcceptInvitationCard />
  )
}

Features

• Invitation Display: Shows organization details and assigned role
• Accept/Reject Actions: Allow users to accept or reject invitations
• Authentication Check: Automatically redirects to sign-in if not authenticated
• Expiration Handling: Validates invitation expiration
• Error Handling: Displays appropriate error messages

URL Parameters

The component expects an invitationId in the URL query parameters:

/auth/accept-invitation?invitationId=inv_123456

Reference

Examples

Basic Usage

// app/auth/accept-invitation/page.tsx
import { AcceptInvitationCard } from '@daveyplate/better-auth-ui'

export default function AcceptInvitationPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <AcceptInvitationCard />
    </div>
  )
}

With Custom Class Names

<AcceptInvitationCard 
  classNames={{
    base: "max-w-md",
    header: "text-center",
    button: "rounded-full"
  }}
/>

With Custom Localization

<AcceptInvitationCard 
  localization={{
    ACCEPT_INVITATION: "Join Team",
    REJECT: "Decline",
    ACCEPT: "Join"
  }}
/>

Invitation Flow

1. Email Sent: User receives invitation email with link
2. Click Link: User clicks invitation link with ID
3. Authentication: If not signed in, redirected to sign-in
4. View Invitation: Component displays organization and role
5. Accept/Reject: User chooses to accept or reject
6. Join Organization: On accept, user joins organization

Displayed Information

The card shows:

• Organization name and logo
• Organization slug/URL
• Assigned role (Owner, Admin, Member, or custom)
• Accept and reject buttons

Error States

The component handles various error scenarios:

• Invalid Invitation: Invitation ID not found
• Expired Invitation: Past expiration date
• Already Processed: Invitation already accepted/rejected
• Authentication Required: User not signed in

Security

• Invitation IDs are secure random tokens
• Server-side validation of invitation status
• Expiration dates are enforced
• User authentication is required

Integration

Set up the invitation route in your auth configuration:

// Using AuthCard with ACCEPT_INVITATION view
<AuthCard view="ACCEPT_INVITATION" />

// Or direct component usage
<AcceptInvitationCard />

Best Practices

1. Custom Domain: Use your app domain for invitation links
2. Expiration Time: Set reasonable expiration (7-14 days)
3. Email Template: Customize invitation email design
4. Success Redirect: Configure post-acceptance redirect
5. Error Pages: Handle invalid invitation gracefully