ForgotPasswordForm

Install

npx stylesheet-ui add forgot-password-form otp-input new-password-form

Usage

This is the first step of a reset flow — where the onForgotPassword link in SignInForm leads. Collect the email, ask your provider to send a code, then continue with OtpInput → NewPasswordForm.

import { useState } from "react";
import { ForgotPasswordForm } from "@/components/ui/forgot-password-form";

export default function ForgotPasswordScreen() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>();

  const onSubmit = async ({ emailAddress }) => {
    setLoading(true);
    setError(undefined);
    try {
      await sendResetCode(emailAddress); // your auth provider
      // navigate to the verify-code step…
    } catch (e) {
      setError("We couldn't find an account for that email.");
    } finally {
      setLoading(false);
    }
  };

  return <ForgotPasswordForm onSubmit={onSubmit} loading={loading} error={error} />;
}