Change Email

1"use client"
2 
3import { getViewURL } from "@better-auth-ui/core"
4import { useAuth, useChangeEmail, useSession } from "@better-auth-ui/react"
5import { type SyntheticEvent, useState } from "react"
6import { toast } from "sonner"
7 
8import { Button } from "@/components/ui/button"
9import { Card, CardContent, CardFooter } from "@/components/ui/card"
10import { Field, FieldError, FieldLabel } from "@/components/ui/field"
11import { Input } from "@/components/ui/input"
12import { Skeleton } from "@/components/ui/skeleton"
13import { Spinner } from "@/components/ui/spinner"
14import { cn } from "@/lib/utils"
15 
16export type ChangeEmailProps = {
17  className?: string
18}
19 
20/**
21 * Render a card containing a form to view and update the authenticated user's email.
22 *
23 * Shows a loading skeleton until session data is available, displays the current
24 * email as the form's default value, and sends a verification email to the
25 * new address upon successful submission.
26 *
27 * @returns A JSX element rendering the change-email card and form
28 */
29export function ChangeEmail({ className }: ChangeEmailProps) {
30  const { authClient, basePaths, baseURL, localization, viewPaths } = useAuth()
31  const { data: session } = useSession(authClient)
32 
33  const { mutate: changeEmail, isPending } = useChangeEmail(authClient, {
34    onSuccess: () => toast.success(localization.settings.changeEmailSuccess)
35  })
36 
37  const [fieldErrors, setFieldErrors] = useState<{
38    email?: string
39  }>({})
40 
41  function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
42    e.preventDefault()
43 
44    const formData = new FormData(e.currentTarget)
45    changeEmail({
46      newEmail: formData.get("email") as string,
47      callbackURL: getViewURL(
48        baseURL,
49        basePaths.settings,
50        viewPaths.settings.account
51      )
52    })
53  }
54 
55  return (
56    <div>
57      <h2 className="text-sm font-semibold mb-3">
58        {localization.settings.changeEmail}
59      </h2>
60 
61      <form onSubmit={handleSubmit}>
62        <Card className={cn(className)}>
63          <CardContent className="flex flex-col gap-6">
64            <Field data-invalid={!!fieldErrors.email}>
65              <FieldLabel htmlFor="email">{localization.auth.email}</FieldLabel>
66 
67              {session ? (
68                <Input
69                  key={session?.user.email}
70                  id="email"
71                  name="email"
72                  type="email"
73                  autoComplete="email"
74                  defaultValue={session?.user.email}
75// … truncated