Settings

1"use client"
2 
3import type { SettingsView } from "@better-auth-ui/core"
4import { useAuth, useAuthenticate } from "@better-auth-ui/react"
5import { Shield, User2 } from "lucide-react"
6import { useMemo } from "react"
7 
8import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
9import { cn } from "@/lib/utils"
10import { AccountSettings } from "./account/account-settings"
11import { SecuritySettings } from "./security/security-settings"
12 
13export type SettingsProps = {
14  className?: string
15  path?: string
16  /** @remarks `SettingsView` */
17  view?: SettingsView
18  hideNav?: boolean
19}
20 
21/**
22 * Renders the settings UI and activates the appropriate settings view based on `view` or `path`.
23 *
24 * @param className - Additional CSS class names applied to the root container
25 * @param path - Route path used to resolve which settings view to activate when `view` is not provided
26 * @param view - Explicit settings view to activate (for example, `"account"` or `"security"`)
27 * @param hideNav - When `true`, hides the settings navigation tabs
28 * @returns A JSX element rendering the settings layout and the selected settings panel
29 */
30export function Settings({ className, view, path, hideNav }: SettingsProps) {
31  const { authClient, basePaths, localization, viewPaths, plugins, navigate } =
32    useAuth()
33  useAuthenticate(authClient)
34 
35  if (!view && !path) {
36    throw new Error("[Better Auth UI] Either `view` or `path` must be provided")
37  }
38 
39  const currentView = useMemo(() => {
40    if (view) return view
41    if (!path) return undefined
42 
43    const match = [
44      viewPaths.settings,
45      ...plugins.map((plugin) => plugin.viewPaths?.settings)
46    ]
47      .flatMap((source) => Object.entries(source ?? {}))
48      .find(([, segment]) => segment === path)
49 
50    return match?.[0] as SettingsView | undefined
51  }, [view, path, viewPaths.settings, plugins])
52 
53  if (!currentView) {
54    const validPaths = [
55      viewPaths.settings,
56      ...plugins.map((plugin) => plugin.viewPaths?.settings)
57    ]
58      .flatMap((source) => Object.values(source ?? {}))
59      .join(", ")
60    throw new Error(
61      `[Better Auth UI] Unknown settings path "${path}". Valid paths are: ${validPaths}`
62    )
63  }
64 
65  return (
66    <Tabs
67      value={currentView}
68      className={cn("w-full gap-4 md:gap-6", className)}
69    >
70      <div className={cn(hideNav && "hidden")}>
71        <TabsList aria-label={localization.settings.settings}>
72          <TabsTrigger
73            value="account"
74// … truncated