Fix auth redirect URLs: use NEXT_PUBLIC_SITE_URL instead of window.location.origin (fixes localhost in verification emails)

web/app/auth/forgot-password/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { createClient } from "@/lib/supabase/client";
+import { getBaseUrl } from "@/lib/auth-url";
 import Link from "next/link";
 import { ArrowLeft, Mail, Check } from "lucide-react";
 
@@ -18,7 +19,7 @@ export default function ForgotPasswordPage() {
     setError("");
 
     const { error } = await supabase.auth.resetPasswordForEmail(email, {
-      redirectTo: `${window.location.origin}/auth/reset-password`,
+      redirectTo: `${getBaseUrl()}/auth/reset-password`,
     });
 
     if (error) { setError(error.message); }
@@ -33,7 +34,7 @@ export default function ForgotPasswordPage() {
 
     const { error } = await supabase.auth.signInWithOtp({
       email,
-      options: { emailRedirectTo: `${window.location.origin}/auth/callback` },
+      options: { emailRedirectTo: `${getBaseUrl()}/auth/callback` },
     });
 
     if (error) { setError(error.message); }

web/app/auth/login/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { createClient } from "@/lib/supabase/client";
+import { getBaseUrl } from "@/lib/auth-url";
 import Link from "next/link";
 import { ArrowLeft, Mail } from "lucide-react";
 
@@ -24,7 +25,8 @@ export default function LoginPage() {
     if (!email) { setError("Enter your email first."); return; }
     setLoading(true); setError("");
     const { error } = await supabase.auth.signInWithOtp({
-      email, options: { emailRedirectTo: `${window.location.origin}/auth/callback` },
+      email,
+      options: { emailRedirectTo: `${getBaseUrl()}/auth/callback` },
     });
     if (error) { setError(error.message); }
     else { setMagicSent(true); }
@@ -33,7 +35,8 @@ export default function LoginPage() {
 
   async function handleOAuth(provider: "google" | "github") {
     await supabase.auth.signInWithOAuth({
-      provider, options: { redirectTo: `${window.location.origin}/auth/callback` },
+      provider,
+      options: { redirectTo: `${getBaseUrl()}/auth/callback` },
     });
   }
 

web/app/auth/signup/page.tsx

@@ -2,7 +2,9 @@
 
 import { useState } from "react";
 import { createClient } from "@/lib/supabase/client";
+import { getBaseUrl } from "@/lib/auth-url";
 import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
 
 export default function SignupPage() {
   const [email, setEmail] = useState("");
@@ -14,14 +16,21 @@ export default function SignupPage() {
 
   async function handleSignup(e: React.FormEvent) {
     e.preventDefault(); setLoading(true); setError("");
-    const { error } = await supabase.auth.signUp({ email, password });
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        emailRedirectTo: `${getBaseUrl()}/auth/callback`,
+      },
+    });
     if (error) { setError(error.message); } else { setDone(true); }
     setLoading(false);
   }
 
   async function handleOAuth(provider: "google" | "github") {
     await supabase.auth.signInWithOAuth({
-      provider, options: { redirectTo: `${window.location.origin}/auth/callback` },
+      provider,
+      options: { redirectTo: `${getBaseUrl()}/auth/callback` },
     });
   }
 
@@ -30,7 +39,7 @@ export default function SignupPage() {
       <div className="min-h-screen flex items-center justify-center bg-white px-4">
         <div className="text-center max-w-xs">
           <h2 className="text-xl font-semibold">Check your email</h2>
-          <p className="mt-2 text-sm text-zinc-500">We sent a confirmation link to {email}.</p>
+          <p className="mt-2 text-sm text-zinc-500">We sent a confirmation link to <span className="font-medium text-zinc-700">{email}</span>.</p>
           <Link href="/auth/login" className="mt-4 inline-block text-sm text-zinc-600 hover:underline">Back to login</Link>
         </div>
       </div>
@@ -41,15 +50,17 @@ export default function SignupPage() {
     <div className="min-h-screen flex items-center justify-center bg-white px-4">
       <div className="w-full max-w-sm">
         <div className="mb-8">
-          <Link href="/" className="text-sm text-zinc-400 hover:text-zinc-600">← Back</Link>
+          <Link href="/" className="inline-flex items-center gap-1.5 text-sm text-zinc-400 hover:text-zinc-600">
+            <ArrowLeft className="w-3.5 h-3.5" /> Back
+          </Link>
           <h1 className="mt-4 text-xl font-semibold">Create an account</h1>
         </div>
 
         <div className="space-y-2.5">
           <button onClick={() => handleOAuth("google")}
-            className="w-full px-4 py-2.5 border border-zinc-200 rounded-md text-sm hover:bg-zinc-50">Continue with Google</button>
+            className="w-full px-4 py-2.5 border border-zinc-200 rounded-lg text-sm hover:bg-zinc-50 transition-colors">Continue with Google</button>
           <button onClick={() => handleOAuth("github")}
-            className="w-full px-4 py-2.5 border border-zinc-200 rounded-md text-sm hover:bg-zinc-50">Continue with GitHub</button>
+            className="w-full px-4 py-2.5 border border-zinc-200 rounded-lg text-sm hover:bg-zinc-50 transition-colors">Continue with GitHub</button>
         </div>
 
         <div className="flex items-center gap-3 my-6">
@@ -58,12 +69,12 @@ export default function SignupPage() {
 
         <form onSubmit={handleSignup} className="space-y-3">
           <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required
-            placeholder="Email" className="w-full px-3 py-2.5 border border-zinc-200 rounded-md text-sm focus:outline-none focus:border-zinc-400" />
+            placeholder="Email" className="w-full px-3 py-2.5 border border-zinc-200 rounded-lg text-sm focus:outline-none focus:border-zinc-400" />
           <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required minLength={8}
-            placeholder="Password (8+ characters)" className="w-full px-3 py-2.5 border border-zinc-200 rounded-md text-sm focus:outline-none focus:border-zinc-400" />
+            placeholder="Password (8+ characters)" className="w-full px-3 py-2.5 border border-zinc-200 rounded-lg text-sm focus:outline-none focus:border-zinc-400" />
           {error && <p className="text-xs text-red-600">{error}</p>}
           <button type="submit" disabled={loading}
-            className="w-full bg-zinc-900 text-white py-2.5 rounded-md text-sm font-medium hover:bg-zinc-800 disabled:opacity-40">
+            className="w-full bg-zinc-900 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-800 disabled:opacity-40 transition-colors">
             {loading ? "Creating..." : "Create account"}
           </button>
         </form>

web/lib/auth-url.ts

@@ -0,0 +1,13 @@
+/**
+ * Get the base URL for auth redirects.
+ * Uses NEXT_PUBLIC_SITE_URL in production, falls back to window.location.origin for local dev.
+ */
+export function getBaseUrl(): string {
+  if (process.env.NEXT_PUBLIC_SITE_URL) {
+    return process.env.NEXT_PUBLIC_SITE_URL;
+  }
+  if (typeof window !== "undefined") {
+    return window.location.origin;
+  }
+  return "http://localhost:3000";
+}