Fix all auth edge cases: proxy blocks+redirects properly, auth pages redirect if logged in, loading state prevents form flash, callback honors ?next param

web/app/auth/callback/route.ts

@@ -4,17 +4,18 @@ import { NextResponse } from "next/server";
 export async function GET(request: Request) {
   const requestUrl = new URL(request.url);
   const code = requestUrl.searchParams.get("code");
-  const next = requestUrl.searchParams.get("next") ?? "/dashboard-pages/dashboard";
+  const next = requestUrl.searchParams.get("next") || "/dashboard-pages/dashboard";
   const origin = requestUrl.origin;
 
   if (code) {
     const supabase = await createClient();
     const { error } = await supabase.auth.exchangeCodeForSession(code);
-
     if (!error) {
       return NextResponse.redirect(`${origin}${next}`);
     }
   }
 
-  return NextResponse.redirect(`${origin}/auth/login?error=callback_failed`);
+  // If code exchange failed, try hash-based recovery (password reset flow)
+  // Supabase sends recovery tokens as hash fragments which the client handles
+  return NextResponse.redirect(`${origin}${next}`);
 }

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

@@ -1,59 +1,57 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } 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";
+import { ArrowLeft, Mail, Check, Loader2 } from "lucide-react";
 
 export default function ForgotPasswordPage() {
   const [email, setEmail] = useState("");
   const [loading, setLoading] = useState(false);
+  const [checking, setChecking] = useState(true);
   const [sent, setSent] = useState(false);
   const [error, setError] = useState("");
   const supabase = createClient();
 
-  async function handleReset(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
+  // Redirect if already logged in (no reason to reset password)
+  useEffect(() => {
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      if (user) { window.location.href = "/dashboard-pages/settings"; }
+      else { setChecking(false); }
+    });
+  }, []);
 
+  async function handleReset(e: React.FormEvent) {
+    e.preventDefault(); setLoading(true); setError("");
     const { error } = await supabase.auth.resetPasswordForEmail(email, {
       redirectTo: `${getBaseUrl()}/auth/reset-password`,
     });
-
-    if (error) { setError(error.message); }
-    else { setSent(true); }
+    if (error) { setError(error.message); } else { setSent(true); }
     setLoading(false);
   }
 
   async function handleMagicLink(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-
+    e.preventDefault(); setLoading(true); setError("");
     const { error } = await supabase.auth.signInWithOtp({
-      email,
-      options: { emailRedirectTo: `${getBaseUrl()}/auth/callback` },
+      email, options: { emailRedirectTo: `${getBaseUrl()}/auth/callback` },
     });
-
-    if (error) { setError(error.message); }
-    else { setSent(true); }
+    if (error) { setError(error.message); } else { setSent(true); }
     setLoading(false);
   }
 
+  if (checking) {
+    return <div className="min-h-screen flex items-center justify-center bg-white"><Loader2 className="w-5 h-5 text-zinc-300 animate-spin" /></div>;
+  }
+
   if (sent) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-white px-4">
         <div className="w-full max-w-sm text-center">
-          <div className="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center mx-auto mb-4">
-            <Check className="w-6 h-6 text-emerald-600" />
-          </div>
+          <div className="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center mx-auto mb-4"><Check className="w-6 h-6 text-emerald-600" /></div>
           <h1 className="text-xl font-semibold">Check your email</h1>
-          <p className="mt-2 text-sm text-zinc-500">We sent a link to <span className="font-medium text-zinc-700">{email}</span>. Click it to continue.</p>
-          <Link href="/auth/login" className="mt-6 inline-flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-700">
-            <ArrowLeft className="w-3.5 h-3.5" /> Back to login
-          </Link>
+          <p className="mt-2 text-sm text-zinc-500">We sent a link to <span className="font-medium text-zinc-700">{email}</span>.</p>
+          <Link href="/auth/login" className="mt-6 inline-flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-700"><ArrowLeft className="w-3.5 h-3.5" /> Back to login</Link>
         </div>
       </div>
     );
@@ -63,16 +61,13 @@ export default function ForgotPasswordPage() {
     <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="/auth/login" 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 to login
-          </Link>
+          <Link href="/auth/login" 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 to login</Link>
           <h1 className="mt-4 text-xl font-semibold">Reset your password</h1>
-          <p className="mt-1 text-sm text-zinc-500">Enter your email and we will send you a reset link.</p>
+          <p className="mt-1 text-sm text-zinc-500">We will send you a reset link.</p>
         </div>
 
         <form onSubmit={handleReset} className="space-y-3">
-          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required
-            placeholder="Email address"
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required placeholder="Email address"
             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}
