Add invitation acceptance and team management features

Introduces an invitation acceptance flow, including a new route, page, and UI component for handling organization invitations. Updates the sign-up process to support joining via invitation and improves the team members management UI with member listing, invitation management, and removal actions. Refactors exports and routing to support these new features.

apps/dashboard/src/main.tsx

@@ -17,6 +17,7 @@ import {
   CreateWorkflowPage,
   ErrorPage,
   IntegrationsListPage,
+  InvitationAcceptPage,
   LayoutsPage,
   OrganizationListPage,
   SettingsPage,
@@ -87,6 +88,10 @@ const router = createBrowserRouter([
             path: ROUTES.SIGNUP_ORGANIZATION_LIST,
             element: <OrganizationListPage />,
           },
+          {
+            path: ROUTES.INVITATION_ACCEPT,
+            element: <InvitationAcceptPage />,
+          },
         ],
       },
       {

apps/dashboard/src/pages/index.ts

@@ -6,6 +6,7 @@ export * from './create-layout';
 export * from './create-workflow';
 export * from './error-page';
 export * from './integrations-list-page';
+export * from './invitation-accept';
 export * from './layouts';
 export * from './organization-list';
 export * from './questionnaire-page';

apps/dashboard/src/pages/invitation-accept.tsx

@@ -0,0 +1,20 @@
+import { InvitationAccept } from '@clerk/clerk-react';
+import { AuthSideBanner } from '@/components/auth/auth-side-banner';
+import { PageMeta } from '@/components/page-meta';
+
+export function InvitationAcceptPage() {
+  return (
+    <div className="flex min-h-screen w-full flex-col md:max-w-[1100px] md:flex-row md:gap-36">
+      <PageMeta title="Accept Invitation" />
+      <div className="w-full md:w-auto">
+        <AuthSideBanner />
+      </div>
+      <div className="flex flex-1 justify-end px-4 py-8 md:items-center md:px-0 md:py-0">
+        <div className="flex w-full max-w-[500px] flex-col items-start justify-start">
+          <InvitationAccept />
+        </div>
+      </div>
+    </div>
+  );
+}
+

apps/dashboard/src/utils/better-auth/client.ts

@@ -1,9 +1,12 @@
 import { createAuthClient } from 'better-auth/client';
 import { organizationClient } from 'better-auth/client/plugins';
-import { BETTER_AUTH_BASE_URL } from '@/config';
+import { API_HOSTNAME, BETTER_AUTH_BASE_URL } from '@/config';
+
+const baseURL = BETTER_AUTH_BASE_URL || API_HOSTNAME || 'http://localhost:3000';
+const fullBaseURL = `${baseURL}/v1/better-auth`;
 
 export const authClient = createAuthClient({
-  baseURL: BETTER_AUTH_BASE_URL + '/v1/better-auth',
+  baseURL: fullBaseURL,
   plugins: [organizationClient()],
   fetchOptions: {
     credentials: 'include',

apps/dashboard/src/utils/better-auth/components/index.ts

@@ -1,7 +1,9 @@
-export * from './sign-in';
-export * from './sign-up';
+export * from './invitation-accept';
+export * from './organization-create';
+export * from './organization-dropdown';
 export * from './organization-list';
 export * from './organization-switcher';
+export * from './sign-in';
+export * from './sign-up';
+export * from './team-members';
 export * from './user-button';
-export * from './organization-dropdown';
-export * from './organization-create';

apps/dashboard/src/utils/better-auth/components/invitation-accept.tsx

@@ -0,0 +1,101 @@
+import { useCallback, useEffect, useState } from 'react';
+import { RiCloseLine, RiLoader4Line } from 'react-icons/ri';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Button } from '@/components/primitives/button';
+import { showSuccessToast } from '@/components/primitives/sonner-helpers';
+import { ROUTES } from '@/utils/routes';
+import { authClient } from '../client';
+import { useAuth } from '../index';
+
+export function InvitationAccept() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const { isSignedIn, isLoaded } = useAuth();
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const invitationId = searchParams.get('id');
+
+  const loadInvitation = useCallback(async () => {
+    if (!invitationId) {
+      setError('Invalid invitation link. No invitation ID provided.');
+      setIsLoading(false);
+
+      return;
+    }
+
+    if (!isSignedIn) {
+      sessionStorage.setItem('pendingInvitationId', invitationId);
+      navigate(`${ROUTES.SIGN_UP}?redirect=${encodeURIComponent(window.location.pathname + window.location.search)}`);
+
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      const { data: acceptData, error: acceptError } = await authClient.organization.acceptInvitation({
+        invitationId,
+      });
+
+      if (acceptError) {
+        throw new Error(acceptError.message || 'Failed to accept invitation');
+      }
+
+      const organizationId = acceptData?.invitation?.organizationId;
+      if (organizationId) {
+        await authClient.organization.setActive({
+          organizationId,
+        });
+      }
+
+      showSuccessToast('You have joined the organization', 'Invitation Accepted');
+      sessionStorage.removeItem('pendingInvitationId');
+
+      window.location.href = ROUTES.ROOT;
+    } catch (e) {
+      console.error('Failed to accept invitation:', e);
+      setError(e instanceof Error ? e.message : 'Failed to accept invitation');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [invitationId, isSignedIn, navigate]);
+
+  useEffect(() => {
+    if (isLoaded) {
+      loadInvitation();
+    }
+  }, [isLoaded, loadInvitation]);
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="text-center">
+          <RiLoader4Line className="mx-auto size-12 animate-spin text-primary-base" />
+          <h2 className="mt-6 text-xl font-semibold text-foreground-950">Accepting Invitation</h2>
+          <p className="mt-2 text-sm text-foreground-600">Please wait while we add you to the organization...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="max-w-md text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
+            <RiCloseLine className="size-8 text-destructive" />
+          </div>
+          <h2 className="mb-2 text-xl font-semibold text-foreground-950">Failed to Accept Invitation</h2>
+          <p className="mb-6 text-sm text-foreground-600">{error}</p>
+          <Button variant="secondary" mode="outline" onClick={() => navigate(ROUTES.ROOT)}>
+            Go to Dashboard
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}

apps/dashboard/src/utils/better-auth/components/sign-up.tsx

@@ -16,6 +16,9 @@ export function SignUp() {
   const [isLoading, setIsLoading] = useState(false);
   const [passwordError, setPasswordError] = useState<string | null>(null);
   const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const pendingInvitationId = sessionStorage.getItem('pendingInvitationId');
+  const hasInvitation = !!pendingInvitationId;
 
   const validatePassword = (password: string) => {
     const hasUpperCase = /[A-Z]/.test(password);
@@ -63,7 +66,7 @@ export function SignUp() {
       return;
     }
 
-    if (!organizationName.trim()) {
+    if (!hasInvitation && !organizationName.trim()) {
       setError('Organization name is required.');
       setIsLoading(false);
 
@@ -87,6 +90,14 @@ export function SignUp() {
 
       localStorage.setItem('better-auth-session-token', signUpData.token);
 
+      const storedPendingInvitationId = sessionStorage.getItem('pendingInvitationId');
+
+      if (storedPendingInvitationId) {
+        window.location.href = `${ROUTES.INVITATION_ACCEPT}?id=${storedPendingInvitationId}`;
+
+        return;
+      }
+
       const { data: orgData, error: orgError } = await authClient.organization.create({
         name: organizationName,
         slug: organizationName.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
@@ -177,20 +188,29 @@ export function SignUp() {
             Min. 8 characters, include uppercase, lowercase, number, and special character.
           </p>
         </div>
-        <div>
-          <label htmlFor="organizationName" className="mb-1 block text-sm font-medium text-gray-700">
-            Organization Name <span className="text-red-600">*</span>
-          </label>
-          <Input
-            type="text"
-            id="organizationName"
-            value={organizationName}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOrganizationName(e.target.value)}
-            placeholder="Your Company"
-            required
-            className="w-full"
-          />
-        </div>
+        {!hasInvitation && (
+          <div>
+            <label htmlFor="organizationName" className="mb-1 block text-sm font-medium text-gray-700">
+              Organization Name <span className="text-red-600">*</span>
+            </label>
+            <Input
+              type="text"
+              id="organizationName"
+              value={organizationName}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOrganizationName(e.target.value)}
+              placeholder="Your Company"
+              required
+              className="w-full"
+            />
+          </div>
+        )}
+        {hasInvitation && (
+          <div className="rounded-md bg-blue-50 p-4">
+            <p className="text-sm text-blue-700">
+              You'll be joining an organization after creating your account.
+            </p>
+          </div>
+        )}
         {error && (
           <div className="rounded-md bg-red-50 p-4" role="alert">
             <p className="text-sm text-red-600">{error}</p>