Reset Password

1"use client"
2 
3import { getAuthLinkURL } from "@better-auth-ui/core"
4import { useAuth, useResetPassword } from "@better-auth-ui/react"
5import { Eye, EyeOff } from "lucide-react"
6import { type SyntheticEvent, useEffect, useState } from "react"
7import { toast } from "sonner"
8 
9import { Button } from "@/components/ui/button"
10import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
11import {
12  Field,
13  FieldDescription,
14  FieldError,
15  FieldGroup,
16  FieldLabel
17} from "@/components/ui/field"
18import {
19  InputGroup,
20  InputGroupAddon,
21  InputGroupButton,
22  InputGroupInput
23} from "@/components/ui/input-group"
24import { Spinner } from "@/components/ui/spinner"
25import { cn } from "@/lib/utils"
26 
27export type ResetPasswordProps = {
28  className?: string
29}
30 
31/**
32 * Render a password reset form that validates the reset token from the URL, accepts a new password (and optional confirmation), and submits it to the auth client.
33 *
34 * The component checks for a `token` query parameter on mount and, if missing, shows an error toast and navigates to the sign-in page. It exposes per-field validation messages, toggles for password visibility, and disables inputs while the reset request is pending.
35 *
36 * @returns The password reset form UI ready to be mounted in the app layout.
37 */
38export function ResetPassword({ className }: ResetPasswordProps) {
39  const {
40    authClient,
41    basePaths,
42    emailAndPassword,
43    localization,
44    navigate,
45    redirectTo,
46    viewPaths,
47    Link
48  } = useAuth()
49  const signInURL = getAuthLinkURL(
50    `${basePaths.auth}/${viewPaths.auth.signIn}`,
51    redirectTo
52  )
53 
54  const { mutate: resetPassword, isPending } = useResetPassword(authClient, {
55    onSuccess: () => {
56      toast.success(localization.auth.passwordResetSuccess)
57      navigate({ to: signInURL })
58    }
59  })
60 
61  const [isPasswordVisible, setIsPasswordVisible] = useState(false)
62  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
63    useState(false)
64 
65  const [fieldErrors, setFieldErrors] = useState<{
66    password?: string
67    confirmPassword?: string
68  }>({})
69 
70  useEffect(() => {
71    const searchParams = new URLSearchParams(window.location.search)
72    const token = searchParams.get("token") as string
73 
74    if (!token) {
75      toast.error(localization.auth.invalidResetPasswordToken)
76      navigate({ to: signInURL })
77    }
78  }, [localization.auth.invalidResetPasswordToken, navigate, signInURL])
79 
80  function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
81// … truncated