ResetPasswordForm

Overview

ResetPasswordForm reads the reset token from your app (usually a query string on your reset-password route) and calls useResetPassword to set a new password. After success it can link or navigate back to sign-in.

When no token is present in the URL the form always displays a reset code input so the user can paste the token from the email manually.

Configure the path in the dashboard

The path that appears in reset emails (e.g. /reset-password) is set per-app under Dashboard → App Settings → Reset password path. The route you create in your app must match that setting. If you leave it blank, SimpleAuth defaults to /reset-password.

Preview

Interactive preview requires JavaScript.

Install

npx @simpleauthjs/react add reset-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	Description
`token`	`string`	No	Pass the token your app reads from the reset URL. When omitted the reset-code field starts empty and the user must enter it manually.
`onSuccess`	`() => void`	No	Called after a successful reset.
`signInHref`	`string`	No	On success, shows a "Back to sign in" link when `onSwitchToSignIn` is not set.
`onSwitchToSignIn`	`() => void`	No	On success, shows a button that runs this callback instead of an anchor.

Usage

In the App Router, read the token from searchParams in a small client wrapper or pass it from a server page into a client component.

"use client"

import { ResetPasswordForm } from "@/components/simpleauth"

export function ResetPasswordClient({ token }: { token?: string }) {
  return <ResetPasswordForm token={token} signInHref="/login" />
}

// app/reset-password/page.tsx  (or whatever path you set in the dashboard)
import { ResetPasswordClient } from "./reset-password-client"

export default function Page({ searchParams }: { searchParams: { token?: string } }) {
  return <ResetPasswordClient token={searchParams.token} />
}

Source

components/simpleauth/hooks/use-reset-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 reset password."
}

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

  async function resetPassword(input: { token: string; password: string }) {
    setIsLoading(true)
    setError(null)

    try {
      const response = await auth.resetPassword(input)
      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 {
    resetPassword,
    data,
    error,
    isError: Boolean(error),
    isLoading,
    isSuccess: Boolean(data?.success),
    reset,
  }
}

Customisation

Owned by you

Files live at components/simpleauth/ui/reset-password-form.tsx and components/simpleauth/styles/reset-password-form.css.

ResetPasswordForm

On this page