Autosave: 20260408-235134

app/auth/callback/route.ts

@@ -4,15 +4,21 @@ import { createClient } from "@/lib/supabase/server"
 export async function GET(request: Request) {
   const { searchParams, origin } = new URL(request.url)
   const code = searchParams.get("code")
+  const type = searchParams.get("type")
   const next = searchParams.get("next") ?? "/feed"
 
+  // If this is a password recovery flow, handle it specifically
+  if (type === 'recovery') {
+    return NextResponse.redirect(`${process.env.NEXT_PUBLIC_SITE_URL}/auth/update-password`)
+  }
+
   if (code) {
     const supabase = await createClient()
     const { error } = await supabase.auth.exchangeCodeForSession(code)
     if (!error) {
-      return NextResponse.redirect(`${origin}${next}`)
+      return NextResponse.redirect(`${process.env.NEXT_PUBLIC_SITE_URL}${next}`)
     }
   }
 
-  return NextResponse.redirect(`${origin}/auth/error`)
+  return NextResponse.redirect(`${process.env.NEXT_PUBLIC_SITE_URL}/auth/error`)
-}
+}

app/auth/login/page.tsx

@@ -54,8 +54,10 @@ export default function LoginPage() {
     setError(null)
 
     const supabase = createClient()
+    // Important: The redirectTo here should be the URL that Supabase sends the user to after they click the link in their email.
+    // If we want it to hit our app/auth/callback, it handles the recovery flow via the new logic.
     const { error } = await supabase.auth.resetPasswordForEmail(email, {
-      redirectTo: `${window.location.origin}/auth/callback?next=/auth/update-password`,
+      redirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback?type=recovery`,
     })
 
     if (error) {
@@ -158,4 +160,4 @@ export default function LoginPage() {
       </div>
     </main>
   )
-}
+}

app/auth/update-password/page.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import React, { useState } from "react"
+import { useRouter } from "next/navigation"
+import { createClient } from "@/lib/supabase/client"
+import { Loader2 } from "lucide-react"
+import { toast } from "sonner"
+
+export default function UpdatePasswordPage() {
+  const [password, setPassword] = useState("")
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+  const supabase = createClient()
+
+  async function handleUpdatePassword(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+
+    const { error } = await supabase.auth.updateUser({
+      password: password,
+    })
+
+    if (error) {
+      toast.error(error.message)
+    } else {
+      toast.success("Passwort erfolgreich geändert.")
+      router.push("/feed")
+      router.refresh()
+    }
+    setLoading(false)
+  }
+
+  return (
+    <main className="flex min-h-dvh flex-col items-center justify-center px-6">
+      <div className="w-full max-w-sm">
+        <h1 className="mb-6 text-2xl font-bold">Neues Passwort festlegen</h1>
+        <form onSubmit={handleUpdatePassword} className="flex flex-col gap-4">
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Neues Passwort"
+            required
+            className="h-12 w-full rounded-lg border border-input bg-background px-4 text-sm"
+          />
+          <button
+            type="submit"
+            disabled={loading}
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-primary font-semibold text-primary-foreground disabled:opacity-50"
+          >
+            {loading ? <Loader2 className="h-5 w-5 animate-spin" /> : "Passwort speichern"}
+          </button>
+        </form>
+      </div>
+    </main>
+  )
+}