feat(invitations): guide invited users without an account through sign-up

Clicking an invitation link while signed out dropped the visitor on a bare login form,
even though most invitees have no account yet and nothing on screen told them to create one.

Signed-out visitors now get the invitation itself: who invited them, which workspace/project,
which role, and which address it was sent to. The primary call to action follows whether an
account already exists for that address — "Create your account" when it does not, "Sign in to
accept" when it does.

The sign-up path carries the invitation forward, so a new account lands back on the invitation
and from there on the shared workspace/project instead of the onboarding wizard:
- the register link passes invitationToken, the invited email and a callbackUrl
- the register form locks the email to the invited address and shows what is being joined
- the verification email round-trips the destination through a sanitized `next` parameter
- login and verify-email keep the pending destination in their sign-in links

Signing in with a different address than the one invited now explains the mismatch instead of
silently redirecting to the dashboard.

Callback sanitization moves to lib/safe-redirect.ts so login, register, verify-email and the
verification route share one open-redirect guard.

app/(auth)/login/login-form.tsx

@@ -9,17 +9,21 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { signIn } from 'next-auth/react';
+import { getSafeCallbackUrl, isInvitationCallbackUrl } from '@/lib/safe-redirect';
 
-function getSafeCallbackUrl(value: string | null): string {
-  if (!value) return '/dashboard';
-  try {
-    const baseOrigin = typeof window === 'undefined' ? 'http://localhost' : window.location.origin;
-    const parsed = new URL(value, baseOrigin);
-    if (parsed.origin !== baseOrigin) return '/dashboard';
-    return `${parsed.pathname}${parsed.search}${parsed.hash}`;
-  } catch {
-    return '/dashboard';
+/**
+ * Sign-up link that carries the pending destination — and, when that destination is an
+ * invitation, the invitation token itself so the new account is bound to the invite.
+ */
+function buildRegisterHref(callbackUrl: string): string {
+  if (callbackUrl === '/dashboard') return '/register';
+
+  const params = new URLSearchParams({ callbackUrl });
+  if (isInvitationCallbackUrl(callbackUrl)) {
+    const token = new URLSearchParams(callbackUrl.split('?')[1] ?? '').get('token');
+    if (token) params.set('invitationToken', token);
   }
+  return `/register?${params.toString()}`;
 }
 
 const ERROR_MESSAGES: Record<string, string> = {
@@ -50,6 +54,8 @@ function LoginFormInner({ googleEnabled, githubEnabled }: LoginFormInnerProps) {
   const [showSuccess, setShowSuccess] = useState(false);
   const [showVerifiedSuccess, setShowVerifiedSuccess] = useState(false);
   const callbackUrl = getSafeCallbackUrl(searchParams.get('callbackUrl'));
+  const isInvitationFlow = isInvitationCallbackUrl(callbackUrl);
+  const registerHref = buildRegisterHref(callbackUrl);
 
   useEffect(() => {
     if (searchParams.get('registered') === 'true') {
@@ -105,7 +111,11 @@ function LoginFormInner({ googleEnabled, githubEnabled }: LoginFormInnerProps) {
     <Card>
       <CardHeader className="text-center">
         <CardTitle>Welcome back</CardTitle>
-        <CardDescription>Sign in to your account to continue</CardDescription>
+        <CardDescription>
+          {isInvitationFlow
+            ? 'Sign in to accept your invitation'
+            : 'Sign in to your account to continue'}
+        </CardDescription>
       </CardHeader>
       <CardContent>
         {showSuccess && (
@@ -242,7 +252,7 @@ function LoginFormInner({ googleEnabled, githubEnabled }: LoginFormInnerProps) {
 
         <p className="text-center text-sm text-muted-foreground mt-6">
           Don&apos;t have an account?{' '}
-          <Link href="/register" className="text-primary hover:underline">
+          <Link href={registerHref} className="text-primary hover:underline">
             Sign up
           </Link>
         </p>

app/(auth)/register/page.tsx

@@ -1,15 +1,34 @@
 import { isInviteCodeRequired } from '@/lib/feature-flags';
+import { getInvitationPreviewByToken } from '@/lib/invitations';
 import RegisterPageClient from './register-page-client';
 
-export default function RegisterPage() {
+interface RegisterPageProps {
+  searchParams: Promise<{ invitationToken?: string }>;
+}
+
+export default async function RegisterPage({ searchParams }: RegisterPageProps) {
   const googleEnabled = Boolean(process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET);
   const githubEnabled = Boolean(process.env.GITHUB_CLIENT_ID && process.env.GITHUB_CLIENT_SECRET);
 
+  const token = (await searchParams)?.invitationToken?.trim();
+  const preview = token ? await getInvitationPreviewByToken(token) : null;
+  const invitation =
+    preview && preview.status === 'PENDING' && !preview.isExpired
+      ? {
+          email: preview.email,
+          inviterName: preview.inviterName,
+          roleLabel: preview.roleLabel,
+          scopeLabel: preview.scopeLabel,
+          targetName: preview.targetName,
+        }
+      : null;
+
   return (
     <RegisterPageClient
       requireInviteCode={isInviteCodeRequired()}
       googleEnabled={googleEnabled}
       githubEnabled={githubEnabled}
+      invitation={invitation}
     />
   );
 }

app/(auth)/register/register-page-client.tsx

@@ -9,24 +9,49 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { getSafeCallbackUrl } from '@/lib/safe-redirect';
+
+export interface RegisterInvitation {
+  email: string;
+  inviterName: string;
+  roleLabel: string;
+  scopeLabel: string;
+  targetName: string | null;
+}
 
 interface RegisterPageClientProps {
   requireInviteCode: boolean;
   googleEnabled: boolean;
   githubEnabled: boolean;
+  invitation?: RegisterInvitation | null;
 }
 
 export default function RegisterPageClient({
   requireInviteCode,
   googleEnabled,
   githubEnabled,
+  invitation = null,
 }: RegisterPageClientProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const invitationToken = useMemo(() => searchParams.get('invitationToken') || '', [searchParams]);
-  const invitedEmail = useMemo(() => searchParams.get('email') || '', [searchParams]);
+  const invitedEmail = useMemo(
+    () => invitation?.email || searchParams.get('email') || '',
+    [invitation, searchParams]
+  );
+  // Where to send the user once they are signed in — for invitations this points back
+  // at /invitations/accept so they land on the workspace/project they were invited to
+  // instead of the onboarding wizard.
+  const callbackUrl = useMemo(
+    () => getSafeCallbackUrl(searchParams.get('callbackUrl')),
+    [searchParams]
+  );
   const isInvitationFlow = invitationToken.length > 0;
   const shouldShowInviteCode = requireInviteCode && !isInvitationFlow;
+  const loginHref =
+    callbackUrl === '/dashboard'
+      ? '/login'
+      : `/login?callbackUrl=${encodeURIComponent(callbackUrl)}`;
   const [isLoading, setIsLoading] = useState(false);
   const [oauthLoading, setOauthLoading] = useState<string | null>(null);
   const [error, setError] = useState('');
@@ -91,10 +116,11 @@ export default function RegisterPageClient({
         return;
       }
 
+      const callbackParam = `&callbackUrl=${encodeURIComponent(callbackUrl)}`;
       if (data.data?.emailVerificationRequired) {
-        router.push(`/verify-email?email=${encodeURIComponent(formData.email)}`);
+        router.push(`/verify-email?email=${encodeURIComponent(formData.email)}${callbackParam}`);
       } else {
-        router.push('/login?registered=true');
+        router.push(`/login?registered=true${callbackParam}`);
       }
     } catch {
       setError('Something went wrong. Please try again.');
@@ -106,7 +132,7 @@ export default function RegisterPageClient({
   const handleOAuthSignUp = async (provider: string) => {
     setOauthLoading(provider);
     setError('');
-    await signIn(provider, { callbackUrl: '/dashboard' });
+    await signIn(provider, { callbackUrl });
   };
 
   const hasOAuth = googleEnabled || githubEnabled;
@@ -204,9 +230,24 @@ export default function RegisterPageClient({
             )}
 
             <form onSubmit={handleRegister} className="space-y-4">
-              {isInvitationFlow ? (
-                <div className="p-3 rounded-md bg-primary/10 text-sm">
-                  You are registering via an invitation link.
+              {isInvitationFlow && invitation ? (
+                <div className="p-3 rounded-md bg-primary/10 text-sm space-y-1">
+                  <p>
+                    {invitation.inviterName} invited you to{' '}
+                    <strong>
+                      {invitation.targetName
+                        ? `${invitation.targetName} (${invitation.scopeLabel})`
+                        : `a ${invitation.scopeLabel}`}
+                    </strong>{' '}
+                    as {invitation.roleLabel}.
+                  </p>
+                  <p className="text-muted-foreground">
+                    Create your account below — you&apos;ll be taken straight to it.
+                  </p>
+                </div>
+              ) : isInvitationFlow ? (
+                <div className="p-3 rounded-md bg-amber-500/10 text-sm">
+                  This invitation link is no longer valid. Ask whoever invited you for a new one.
                 </div>
               ) : shouldShowInviteCode ? (
                 <>
@@ -261,7 +302,14 @@ export default function RegisterPageClient({
                   onChange={handleChange}
                   required
                   disabled={isLoading}
+                  readOnly={Boolean(invitation)}
+                  className={invitation ? 'bg-muted text-muted-foreground' : undefined}
                 />
+                {invitation && (
+                  <p className="text-xs text-muted-foreground">
+                    The invitation is tied to this address.
+                  </p>
+                )}
               </div>
 
               <div className="space-y-2">
@@ -307,7 +355,7 @@ export default function RegisterPageClient({
 
             <p className="text-center text-sm text-muted-foreground mt-6">
               Already have an account?{' '}
-              <Link href="/login" className="text-primary hover:underline">
+              <Link href={loginHref} className="text-primary hover:underline">
                 Sign in
               </Link>
             </p>

app/(auth)/verify-email/page.tsx

@@ -8,10 +8,16 @@ import { Video, Mail, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
+import { getSafeCallbackUrl } from '@/lib/safe-redirect';
 
 function VerifyEmailContent() {
   const searchParams = useSearchParams();
   const emailParam = searchParams.get('email') || '';
+  const callbackUrl = getSafeCallbackUrl(searchParams.get('callbackUrl'));
+  const loginHref =
+    callbackUrl === '/dashboard'
+      ? '/login'
+      : `/login?callbackUrl=${encodeURIComponent(callbackUrl)}`;
   const [resendEmail, setResendEmail] = useState(emailParam);
   const [loading, setLoading] = useState(false);
   const [sent, setSent] = useState(false);
@@ -107,7 +113,7 @@ function VerifyEmailContent() {
 
             <p className="text-center text-sm text-muted-foreground">
               Already verified?{' '}
-              <Link href="/login" className="text-primary hover:underline">
+              <Link href={loginHref} className="text-primary hover:underline">
                 Sign in
               </Link>
             </p>