Skip to content

πŸ” Wachtwoord Reset Flow – DrivingOldVolvos.nl ​

πŸ“Œ Doel ​

Gebruikers kunnen veilig hun wachtwoord resetten via Supabase Auth met aangepaste UX/UI en sessiebeheer.


🧭 Gebruikersflow ​

  1. Gebruiker klikt op β€œWachtwoord vergeten?”
    ➜ Gaat naar: /forgot-password

  2. Gebruiker voert zijn e-mailadres in
    ➜ Supabase stuurt een resetlink met:
    redirectTo=/update-password

  3. Gebruiker klikt op de link in de e-mail
    ➜ Link opent: /auth/callback#type=recovery

  4. /auth/callback detecteert recovery-type
    ➜ Router redirect naar /update-password

  5. Op /update-password vult de gebruiker een nieuw wachtwoord in

    • βœ” Validatie (minimaal 6 tekens, wachtwoorden moeten overeenkomen)
    • βœ” Supabase update het wachtwoord via supabase.auth.updateUser()
    • βœ” Gebruiker wordt uitgelogd
      ➜ Daarna redirect naar /login

🧩 Belangrijke bestanden ​

BestandDoel
/forgot-password/page.tsxFormulier voor invoer e-mailadres
/auth/callback/page.tsxDetecteert type=recovery en stuurt door
/update-password/page.tsxNieuw wachtwoord instellen (sessiecheck + logout)
components/ui/InputField.tsxHerbruikbare input met styling en show/hide-toggle

🧠 Opmerkingen ​

  • βœ… UX: InputFields hebben foutmeldingen, statuskleuren en show/hide-iconen (FiEye, FiEyeOff)
  • βœ… Security: Gebruiker wordt na wijziging uitgelogd om verwarring of onbedoelde inlog te voorkomen
  • ⚠️ Let op: Supabase laat gebruiker standaard ingelogd na wachtwoord-reset β†’ daarom expliciet signOut() toevoegen