Fix post-auth session handoff flow

app/auth/signup/page.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import Link from 'next/link';
-import { Suspense, type FormEvent, useEffect, useMemo, useState } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense, type FormEvent, useCallback, useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import { AuthShell } from '@/components/auth/auth-shell';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { useAuthHandoff } from '@/hooks/use-auth-handoff';
 import { authClient } from '@/lib/auth-client';
 
 function sanitizeNextPath(value: string | null) {
@@ -25,7 +26,6 @@ export default function SignUpPage() {
 }
 
 function SignUpPageContent() {
-  const router = useRouter();
   const searchParams = useSearchParams();
   const nextPath = useMemo(() => sanitizeNextPath(searchParams.get('next')), [searchParams]);
   const { data: rawSession, isPending } = authClient.useSession();
@@ -36,17 +36,27 @@ function SignUpPageContent() {
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [error, setError] = useState<string | null>(null);
+  const [handoffError, setHandoffError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
+  const [awaitingSession, setAwaitingSession] = useState(false);
 
-  useEffect(() => {
-    if (!isPending && session?.user?.id) {
-      router.replace(nextPath);
-    }
-  }, [isPending, nextPath, router, session]);
+  const handleHandoffTimeout = useCallback(() => {
+    setAwaitingSession(false);
+    setHandoffError('Authentication completed, but the session was not established on this device. Please sign in again.');
+  }, []);
+
+  const { isHandingOff, statusText } = useAuthHandoff({
+    nextPath,
+    session,
+    isPending,
+    awaitingSession,
+    onTimeout: handleHandoffTimeout
+  });
 
   const signUp = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError(null);
+    setHandoffError(null);
 
     if (password !== confirmPassword) {
       setError('Passwords do not match.');
@@ -69,7 +79,7 @@ function SignUpPageContent() {
       return;
     }
 
-    router.replace(nextPath);
+    setAwaitingSession(true);
   };
 
   return (
@@ -94,6 +104,7 @@ function SignUpPageContent() {
             value={name}
             onChange={(event) => setName(event.target.value)}
             required
+            disabled={busy || isHandingOff}
           />
         </div>
 
@@ -105,6 +116,7 @@ function SignUpPageContent() {
             value={email}
             onChange={(event) => setEmail(event.target.value)}
             required
+            disabled={busy || isHandingOff}
           />
         </div>
 
@@ -117,6 +129,7 @@ function SignUpPageContent() {
             onChange={(event) => setPassword(event.target.value)}
             required
             minLength={8}
+            disabled={busy || isHandingOff}
           />
         </div>
 
@@ -129,13 +142,16 @@ function SignUpPageContent() {
             onChange={(event) => setConfirmPassword(event.target.value)}
             required
             minLength={8}
+            disabled={busy || isHandingOff}
           />
         </div>
 
         {error ? <p className="text-sm text-[#ff9f9f]">{error}</p> : null}
+        {handoffError ? <p className="text-sm text-[#ff9f9f]">{handoffError}</p> : null}
+        {statusText ? <p className="text-sm text-[color:var(--terminal-muted)]">{statusText}</p> : null}
 
-        <Button type="submit" className="w-full" disabled={busy}>
-          {busy ? 'Creating account...' : 'Create account'}
+        <Button type="submit" className="w-full" disabled={busy || isHandingOff}>
+          {busy ? 'Creating account...' : isHandingOff ? 'Finishing sign-in...' : 'Create account'}
         </Button>
       </form>
     </AuthShell>