@@ -81,23 +76,16 @@ export default function ForgotPasswordPage() {
           </button>
         </form>
 
-        <div className="flex items-center gap-3 my-5">
-          <div className="flex-1 h-px bg-zinc-100" />
-          <span className="text-xs text-zinc-300">or</span>
-          <div className="flex-1 h-px bg-zinc-100" />
-        </div>
+        <div className="flex items-center gap-3 my-5"><div className="flex-1 h-px bg-zinc-100" /><span className="text-xs text-zinc-300">or</span><div className="flex-1 h-px bg-zinc-100" /></div>
 
         <form onSubmit={handleMagicLink}>
           <button type="submit" disabled={loading || !email}
             className="w-full flex items-center justify-center gap-2 border border-zinc-200 py-2.5 rounded-lg text-sm text-zinc-600 hover:bg-zinc-50 disabled:opacity-40 transition-colors">
-            <Mail className="w-4 h-4" />
-            Send magic link instead
+            <Mail className="w-4 h-4" /> Send magic link instead
           </button>
         </form>
 
-        <p className="mt-6 text-center text-xs text-zinc-400">
-          No account? <Link href="/auth/signup" className="text-zinc-600 hover:underline">Sign up</Link>
-        </p>
+        <p className="mt-6 text-center text-xs text-zinc-400">No account? <Link href="/auth/signup" className="text-zinc-600 hover:underline">Sign up</Link></p>
       </div>
     </div>
   );

web/app/auth/login/page.tsx

@@ -1,45 +1,63 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } 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";
+import { useSearchParams } from "next/navigation";
+import { ArrowLeft, Mail, Loader2 } from "lucide-react";
 
 export default function LoginPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [checking, setChecking] = useState(true);
   const [magicSent, setMagicSent] = useState(false);
   const supabase = createClient();
+  const searchParams = useSearchParams();
+  const next = searchParams.get("next") || "/dashboard-pages/dashboard";
+
+  // Check if already logged in — redirect immediately
+  useEffect(() => {
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      if (user) { window.location.href = next; }
+      else { setChecking(false); }
+    });
+  }, []);
 
   async function handleLogin(e: React.FormEvent) {
     e.preventDefault(); setLoading(true); setError("");
     const { error } = await supabase.auth.signInWithPassword({ email, password });
     if (error) { setError(error.message); setLoading(false); }
-    else { window.location.href = "/dashboard-pages/dashboard"; }
+    else { window.location.href = next; }
   }
 
   async function handleMagicLink() {
     if (!email) { setError("Enter your email first."); return; }
     setLoading(true); setError("");
     const { error } = await supabase.auth.signInWithOtp({
-      email,
-      options: { emailRedirectTo: `${getBaseUrl()}/auth/callback` },
+      email, options: { emailRedirectTo: `${getBaseUrl()}/auth/callback?next=${encodeURIComponent(next)}` },
     });
-    if (error) { setError(error.message); }
-    else { setMagicSent(true); }
+    if (error) { setError(error.message); } else { setMagicSent(true); }
     setLoading(false);
   }
 
   async function handleOAuth(provider: "google" | "github") {
     await supabase.auth.signInWithOAuth({
-      provider,
-      options: { redirectTo: `${getBaseUrl()}/auth/callback` },
+      provider, options: { redirectTo: `${getBaseUrl()}/auth/callback?next=${encodeURIComponent(next)}` },
     });
   }
 
+  // Show nothing while checking auth (prevents form flash)
+  if (checking) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white">
+        <Loader2 className="w-5 h-5 text-zinc-300 animate-spin" />
+      </div>
+    );
+  }
+
   if (magicSent) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-white px-4">
@@ -75,10 +93,10 @@ export default function LoginPage() {
         </div>
 
         <form onSubmit={handleLogin} 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-lg text-sm focus:outline-none focus:border-zinc-400" />
-          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required
-            placeholder="Password" 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="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-lg text-sm focus:outline-none focus:border-zinc-400" />
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Password"
+            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-lg text-sm font-medium hover:bg-zinc-800 disabled:opacity-40 transition-colors">

web/app/auth/signup/page.tsx

@@ -1,27 +1,33 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { createClient } from "@/lib/supabase/client";
 import { getBaseUrl } from "@/lib/auth-url";
 import Link from "next/link";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, Loader2 } from "lucide-react";
 
 export default function SignupPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [checking, setChecking] = useState(true);
   const [done, setDone] = useState(false);
   const supabase = createClient();
 
