feat: enhance MembersTab with Better Auth integration

- Added functionality to manage member invitations, including fetching and displaying pending invitations.
- Implemented user role checks to restrict member removal and invitation cancellation to organization owners.
- Updated invite handling to refresh the invitations list after sending new invites.
- Enhanced organization context to support asynchronous ownership checks.
- Improved error handling and user feedback with toast notifications for various actions.

Author: 0xdevcollins

app/(landing)/accept-invitation/[invitationId]/page.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { authClient } from '@/lib/auth-client';
+import { toast } from 'sonner';
+import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
+
+export default function AcceptInvitationPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [status, setStatus] = useState<'loading' | 'success' | 'error'>(
+    'loading'
+  );
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const invitationId = params.invitationId as string;
+
+  useEffect(() => {
+    const acceptInvitation = async () => {
+      if (!invitationId) {
+        setStatus('error');
+        setErrorMessage('No invitation ID provided');
+        return;
+      }
+
+      try {
+        const result = await authClient.organization.acceptInvitation({
+          invitationId,
+        });
+
+        if (result.data) {
+          // Extract organizationId from the response structure
+          // Better Auth returns: { invitation: {...}, member: {...} }
+          const response = result.data as {
+            invitation?: { organizationId: string };
+            member?: { organizationId: string };
+          };
+
+          const organizationId =
+            response.invitation?.organizationId ||
+            response.member?.organizationId;
+
+          if (!organizationId) {
+            throw new Error('Organization ID not found in response');
+          }
+
+          toast.success('Invitation accepted! Redirecting...');
+          setStatus('success');
+
+          setTimeout(() => {
+            router.push(`/organizations/${organizationId}`);
+          }, 1500);
+        } else {
+          throw new Error('Failed to accept invitation');
+        }
+      } catch (error) {
+        console.error('Error accepting invitation:', error);
+        const message =
+          error instanceof Error
+            ? error.message
+            : 'Failed to accept invitation. It may be expired or invalid.';
+        setErrorMessage(message);
+        toast.error(message);
+        setStatus('error');
+      }
+    };
+
+    acceptInvitation();
+  }, [invitationId, router]);
+
+  return (
+    <div className='flex min-h-screen items-center justify-center bg-black'>
+      <div className='w-full max-w-md rounded-xl border border-zinc-800 bg-zinc-900/50 p-8 text-center backdrop-blur-sm'>
+        {status === 'loading' && (
+          <div className='space-y-4'>
+            <Loader2 className='text-primary mx-auto h-12 w-12 animate-spin' />
+            <h1 className='text-2xl font-semibold text-white'>
+              Accepting Invitation
+            </h1>
+            <p className='text-zinc-400'>
+              Please wait while we process your invitation...
+            </p>
+          </div>
+        )}
+
+        {status === 'success' && (
+          <div className='space-y-4'>
+            <CheckCircle2 className='mx-auto h-12 w-12 text-green-500' />
+            <h1 className='text-2xl font-semibold text-white'>
+              Invitation Accepted!
+            </h1>
+            <p className='text-zinc-400'>
+              Redirecting you to the organization...
+            </p>
+          </div>
+        )}
+
+        {status === 'error' && (
+          <div className='space-y-4'>
+            <XCircle className='mx-auto h-12 w-12 text-red-500' />
+            <h1 className='text-2xl font-semibold text-white'>
+              Failed to Accept Invitation
+            </h1>
+            <p className='text-zinc-400'>
+              {errorMessage || 'The invitation may be expired or invalid.'}
+            </p>
+            <button
+              onClick={() => router.push('/organizations')}
+              className='bg-primary hover:bg-primary/90 mt-4 rounded-lg px-6 py-2 text-white transition-colors'
+            >
+              Go to Organizations
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

components/organization/tabs/MembersTab.tsx

@@ -1,12 +1,18 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { BoundlessButton } from '@/components/buttons';
 import { useOrganization } from '@/lib/providers/OrganizationProvider';
+import {
+  removeBetterAuthMember,
+  listBetterAuthInvitations,
+  cancelBetterAuthInvitation,
+} from '@/lib/api/better-auth-organization';
 import EmailInviteSection from './MembersTab/EmailInviteSection';
 import PermissionsTable from './MembersTab/PermissionsTable';
 import TeamManagementSection from './MembersTab/TeamManagementSection';
 import { toast } from 'sonner';
+import { X, Mail, Clock } from 'lucide-react';
 
 interface Member {
   id: string;
@@ -18,6 +24,17 @@ interface Member {
   status: 'active' | 'pending' | 'suspended';
 }
 
+interface Invitation {
+  id: string;
+  email: string;
+  role: string;
+  status: string;
+  expiresAt: Date;
+  createdAt?: Date;
+  organizationId: string;
+  inviterId: string;
+}
+
 interface MembersTabProps {
   onSave?: (members: Member[]) => void;
 }
@@ -28,11 +45,22 @@ export default function MembersTab({ onSave }: MembersTabProps) {
     activeOrgId,
     updateOrganizationMembers,
     inviteMember,
-    removeMember,
     assignRole,
     isLoading,
+    isOwner,
+    refreshOrganization,
   } = useOrganization();
 
+  const [userIsOwner, setUserIsOwner] = useState(false);
+  useEffect(() => {
+    const checkUserIsOwner = async () => {
+      const checkIsOwner = await isOwner(activeOrgId || undefined);
+      setUserIsOwner(checkIsOwner);
+      console.log('userIsOwner', checkIsOwner);
+    };
+    checkUserIsOwner();
+  }, [activeOrgId]);
+
   const members: Member[] = useMemo(() => {
     const emails = activeOrg?.members ?? [];
     return emails.map((email, idx) => ({
@@ -44,15 +72,53 @@ export default function MembersTab({ onSave }: MembersTabProps) {
       status: 'active',
     }));
   }, [activeOrg?.members]);
+
   const [inviteEmails, setInviteEmails] = useState<string[]>([]);
   const [emailInput, setEmailInput] = useState('');
   const [hasUserChanges, setHasUserChanges] = useState(false);
+  const [invitations, setInvitations] = useState<Invitation[]>([]);
+  const [loadingInvitations, setLoadingInvitations] = useState(false);
+  const [cancelingInvitation, setCancelingInvitation] = useState<string | null>(
+    null
+  );
+
+  // Fetch invitations when component mounts or activeOrg changes
+  useEffect(() => {
+    const fetchInvitations = async () => {
+      if (!activeOrg?.betterAuthOrgId) return;
+
+      setLoadingInvitations(true);
+      try {
+        const data = await listBetterAuthInvitations(activeOrg.betterAuthOrgId);
+        setInvitations(data || []);
+      } catch (error) {
+        console.error('Error fetching invitations:', error);
+        toast.error('Failed to load invitations');
+      } finally {
+        setLoadingInvitations(false);
+      }
+    };
+
+    fetchInvitations();
+  }, [activeOrg?.betterAuthOrgId]);
 
-  const handleInvite = () => {
+  const handleInvite = async () => {
     if (inviteEmails.length > 0 && activeOrgId) {
-      inviteMember(activeOrgId, inviteEmails);
+      await inviteMember(activeOrgId, inviteEmails);
       setInviteEmails([]);
       setEmailInput('');
+
+      // Refresh invitations list after sending new invites
+      if (activeOrg?.betterAuthOrgId) {
+        try {
+          const data = await listBetterAuthInvitations(
+            activeOrg.betterAuthOrgId
+          );
+          setInvitations(data || []);
+        } catch (error) {
+          console.error('Error refreshing invitations:', error);
+        }
+      }
     }
   };
 
@@ -73,11 +139,76 @@ export default function MembersTab({ onSave }: MembersTabProps) {
     }
   };
 
-  const handleRemoveMember = (memberId: string) => {
-    if (!activeOrgId) return;
-    const m = members.find(x => x.id === memberId);
-    if (!m) return;
-    removeMember(activeOrgId, m.email);
+  const handleRemoveMember = async (memberId: string) => {
+    if (!activeOrgId) {
+      toast.error('No organization selected');
+      return;
+    }
+
+    // Check if user is owner
+    const userIsOwner = await isOwner(activeOrgId);
+    if (!userIsOwner) {
+      toast.error('Only organization owners can remove members');
+      return;
+    }
+
+    const member = members.find(x => x.id === memberId);
+    if (!member) {
+      toast.error('Member not found');
+      return;
+    }
+
+    try {
+      // Check if organization uses Better Auth
+      if (activeOrg?.betterAuthOrgId) {
+        // Use Better Auth API
+        await removeBetterAuthMember(member.email, activeOrg.betterAuthOrgId);
+        toast.success(`${member.email} has been removed from the organization`);
+      } else {
+        // Fallback to custom API for legacy organizations
+        toast.error(
+          'This organization does not support Better Auth member removal'
+        );
+        return;
+      }
+
+      // Refresh organization data to reflect changes
+      await refreshOrganization();
+      setHasUserChanges(true);
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : String(error);
+      toast.error(`Failed to remove member: ${msg}`);
+      console.error('Error removing member:', error);
+    }
+  };
+
+  const handleCancelInvitation = async (invitationId: string) => {
+    if (!activeOrgId) {
+      toast.error('No organization selected');
+      return;
+    }
+
+    // Check if user is owner
+    const userIsOwner = await isOwner(activeOrgId);
+    if (!userIsOwner) {
+      toast.error('Only organization owners can cancel invitations');
+      return;
+    }
+
+    setCancelingInvitation(invitationId);
+    try {
+      await cancelBetterAuthInvitation(invitationId);
+      toast.success('Invitation cancelled successfully');
+
+      // Remove invitation from local state
+      setInvitations(prev => prev.filter(inv => inv.id !== invitationId));
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : String(error);
+      toast.error(`Failed to cancel invitation: ${msg}`);
+      console.error('Error canceling invitation:', error);
+    } finally {
+      setCancelingInvitation(null);
+    }
   };
 
   const handleSave = async () => {
@@ -100,6 +231,74 @@ export default function MembersTab({ onSave }: MembersTabProps) {
         onInvite={handleInvite}
       />
 
+      {/* Pending Invitations Section */}
+      {activeOrg?.betterAuthOrgId && (
+        <div className='space-y-4'>
+          <div className='flex items-center justify-between'>
+            <h3 className='text-lg font-semibold text-white'>
+              Pending Invitations
+            </h3>
+            {loadingInvitations && (
+              <span className='text-sm text-zinc-400'>Loading...</span>
+            )}
+          </div>
+
+          {invitations.length > 0 ? (
+            <div className='space-y-2'>
+              {invitations.map(invitation => (
+                <div
+                  key={invitation.id}
+                  className='flex items-center justify-between rounded-lg border border-zinc-800 bg-zinc-900/50 p-4'
+                >
+                  <div className='flex items-center gap-3'>
+                    <div className='flex h-10 w-10 items-center justify-center rounded-full bg-zinc-800'>
+                      <Mail className='h-5 w-5 text-zinc-400' />
+                    </div>
+                    <div>
+                      <p className='font-medium text-white'>
+                        {invitation.email}
+                      </p>
+                      <div className='flex items-center gap-2 text-sm text-zinc-400'>
+                        <span>Role: {invitation.role}</span>
+                        <span>•</span>
+                        <div className='flex items-center gap-1'>
+                          <Clock className='h-3 w-3' />
+                          <span>
+                            Expires:{' '}
+                            {new Date(
+                              invitation.expiresAt
+                            ).toLocaleDateString()}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  {userIsOwner}
+                  {userIsOwner && (
+                    <button
+                      onClick={() => handleCancelInvitation(invitation.id)}
+                      disabled={cancelingInvitation === invitation.id}
+                      className='flex items-center gap-2 rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-2 text-sm text-red-400 transition-colors hover:bg-red-500/20 disabled:opacity-50'
+                      title='Cancel invitation'
+                    >
+                      <X className='h-4 w-4' />
+                      {cancelingInvitation === invitation.id
+                        ? 'Canceling...'
+                        : 'Cancel'}
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className='rounded-lg border border-zinc-800 bg-zinc-900/50 p-8 text-center'>
+              <Mail className='mx-auto mb-2 h-8 w-8 text-zinc-600' />
+              <p className='text-sm text-zinc-400'>No pending invitations</p>
+            </div>
+          )}
+        </div>
+      )}
+
       <PermissionsTable />
 
       <TeamManagementSection