update/reset password

app/auth/callback/route.ts

@@ -15,6 +15,17 @@ export async function GET(request: NextRequest) {
   const type = requestUrl.searchParams.get('type') // recovery, signup, etc
   const next = requestUrl.searchParams.get('next') ?? '/epd/clients'
 
+  // Debug logging
+  if (process.env.NODE_ENV === 'development') {
+    console.log('🔍 Auth Callback Debug:', {
+      url: request.url,
+      code: !!code,
+      type,
+      next,
+      allParams: Object.fromEntries(requestUrl.searchParams)
+    })
+  }
+
   if (code) {
     const supabase = await createClient()
 
@@ -22,9 +33,19 @@ export async function GET(request: NextRequest) {
     const { data, error } = await supabase.auth.exchangeCodeForSession(code)
 
     if (!error && data.user) {
-      // Password recovery flow - always go to update-password
+      // Password recovery flow detection:
-      // Check both query param and if next contains update-password (fallback)
+      // 1. Check type parameter (Supabase adds this automatically)
-      if (type === 'recovery' || next.includes('/update-password')) {
+      // 2. Check if next contains update-password (our explicit redirect)
+      // 3. Check if this is a recovery session by looking at the user's recovery metadata
+      const isRecoveryFlow = 
+        type === 'recovery' || 
+        next.includes('/update-password') ||
+        requestUrl.pathname.includes('update-password')
+
+      if (isRecoveryFlow) {
+        if (process.env.NODE_ENV === 'development') {
+          console.log('✅ Redirecting to /update-password (recovery flow detected)')
+        }
         return NextResponse.redirect(new URL('/update-password', request.url))
       }
 

app/update-password/page.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
-import { updateUserPassword } from '@/lib/auth/client'
+import { updateUserPassword, getSession } from '@/lib/auth/client'
 
 export default function UpdatePasswordPage() {
   const router = useRouter()
@@ -11,6 +11,27 @@ export default function UpdatePasswordPage() {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [success, setSuccess] = useState(false)
+  const [checkingSession, setCheckingSession] = useState(true)
+
+  // Check if user has an active session (required for password update)
+  useEffect(() => {
+    async function checkSession() {
+      try {
+        const session = await getSession()
+        if (!session) {
+          // No session - redirect to login
+          router.push('/login?error=session_required')
+          return
+        }
+        setCheckingSession(false)
+      } catch (err) {
+        console.error('Session check error:', err)
+        router.push('/login?error=session_check_failed')
+      }
+    }
+
+    checkSession()
+  }, [router])
 
   async function handleUpdatePassword(e: React.FormEvent) {
     e.preventDefault()
@@ -40,6 +61,20 @@ export default function UpdatePasswordPage() {
     }
   }
 
+  if (checkingSession) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+        <div className="max-w-md w-full bg-white p-8 rounded-lg shadow-sm text-center space-y-4">
+          <div className="text-5xl mb-4">⏳</div>
+          <h1 className="text-2xl font-bold text-slate-900">Bezig met laden...</h1>
+          <p className="text-slate-600">
+            Even geduld terwijl we je sessie controleren...
+          </p>
+        </div>
+      </div>
+    )
+  }
+
   if (success) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">

lib/auth/client.ts

@@ -129,7 +129,7 @@ export async function signUpWithPassword(email: string, password: string) {
 export async function resetPasswordForEmail(email: string) {
   const supabase = createClient()
   const { error } = await supabase.auth.resetPasswordForEmail(email, {
-    redirectTo: `${window.location.origin}/auth/callback?type=recovery&next=/update-password`
+    redirectTo: `${window.location.origin}/auth/callback?next=/update-password`
   })
 
   if (error) throw error