Appearance
π Wachtwoord Reset Flow β DrivingOldVolvos.nl β
π Doel β
Gebruikers kunnen veilig hun wachtwoord resetten via Supabase Auth met aangepaste UX/UI en sessiebeheer.
π§ Gebruikersflow β
Gebruiker klikt op βWachtwoord vergeten?β
β Gaat naar:/forgot-passwordGebruiker voert zijn e-mailadres in
β Supabase stuurt een resetlink met:redirectTo=/update-passwordGebruiker klikt op de link in de e-mail
β Link opent:/auth/callback#type=recovery/auth/callbackdetecteert recovery-type
β Router redirect naar/update-passwordOp
/update-passwordvult 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 β
| Bestand | Doel |
|---|---|
/forgot-password/page.tsx | Formulier voor invoer e-mailadres |
/auth/callback/page.tsx | Detecteert type=recovery en stuurt door |
/update-password/page.tsx | Nieuw wachtwoord instellen (sessiecheck + logout) |
components/ui/InputField.tsx | Herbruikbare 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