Better Auth UI

The <UpdateAvatarCard /> component is a pre-built UI element for users to easily manage and update their avatar image. It seamlessly integrates with the AuthUIProvider and utilizes either a custom or built-in avatar upload implementation.

Usage

Here's how to include the <UpdateAvatarCard /> component within your custom settings page. If you don't provide an uploadAvatar function, the component will store the avatar image as a base64 string in database.

import { UpdateAvatarCard } from "@daveyplate/better-auth-ui"
 
export default function CustomSettings() {
    return (
        <div className="flex flex-col gap-6">
            <UpdateAvatarCard />
        </div>
    )
}

You can optionally provide uploadAvatar prop within your AuthUIProvider:

providers.tsx

"use client"
 
import { AuthUIProvider } from "@daveyplate/better-auth-ui"
import { authClient } from "@/lib/auth-client"
import { useRouter } from "next/navigation"
import Link from "next/link"
 
export const Providers = ({ children }: { children: React.ReactNode }) => {
    const router = useRouter()
 
    return (
        <AuthUIProvider
            authClient={authClient}
            navigate={router.push}
            replace={router.replace}
            onSessionChange={() => router.refresh()}
            avatar
            uploadAvatar={async (file: File) => {
                const formData = new FormData()
                formData.append("avatar", file)
 
                const res = await fetch("/api/uploadAvatar", {
                    method: "POST",
                    body: formData,
                })
 
                const { data } = await res.json()
                return data.url
            }}
            LinkComponent={Link}
        >
            {children}
        </AuthUIProvider>
    )
}

Reference

These are the available props for <UpdateAvatarCard />:

Prop	Type	Default
`className?`	`string`	-
`classNames?`	`SettingsCardClassNames`	-
`isPending?`	`boolean`	-
`localization?`	`Partial<{ account: string; accounts: string; accountsDescription: string; accountsInstructions: string; addAccount: string; addPasskey: string; alreadyHaveAnAccount: string; avatar: string; avatarDescription: string; ... 87 more ...; verifyYourEmailDescription: string; }>`	-

Styling

The classNames prop is useful for customizing inner elements using Tailwind classes:

<UpdateAvatarCard
    classNames={{
        base: "border-blue-500",
        avatar: {
            base: "border-4 border-blue-400",
            fallback: "bg-blue-400 text-white"
        },
        footer: "bg-blue-50"
    }}
/>

Notes

Avatars are auto-cropped, optimized, and resized before uploading:

Cropping: The image is automatically center-cropped into a square.
Sizing: Default avatarSize is set to:
- 128px (when using built-in storage - base64)
- 256px (when using custom uploadAvatar)
File Format: You can customize the uploaded image file format via avatarExtension prop in AuthUIProvider. It defaults to "png".

<UpdateAvatarCard />

Usage

Reference

Styling

Notes

On this page