ForgotPasswordModal

Overview

ForgotPasswordModal wraps the same flow as ForgotPasswordForm in a modal shell. Import components/simpleauth/styles/simpleauth-modal.css (or your generated modal stylesheet) so layout and backdrop match SignInModal.

Preview

Interactive preview requires JavaScript.

Install

npx @simpleauthjs/react add forgot-password --style minimal

The install snippet uses --style minimal. You can also use --style modern. Style variants compares those two in the live preview. Run npx @simpleauthjs/react add --help for every --style slug the CLI accepts.

Props

Name	Type	Required	Default	Description
`open`	`boolean`	Yes	—	Controls visibility.
`onClose`	`() => void`	Yes	—	Called when the modal should close.
`onSuccess`	`() => void`	No	`undefined`	Called after the reset email request succeeds.
`appName`	`string`	No	`undefined`	Shown in the modal title when set.
`signInHref`	`string`	No	`undefined`	Footer “Sign in” link when `onSwitchToSignIn` is not set.
`onSwitchToSignIn`	`() => void`	No	`undefined`	Footer button for sign-in; takes precedence over `signInHref`.

Usage

"use client"

import { useState } from "react"
import { ForgotPasswordModal } from "@/components/simpleauth"

export function LoginExtras() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Forgot password?
      </button>
      <ForgotPasswordModal open={open} onClose={() => setOpen(false)} appName="Acme" />
    </>
  )
}

Source

components/simpleauth/hooks/use-forgot-password.ts

"use client"

import { useState } from "react"
import { SimpleAuthError, type SuccessResponse } from "@simpleauthjs/core"
import { useSimpleAuthClient } from "../provider"

function getErrorMessage(error: unknown) {
  if (error instanceof SimpleAuthError) {
    return error.message
  }

  if (error instanceof Error) {
    return error.message
  }

  return "Unable to send reset email."
}

export function useForgotPassword() {
  const auth = useSimpleAuthClient()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [data, setData] = useState<SuccessResponse | null>(null)

  async function forgotPassword(email: string) {
    setIsLoading(true)
    setError(null)

    try {
      const response = await auth.forgotPassword({ email: email.trim() })
      setData(response)
      return response
    } catch (requestError) {
      setData(null)
      setError(getErrorMessage(requestError))
      throw requestError
    } finally {
      setIsLoading(false)
    }
  }

  function reset() {
    setData(null)
    setError(null)
    setIsLoading(false)
  }

  return {
    forgotPassword,
    data,
    error,
    isError: Boolean(error),
    isLoading,
    isSuccess: Boolean(data?.success),
    reset,
  }
}

Customisation

Owned by you

Update components/simpleauth/modals/forgot-password-modal.tsx and shared modal CSS alongside your other modals.

ForgotPasswordModal

On this page