Forgot Password

1"use client"
2 
3import { getViewURL } from "@better-auth-ui/core"
4import {
5  useAuth,
6  useFetchOptions,
7  useRequestPasswordReset
8} from "@better-auth-ui/react"
9import { type SyntheticEvent, useState } from "react"
10 
11import { Button } from "@/components/ui/button"
12import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
13import {
14  Field,
15  FieldDescription,
16  FieldError,
17  FieldGroup,
18  FieldLabel
19} from "@/components/ui/field"
20import { Input } from "@/components/ui/input"
21import { Spinner } from "@/components/ui/spinner"
22import { cn } from "@/lib/utils"
23import { RESET_LINK_SENT_STORAGE_KEY } from "./reset-link-sent"
24 
25export type ForgotPasswordProps = {
26  className?: string
27}
28 
29/**
30 * Render a card-based "Forgot Password" form that sends a password-reset email.
31 *
32 * The form displays an email input, submit button, and a link back to sign-in.
33 * After a successful request the submitted email is stored in `sessionStorage`
34 * and the user is redirected to the reset-link-sent view, which offers to open
35 * their email provider.
36 *
37 * @param className - Optional additional CSS class names applied to the card
38 * @returns The forgot-password form UI as a JSX element
39 */
40export function ForgotPassword({ className }: ForgotPasswordProps) {
41  const {
42    authClient,
43    baseURL,
44    basePaths,
45    localization,
46    navigate,
47    plugins,
48    viewPaths,
49    Link
50  } = useAuth()
51 
52  const { fetchOptions, resetFetchOptions } = useFetchOptions()
53 
54  const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset(
55    authClient,
56    {
57      onError: () => {
58        resetFetchOptions()
59      },
60      onSuccess: (_data, { email }) => {
61        sessionStorage.setItem(RESET_LINK_SENT_STORAGE_KEY, email)
62        navigate({ to: `${basePaths.auth}/${viewPaths.auth.resetLinkSent}` })
63      }
64    }
65  )
66 
67  function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
68    e.preventDefault()
69    const formData = new FormData(e.currentTarget)
70    requestPasswordReset({
71      email: formData.get("email") as string,
72      redirectTo: getViewURL(
73        baseURL,
74        basePaths.auth,
75        viewPaths.auth.resetPassword
76      ),
77      fetchOptions
78    })
79  }
80 
81  const Captcha = plugins.find(
82    (plugin) => plugin.captchaComponent
83  )?.captchaComponent
84 
85  const [fieldErrors, setFieldErrors] = useState<{
86    email?: string
87  }>({})
88 
89  return (
90    <Card className={cn("w-full max-w-sm", className)}>
91      <CardHeader>
92// … truncated