Security Settings

1"use client"
2 
3import { useAuth } from "@better-auth-ui/react"
4import { cn } from "@/lib/utils"
5import { ActiveSessions } from "./active-sessions"
6import { ChangePassword } from "./change-password"
7import { LinkedAccounts } from "./linked-accounts"
8 
9export type SecuritySettingsProps = {
10  className?: string
11}
12 
13/**
14 * Renders the security settings layout including password management, linked accounts, and active sessions.
15 *
16 * ChangePassword is rendered when password authentication is enabled; LinkedAccounts is rendered when social providers are present.
17 * Each registered auth plugin may contribute `securityCards` (for example passkeys, delete-user).
18 *
19 * @param className - Optional additional CSS class names for the outer container.
20 * @returns The security settings container as a JSX element.
21 */
22export function SecuritySettings({ className }: SecuritySettingsProps) {
23  const { emailAndPassword, plugins, socialProviders } = useAuth()
24 
25  return (
26    <div className={cn("flex w-full flex-col gap-4 md:gap-6", className)}>
27      {emailAndPassword?.enabled && <ChangePassword />}
28      {!!socialProviders?.length && <LinkedAccounts />}
29      <ActiveSessions />
30      {plugins.flatMap(
31        (plugin) =>
32          plugin.securityCards?.map((Card, index) => (
33            <Card key={`${plugin.id}-${index.toString()}`} />
34          )) ?? []
35      )}
36    </div>
37  )
38}