+  // Redirect if already logged in
+  useEffect(() => {
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      if (user) { window.location.href = "/dashboard-pages/dashboard"; }
+      else { setChecking(false); }
+    });
+  }, []);
+
   async function handleSignup(e: React.FormEvent) {
     e.preventDefault(); setLoading(true); setError("");
     const { error } = await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        emailRedirectTo: `${getBaseUrl()}/auth/callback`,
-      },
+      email, password,
+      options: { emailRedirectTo: `${getBaseUrl()}/auth/callback` },
     });
     if (error) { setError(error.message); } else { setDone(true); }
     setLoading(false);
@@ -29,11 +35,14 @@ export default function SignupPage() {
 
   async function handleOAuth(provider: "google" | "github") {
     await supabase.auth.signInWithOAuth({
-      provider,
-      options: { redirectTo: `${getBaseUrl()}/auth/callback` },
+      provider, options: { redirectTo: `${getBaseUrl()}/auth/callback` },
     });
   }
 
+  if (checking) {
+    return <div className="min-h-screen flex items-center justify-center bg-white"><Loader2 className="w-5 h-5 text-zinc-300 animate-spin" /></div>;
+  }
+
   if (done) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-white px-4">
@@ -50,28 +59,22 @@ 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="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>
+          <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-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-lg text-sm hover:bg-zinc-50 transition-colors">Continue with GitHub</button>
+          <button onClick={() => handleOAuth("google")} 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-lg text-sm hover:bg-zinc-50 transition-colors">Continue with GitHub</button>
         </div>
 
-        <div className="flex items-center gap-3 my-6">
-          <div className="flex-1 h-px bg-zinc-100" /><span className="text-xs text-zinc-300">or</span><div className="flex-1 h-px bg-zinc-100" />
-        </div>
+        <div className="flex items-center gap-3 my-6"><div className="flex-1 h-px bg-zinc-100" /><span className="text-xs text-zinc-300">or</span><div className="flex-1 h-px bg-zinc-100" /></div>
 
         <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-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-lg text-sm focus:outline-none focus:border-zinc-400" />
+          <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-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-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-lg text-sm font-medium hover:bg-zinc-800 disabled:opacity-40 transition-colors">

web/proxy.ts

@@ -1,10 +1,9 @@
 import { createServerClient } from "@supabase/ssr";
 import { NextResponse, type NextRequest } from "next/server";
 
-export function proxy(request: NextRequest) {
+export async function proxy(request: NextRequest) {
   let supabaseResponse = NextResponse.next({ request });
 
-  // Skip Supabase auth if env vars not set (local dev without Supabase)
   if (!process.env.NEXT_PUBLIC_SUPABASE_URL || !process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY) {
     return supabaseResponse;
   }
@@ -14,26 +13,39 @@ export function proxy(request: NextRequest) {
     process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY,
     {
       cookies: {
-        getAll() {
-          return request.cookies.getAll();
-        },
+        getAll() { return request.cookies.getAll(); },
         setAll(cookiesToSet) {
           cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value));
           supabaseResponse = NextResponse.next({ request });
-          cookiesToSet.forEach(({ name, value, options }) =>
-            supabaseResponse.cookies.set(name, value, options)
-          );
+          cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options));
         },
       },
     }
   );
 
-  // Refresh session tokens
-  supabase.auth.getUser();
+  // MUST await — otherwise auth check is useless
+  const { data: { user } } = await supabase.auth.getUser();
+
+  const pathname = request.nextUrl.pathname;
+  const isAuthPage = pathname.startsWith("/auth/") && !pathname.includes("callback");
+  const isDashboard = pathname.startsWith("/dashboard-pages") || pathname.startsWith("/admin");
+
+  // Logged-in user on auth pages → redirect to dashboard
+  if (user && isAuthPage) {
+    return NextResponse.redirect(new URL("/dashboard-pages/dashboard", request.url));
+  }
+
+  // Not logged in on protected pages → redirect to login
+  if (!user && isDashboard) {
+    const url = request.nextUrl.clone();
+    url.pathname = "/auth/login";
+    url.searchParams.set("next", pathname);
+    return NextResponse.redirect(url);
+  }
 
   return supabaseResponse;
 }
 
 export const config = {
-  matcher: ["/dashboard-pages/:path*", "/auth/:path*"],
+  matcher: ["/dashboard-pages/:path*", "/auth/:path*", "/admin/:path*"],
 };