Skip to main content

​
useForgotPassword

The useForgotPassword hook provides methods for handling password reset flows including sending OTP codes and resetting passwords.

​
Return Value

​
loading
boolean
Whether a password reset operation is in progress
​
forgotPassword
(email: string) => Promise<ActionResult>
​
verifyOtp
(email: string, otp: string) => Promise<ActionResult>
​
resetPassword
(token: string, newPassword: string) => Promise<ActionResult>
import { useForgotPassword } from "@wacht/react-router";

function ForgotPasswordPage() {
  const { loading, forgotPassword, verifyOtp, resetPassword } = useForgotPassword();

  const [step, setStep] = useState<"email" | "otp" | "done">("email");
  const [email, setEmail] = useState("");
  const [token, setToken] = useState("");

  const handleSendCode = async () => {
    const result = await forgotPassword(email);
    if (result.data) {
      setStep("otp");
    }
  };

  const handleVerifyOtp = async (otp: string) => {
    const result = await verifyOtp(email, otp);
    if (result.data?.token) {
      setToken(result.data.token);
      setStep("done");
    }
  };

  const handleReset = async (newPassword: string) => {
    const result = await resetPassword(token, newPassword);
    if (result.data) {
      setStep("done");
    }
  };

  return (
    <div>
      {step === "email" && (
        <form onSubmit={() => handleSendCode()}>
          <input
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Enter your email"
          />
          <button disabled={loading}>Send Reset Code</button>
        </form>
      )}
      {step === "otp" && (
        <form onSubmit={(e) => {
          e.preventDefault();
          handleVerifyOtp("123456");
        }}>
          <input placeholder="Enter OTP code" />
          <button disabled={loading}>Verify</button>
        </form>
      )}
      {step === "done" && <p>Password reset successfully!</p>}
    </div>
  );
}

​
Examples

​
Initiate Password Reset

const { forgotPassword } = useForgotPassword();

const result = await forgotPassword("user@example.com");

// Returns success if OTP was sent
// result.data?: {}
// result.error?: ErrorInterface

​
Verify OTP

const { verifyOtp } = useForgotPassword();

const result = await verifyOtp("user@example.com", "123456");

// result.data?: { token: string }
// result.error?: ErrorInterface

​
Reset Password

const { resetPassword } = useForgotPassword();

const result = await resetPassword("token_from_otp", "NewSecurePassword123!");

// result.data?: Session
// result.error?: ErrorInterface

​
Complete Flow

  1. User enters email address
  2. Call forgotPassword(email) to send OTP
  3. User enters OTP code
  4. Call verifyOtp(email, otp) to get reset token
  5. User enters new password
  6. Call resetPassword(token, newPassword) to complete reset