Nativ ui
Documentation

Forgot Password

Password reset flow patterns.

Basic Reset Form

<div class="min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm p-8">
    <h1 class="text-2xl font-bold text-center">Reset your password</h1>
    <p class="mt-2 text-center text-muted-foreground">
      Enter your email and we'll send you a reset link
    </p>
    <form class="mt-8 space-y-4">
      <div>
        <label class="text-sm font-medium">Email</label>
        <input type="email" class="mt-1 w-full rounded-lg border px-3 py-2" />
      </div>
      <button type="submit" class="w-full btn-primary">Send reset link</button>
    </form>
    <p class="mt-6 text-center text-sm text-muted-foreground">
      Remember your password? <a href="/login" class="text-primary">Sign in</a>
    </p>
  </div>
</div>

Flow Steps

  1. Request reset - User enters email
  2. Confirm sent - Show success message
  3. Email link - Secure, time-limited link
  4. New password - Form to set new password
  5. Confirmation - Success + redirect to login

Best Practices

  1. Don't reveal existence - Same message whether email exists or not
  2. Rate limit - Prevent abuse of reset endpoint
  3. Expire links - 1 hour max for security
  4. Single use - Invalidate link after use
  5. Clear next steps - Tell user what to expect