Account Settings

1"use client"
2 
3import { useAuth } from "@better-auth-ui/react"
4import type { ComponentProps } from "react"
5 
6import { cn } from "@/lib/utils"
7import { ChangeEmail } from "./change-email"
8import { UserProfile } from "./user-profile"
9 
10export type AccountSettingsProps = {
11  className?: string
12}
13 
14/**
15 * Renders the account settings layout.
16 *
17 * Uses `emailAndPassword` and `plugins` from `useAuth()` to conditionally
18 * show sections:
19 * - `UserProfile` always renders.
20 * - The change-email card renders when `emailAndPassword?.enabled` is truthy
21 *   or the `magicLink` plugin is registered, and a plugin may replace it via
22 *   `cardOverrides.account.changeEmail` (the email-OTP plugin swaps in its
23 *   code-based flow).
24 * - Plugin-contributed account cards are rendered via the plugins array
25 *   (e.g. `Appearance` from the theme plugin, multi-session accounts).
26 */
27export function AccountSettings({
28  className,
29  ...props
30}: AccountSettingsProps & ComponentProps<"div">) {
31  const { emailAndPassword, plugins } = useAuth()
32 
33  const hasMagicLink = plugins.some((plugin) => plugin.id === "magicLink")
34 
35  const ChangeEmailOverride = plugins.find(
36    (plugin) => plugin.cardOverrides?.account?.changeEmail
37  )?.cardOverrides?.account?.changeEmail
38  const ChangeEmailCard = ChangeEmailOverride ?? ChangeEmail
39 
40  // A plugin that replaces the card brings its own way to confirm the change,
41  // so it can stand on its own without password or magic-link auth.
42  const showChangeEmail =
43    emailAndPassword?.enabled || hasMagicLink || Boolean(ChangeEmailOverride)
44 
45  return (
46    <div
47      className={cn("flex w-full flex-col gap-4 md:gap-6", className)}
48      {...props}
49    >
50      <UserProfile />
51      {showChangeEmail && <ChangeEmailCard />}
52      {plugins.flatMap(
53        (plugin) =>
54          plugin.accountCards?.map((Card, index) => (
55            <Card key={`${plugin.id}-${index.toString()}`} />
56          )) ?? []
57      )}
58    </div>
59  )
60}