Forgot Password Form

Overview

The ForgotPasswordForm recipe provides a two-state password reset flow. The form view shows an email field and submit button. The success view shows a confirmation message with a "back to login" action.

Reset password

We'll send you a reset link

Email address

← Back to sign in

Usage

import { ForgotPasswordForm } from '@/recipes/forgot-password-form';

<ForgotPasswordForm
  onSubmit={({ email }) => sendResetEmail(email)}
  onBack={() => navigate('/login')}
/>

Success State

<ForgotPasswordForm
  onSubmit={handleSubmit}
  isSuccess={true}
  onBack={() => navigate('/login')}
/>

API Reference

Prop	Type	Default	Description
`onSubmit`	`(data: { email: string }) => void`	—	Submit handler
`onBack`	`() => void`	—	Back to login handler
`isLoading`	`boolean`	`false`	Loading state
`isSuccess`	`boolean`	`false`	Shows success message
`error`	`string`	—	Error message
`className`	`string`	—	Additional CSS classes

Login Form — For sign in
Signup Form — For new account creation