Merge pull request #42 from yusufipk/feat/invitation-signup-flow

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

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

@@ -9,17 +9,25 @@ 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,
+  isSafeRelativePath,
+} 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 +58,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') {
@@ -82,8 +92,10 @@ function LoginFormInner({ googleEnabled, githubEnabled }: LoginFormInnerProps) {
         return;
       }
 
+      // `result.url` is whatever next-auth resolved, so it is sanitized again here — and
+      // re-checked at the sink, because `router.push` happily leaves the origin.
       const destination = getSafeCallbackUrl(result?.url || callbackUrl);
-      router.push(destination);
+      router.push(isSafeRelativePath(destination) ? destination : '/dashboard');
       router.refresh();
     } catch {
       setError('Something went wrong. Please try again.');
@@ -105,7 +117,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 +258,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,40 @@
 import { isInviteCodeRequired } from '@/lib/feature-flags';
+import { getInvitationPreviewByToken } from '@/lib/invitations';
+import { isInvitationPreviewAllowed } from '@/lib/invitation-preview-limit';
 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();
+
+  // Unauthenticated invitation lookup — throttled per IP (and per token) before it can
+  // touch the database. When throttled we skip the lookup instead of guessing at a verdict.
+  const previewAllowed = token ? await isInvitationPreviewAllowed(token) : false;
+  const preview = token && previewAllowed ? 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}
+      invitationLookupThrottled={Boolean(token) && !previewAllowed}
     />
   );
 }

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

