User Profile

1"use client"
2 
3import {
4  type AdditionalFieldValue,
5  parseAdditionalFieldValue
6} from "@better-auth-ui/core"
7import {
8  type UsernameAuthClient,
9  useAuth,
10  useSession,
11  useUpdateUser
12} from "@better-auth-ui/react"
13import { type SyntheticEvent, useState } from "react"
14import { toast } from "sonner"
15 
16import { Button } from "@/components/ui/button"
17import { Card, CardContent, CardFooter } from "@/components/ui/card"
18import { Field, FieldError, FieldLabel } from "@/components/ui/field"
19import { Input } from "@/components/ui/input"
20import { Skeleton } from "@/components/ui/skeleton"
21import { Spinner } from "@/components/ui/spinner"
22import { cn } from "@/lib/utils"
23import { AdditionalField } from "../../additional-field"
24import { ChangeAvatar } from "./change-avatar"
25 
26export type UserProfileProps = {
27  className?: string
28}
29 
30/**
31 * Render a profile card that lets the authenticated user view and update their display name, username, and avatar.
32 *
33 * @param className - Optional additional CSS class names applied to the card container
34 * @returns A JSX element containing the profile card with avatar upload and editable name/username fields
35 */
36export function UserProfile({ className }: UserProfileProps) {
37  const { additionalFields, authClient, localization } = useAuth()
38  const { data: session } = useSession(authClient as UsernameAuthClient)
39 
40  const { mutate: updateUser, isPending } = useUpdateUser(authClient, {
41    onSuccess: () => toast.success(localization.settings.profileUpdatedSuccess)
42  })
43 
44  const [fieldErrors, setFieldErrors] = useState<{
45    name?: string
46  }>({})
47 
48  async function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
49    e.preventDefault()
50 
51    const formData = new FormData(e.currentTarget)
52    const name = formData.get("name") as string
53 
54    const additionalFieldValues: Record<string, unknown> = {}
55 
56    for (const field of additionalFields ?? []) {
57      if (field.profile === false || field.readOnly) continue
58      const value = parseAdditionalFieldValue(
59        field,
60        formData.get(field.name) as string | null
61      )
62 
63      if (field.validate) {
64        try {
65          await field.validate(value)
66        } catch (error) {
67          toast.error(error instanceof Error ? error.message : String(error))
68          return
69        }
70      }
71 
72      // `null` = explicit clear (forward to backend); `undefined` = omitted.
73      if (value !== undefined) {
74        additionalFieldValues[field.name] = value
75      }
76    }
77 
78    updateUser({
79// … truncated