@@ -9,24 +9,52 @@ 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;
+  /** Preview lookup was rate-limited, so `invitation` says nothing about its validity. */
+  invitationLookupThrottled?: boolean;
 }
 
 export default function RegisterPageClient({
   requireInviteCode,
   googleEnabled,
   githubEnabled,
+  invitation = null,
+  invitationLookupThrottled = false,
 }: 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 +119,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 +135,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 +233,29 @@ 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 && invitationLookupThrottled ? (
+                <div className="p-3 rounded-md bg-amber-500/10 text-sm">
+                  We couldn&apos;t check this invitation right now. Please wait a few minutes and
+                  open the link again.
+                </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 +310,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 +363,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>

app/api/auth/register/route.ts

@@ -135,7 +135,13 @@ export async function POST(request: NextRequest) {
     // Send verification email if SMTP is configured
     if (emailVerificationRequired) {
       const verificationToken = await createVerificationToken(normalizedEmail);
-      await sendVerificationEmail(normalizedEmail, verificationToken);
+      // Invited users are sent back to the invitation after verifying, which forwards them
+      // to the workspace/project they joined instead of the generic dashboard.
+      await sendVerificationEmail(normalizedEmail, verificationToken, {
+        next: validatedInvitationToken
+          ? `/invitations/accept?token=${encodeURIComponent(validatedInvitationToken)}`
+          : undefined,
+      });
     }
 
     const message = emailVerificationRequired

app/api/auth/verify-email/route.ts

@@ -3,6 +3,7 @@ import { consumeVerificationToken } from '@/lib/email-verification';
 import { rateLimit } from '@/lib/rate-limit';
 import { logError } from '@/lib/logger';
 import { getPublicOrigin } from '@/lib/request-origin';
+import { getSafeCallbackUrl } from '@/lib/safe-redirect';
 
 // A raw 32-byte hex token is exactly 64 characters.
 const TOKEN_REGEX = /^[0-9a-f]{64}$/;
@@ -31,7 +32,15 @@ export async function GET(request: NextRequest) {
       return redirectTo('/login?error=InvalidVerificationToken');
     }
 
-    return redirectTo('/login?verified=true');
+    // Keep the post-verification destination (e.g. an invitation) if one was carried along.
+    const next = getSafeCallbackUrl(request.nextUrl.searchParams.get('next'), {
+      origin,
+      fallback: '',
+    });
+
+    return redirectTo(
+      next ? `/login?verified=true&callbackUrl=${encodeURIComponent(next)}` : '/login?verified=true'
+    );
   } catch (err) {
     logError('Email verification error:', err);
     return redirectTo('/login?error=VerificationFailed');

app/invitations/accept/invitation-landing.tsx

@@ -0,0 +1,200 @@
+import Link from 'next/link';
+import { Video, UserPlus, LogIn, MailWarning } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import type { InvitationPreview } from '@/lib/invitations';
+
+interface InvitationLandingProps {
+  token: string;
+  preview: InvitationPreview | null;
+}
+
+function Shell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 bg-background">
+      <div className="w-full max-w-md">
+        <Link href="/" className="flex items-center justify-center gap-2 mb-8">
+          <Video className="h-8 w-8 text-primary" />
+          <span className="font-bold text-2xl">OpenFrame</span>
+        </Link>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function UnusableInvitation({ title, message }: { title: string; message: string }) {
+  return (
+    <Shell>
+      <Card>
+        <CardHeader className="text-center">
+          <CardTitle className="flex items-center justify-center gap-2">
+            <MailWarning className="h-5 w-5 text-amber-500" />
+            {title}
+          </CardTitle>
+          <CardDescription>{message}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Button asChild className="w-full">
+            <Link href="/login">Sign in</Link>
+          </Button>
+          <p className="text-center text-sm text-muted-foreground">
+            Ask whoever invited you to send a new invitation link.
+          </p>
+        </CardContent>
+      </Card>
+    </Shell>
+  );
+}
+
+/** Too many unauthenticated invitation lookups from this client — nothing was queried. */
+export function InvitationRateLimited() {
+  return (
+    <UnusableInvitation
+      title="Too many attempts"
+      message="We couldn't check this invitation right now. Please wait a few minutes and open the link again."
+    />
+  );
+}
+
+/** Signed in, but with an account whose address the invitation was not issued to. */
+export function InvitationAccountMismatch({
+  invitedEmail,
+  signedInEmail,
+}: {
+  invitedEmail: string;
+  signedInEmail: string;
+}) {
+  return (
+    <Shell>
+      <Card>
+        <CardHeader className="text-center">
+          <CardTitle className="flex items-center justify-center gap-2">
+            <MailWarning className="h-5 w-5 text-amber-500" />
+            Wrong account
+          </CardTitle>
+          <CardDescription>
+            This invitation was sent to <strong>{invitedEmail}</strong>, but you are signed in as{' '}
+            <strong>{signedInEmail}</strong>.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Button asChild className="w-full">
+            <Link href="/signout">Sign out and switch account</Link>
+          </Button>
+          <Button asChild variant="outline" className="w-full">
+            <Link href="/dashboard">Back to dashboard</Link>
+          </Button>
+          <p className="text-center text-sm text-muted-foreground">
+            After signing out, open the invitation link from your email again.
+          </p>
+        </CardContent>
+      </Card>
+    </Shell>
+  );
+}
+
+export function InvitationLanding({ token, preview }: InvitationLandingProps) {
+  const acceptPath = `/invitations/accept?token=${encodeURIComponent(token)}`;
+  const loginHref = `/login?callbackUrl=${encodeURIComponent(acceptPath)}`;
+
+  if (!preview) {
+    return (
+      <UnusableInvitation
+        title="Invitation not found"
+        message="This invitation link is invalid. It may have been revoked or replaced by a newer one."
+      />
+    );
+  }
+
+  if (preview.status === 'CANCELED') {
+    return (
+      <UnusableInvitation
+        title="Invitation revoked"
+        message="This invitation is no longer valid."
+      />
+    );
+  }
+
+  if (preview.status === 'EXPIRED' || preview.isExpired) {
+    return (
+      <UnusableInvitation
+        title="Invitation expired"
+        message={`The invitation sent to ${preview.email} has expired.`}
+      />
+    );
+  }
+
+  const registerHref =
+    `/register?invitationToken=${encodeURIComponent(token)}` +
+    `&email=${encodeURIComponent(preview.email)}` +
+    `&callbackUrl=${encodeURIComponent(acceptPath)}`;
+
+  const alreadyAccepted = preview.status === 'ACCEPTED';
+  const targetLabel = preview.targetName
+    ? `${preview.targetName} (${preview.scopeLabel})`
+    : `a ${preview.scopeLabel}`;
+
+  return (
+    <Shell>
+      <Card>
+        <CardHeader className="text-center">
+          <CardTitle>You&apos;ve been invited</CardTitle>
+          <CardDescription>
+            {preview.inviterName} invited you to join <strong>{targetLabel}</strong> on OpenFrame as{' '}
+            {preview.roleLabel}.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="rounded-md border bg-muted/40 p-3 text-sm">
+            <p className="text-muted-foreground">
+              This invitation was sent to{' '}
+              <strong className="text-foreground">{preview.email}</strong>.{' '}
+              {preview.hasAccount || alreadyAccepted ? 'Sign in with' : 'Use'} that address to
+              accept it.
+            </p>
+          </div>
+
+          {preview.hasAccount || alreadyAccepted ? (
+            <>
+              <Button asChild className="w-full">
+                <Link href={loginHref}>
+                  <LogIn className="h-4 w-4 mr-2" />
+                  Sign in to accept
+                </Link>
+              </Button>
+              {!alreadyAccepted && (
+                <p className="text-center text-sm text-muted-foreground">
+                  Wrong address?{' '}
+                  <Link href={registerHref} className="text-primary hover:underline">
+                    Create an account instead
+                  </Link>
+                </p>
+              )}
+            </>
+          ) : (
+            <>
+              <p className="text-sm text-muted-foreground">
+                You don&apos;t have an OpenFrame account yet. Create one to open this{' '}
+                {preview.scopeLabel} — we&apos;ll bring you right back here once you&apos;re signed
+                in.
+              </p>
+              <Button asChild className="w-full">
+                <Link href={registerHref}>
+                  <UserPlus className="h-4 w-4 mr-2" />
+                  Create your account
+                </Link>
+              </Button>
+              <p className="text-center text-sm text-muted-foreground">
+                Already have an account?{' '}
+                <Link href={loginHref} className="text-primary hover:underline">
+                  Sign in
+                </Link>
+              </p>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </Shell>
+  );
+}

app/invitations/accept/page.tsx

@@ -1,7 +1,13 @@
 import { redirect } from 'next/navigation';
 import { auth } from '@/lib/auth';
 import { db } from '@/lib/db';
-import { acceptInvitationTokenForUser } from '@/lib/invitations';
+import { acceptInvitationTokenForUser, getInvitationPreviewByToken } from '@/lib/invitations';
+import { isInvitationPreviewAllowed } from '@/lib/invitation-preview-limit';
+import {
+  InvitationAccountMismatch,
+  InvitationLanding,
+  InvitationRateLimited,
+} from './invitation-landing';
 
 interface InvitationAcceptPageProps {
   searchParams: Promise<{
@@ -19,14 +25,22 @@ export default async function InvitationAcceptPage({ searchParams }: InvitationA
 
   const session = await auth();
   if (!session?.user?.id) {
-    const callbackUrl = `/invitations/accept?token=${encodeURIComponent(token)}`;
-    redirect(`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`);
+    // Signed-out visitors get the invitation itself instead of a bare login form:
+    // most of them have no account yet and need to be told to create one. This is the
+    // only unauthenticated read of invitation data, so it is IP-throttled.
+    if (!(await isInvitationPreviewAllowed(token))) {
+      return <InvitationRateLimited />;
+    }
+
+    const preview = await getInvitationPreviewByToken(token);
+    return <InvitationLanding token={token} preview={preview} />;
   }
 
   const invitation = await db.invitation.findUnique({
     where: { token },
     select: {
       id: true,
+      email: true,
       status: true,
       scope: true,
       workspaceId: true,
@@ -63,7 +77,14 @@ export default async function InvitationAcceptPage({ searchParams }: InvitationA
     redirect('/dashboard?invite=expired');
   }
   if (result === 'forbidden') {
-    redirect('/dashboard?invite=wrong_account');
+    // Signed in with a different address than the one invited — say so instead of
+    // dropping the user on the dashboard with no explanation.
+    return (
+      <InvitationAccountMismatch
+        invitedEmail={invitation?.email ?? 'another address'}
+        signedInEmail={userEmail}
+      />
+    );
   }
 
   if (result === 'not_found' && invitation?.status === 'ACCEPTED') {