better-auth-ui 3.2.5

package/src/components/settings/security/change-password-card.tsx

@@ -0,0 +1,326 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useContext } from "react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn, getLocalizedError, getPasswordSchema } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import type { PasswordValidation } from "../../../types/password-validation"
+import { PasswordInput } from "../../password-input"
+import { CardContent } from "../../ui/card"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "../../ui/form"
+import {
+    SettingsCard,
+    type SettingsCardClassNames
+} from "../shared/settings-card"
+import { InputFieldSkeleton } from "../skeletons/input-field-skeleton"
+
+export interface ChangePasswordCardProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    accounts?: { providerId: string }[] | null
+    isPending?: boolean
+    localization?: AuthLocalization
+    skipHook?: boolean
+    passwordValidation?: PasswordValidation
+}
+
+export function ChangePasswordCard({
+    className,
+    classNames,
+    accounts,
+    isPending,
+    localization,
+    skipHook,
+    passwordValidation
+}: ChangePasswordCardProps) {
+    const {
+        authClient,
+        basePath,
+        baseURL,
+        credentials,
+        hooks: { useSession, useListAccounts },
+        localization: contextLocalization,
+        viewPaths,
+        toast
+    } = useContext(AuthUIContext)
+
+    const confirmPasswordEnabled = credentials?.confirmPassword
+    const contextPasswordValidation = credentials?.passwordValidation
+
+    localization = { ...contextLocalization, ...localization }
+    passwordValidation = { ...contextPasswordValidation, ...passwordValidation }
+
+    const { data: sessionData } = useSession()
+
+    if (!skipHook) {
+        const result = useListAccounts()
+        accounts = result.data
+        isPending = result.isPending
+    }
+
+    const formSchema = z
+        .object({
+            currentPassword: getPasswordSchema(
+                passwordValidation,
+                localization
+            ),
+            newPassword: getPasswordSchema(passwordValidation, {
+                PASSWORD_REQUIRED: localization.NEW_PASSWORD_REQUIRED,
+                PASSWORD_TOO_SHORT: localization.PASSWORD_TOO_SHORT,
+                PASSWORD_TOO_LONG: localization.PASSWORD_TOO_LONG,
+                INVALID_PASSWORD: localization.INVALID_PASSWORD
+            }),
+            confirmPassword: confirmPasswordEnabled
+                ? getPasswordSchema(passwordValidation, {
+                      PASSWORD_REQUIRED: localization.CONFIRM_PASSWORD_REQUIRED,
+                      PASSWORD_TOO_SHORT: localization.PASSWORD_TOO_SHORT,
+                      PASSWORD_TOO_LONG: localization.PASSWORD_TOO_LONG,
+                      INVALID_PASSWORD: localization.INVALID_PASSWORD
+                  })
+                : z.string().optional()
+        })
+        .refine(
+            (data) =>
+                !confirmPasswordEnabled ||
+                data.newPassword === data.confirmPassword,
+            {
+                message: localization.PASSWORDS_DO_NOT_MATCH,
+                path: ["confirmPassword"]
+            }
+        )
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            currentPassword: "",
+            newPassword: "",
+            confirmPassword: ""
+        }
+    })
+
+    const setPasswordForm = useForm()
+
+    const { isSubmitting } = form.formState
+
+    const setPassword = async () => {
+        if (!sessionData) return
+        const email = sessionData?.user.email
+
+        try {
+            await authClient.requestPasswordReset({
+                email,
+                redirectTo: `${baseURL}${basePath}/${viewPaths.RESET_PASSWORD}`,
+                fetchOptions: { throw: true }
+            })
+
+            toast({
+                variant: "success",
+                message: localization.FORGOT_PASSWORD_EMAIL!
+            })
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+    }
+
+    const changePassword = async ({
+        currentPassword,
+        newPassword
+    }: z.infer<typeof formSchema>) => {
+        try {
+            await authClient.changePassword({
+                currentPassword,
+                newPassword,
+                revokeOtherSessions: true,
+                fetchOptions: { throw: true }
+            })
+
+            toast({
+                variant: "success",
+                message: localization.CHANGE_PASSWORD_SUCCESS!
+            })
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        form.reset()
+    }
+
+    const credentialsLinked = accounts?.some(
+        (acc) => acc.providerId === "credential"
+    )
+
+    if (!isPending && !credentialsLinked) {
+        return (
+            <Form {...setPasswordForm}>
+                <form onSubmit={setPasswordForm.handleSubmit(setPassword)}>
+                    <SettingsCard
+                        title={localization.SET_PASSWORD}
+                        description={localization.SET_PASSWORD_DESCRIPTION}
+                        actionLabel={localization.SET_PASSWORD}
+                        isPending={isPending}
+                        className={className}
+                        classNames={classNames}
+                    />
+                </form>
+            </Form>
+        )
+    }
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(changePassword)}>
+                <SettingsCard
+                    className={className}
+                    classNames={classNames}
+                    actionLabel={localization.SAVE}
+                    description={localization.CHANGE_PASSWORD_DESCRIPTION}
+                    instructions={localization.CHANGE_PASSWORD_INSTRUCTIONS}
+                    isPending={isPending}
+                    title={localization.CHANGE_PASSWORD}
+                >
+                    <CardContent
+                        className={cn("grid gap-6", classNames?.content)}
+                    >
+                        {isPending || !accounts ? (
+                            <>
+                                <InputFieldSkeleton classNames={classNames} />
+                                <InputFieldSkeleton classNames={classNames} />
+
+                                {confirmPasswordEnabled && (
+                                    <InputFieldSkeleton
+                                        classNames={classNames}
+                                    />
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                <FormField
+                                    control={form.control}
+                                    name="currentPassword"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel
+                                                className={classNames?.label}
+                                            >
+                                                {localization.CURRENT_PASSWORD}
+                                            </FormLabel>
+
+                                            <FormControl>
+                                                <PasswordInput
+                                                    className={
+                                                        classNames?.input
+                                                    }
+                                                    autoComplete="current-password"
+                                                    placeholder={
+                                                        localization.CURRENT_PASSWORD_PLACEHOLDER
+                                                    }
+                                                    disabled={isSubmitting}
+                                                    {...field}
+                                                />
+                                            </FormControl>
+
+                                            <FormMessage
+                                                className={classNames?.error}
+                                            />
+                                        </FormItem>
+                                    )}
+                                />
+
+                                <FormField
+                                    control={form.control}
+                                    name="newPassword"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel
+                                                className={classNames?.label}
+                                            >
+                                                {localization.NEW_PASSWORD}
+                                            </FormLabel>
+
+                                            <FormControl>
+                                                <PasswordInput
+                                                    className={
+                                                        classNames?.input
+                                                    }
+                                                    autoComplete="new-password"
+                                                    disabled={isSubmitting}
+                                                    placeholder={
+                                                        localization.NEW_PASSWORD_PLACEHOLDER
+                                                    }
+                                                    enableToggle
+                                                    {...field}
+                                                />
+                                            </FormControl>
+
+                                            <FormMessage
+                                                className={classNames?.error}
+                                            />
+                                        </FormItem>
+                                    )}
+                                />
+
+                                {confirmPasswordEnabled && (
+                                    <FormField
+                                        control={form.control}
+                                        name="confirmPassword"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel
+                                                    className={
+                                                        classNames?.label
+                                                    }
+                                                >
+                                                    {
+                                                        localization.CONFIRM_PASSWORD
+                                                    }
+                                                </FormLabel>
+
+                                                <FormControl>
+                                                    <PasswordInput
+                                                        className={
+                                                            classNames?.input
+                                                        }
+                                                        autoComplete="new-password"
+                                                        placeholder={
+                                                            localization.CONFIRM_PASSWORD_PLACEHOLDER
+                                                        }
+                                                        disabled={isSubmitting}
+                                                        enableToggle
+                                                        {...field}
+                                                    />
+                                                </FormControl>
+
+                                                <FormMessage
+                                                    className={
+                                                        classNames?.error
+                                                    }
+                                                />
+                                            </FormItem>
+                                        )}
+                                    />
+                                )}
+                            </>
+                        )}
+                    </CardContent>
+                </SettingsCard>
+            </form>
+        </Form>
+    )
+}

package/src/components/settings/security/session-cell.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import type { Session } from "better-auth"
+import { LaptopIcon, Loader2, SmartphoneIcon } from "lucide-react"
+import { useContext, useState } from "react"
+import { UAParser } from "ua-parser-js"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn, getLocalizedError } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import type { Refetch } from "../../../types/refetch"
+import { Button } from "../../ui/button"
+import { Card } from "../../ui/card"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+
+export interface SessionCellProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    localization?: Partial<AuthLocalization>
+    session: Session
+    refetch?: Refetch
+}
+
+export function SessionCell({
+    className,
+    classNames,
+    localization,
+    session,
+    refetch
+}: SessionCellProps) {
+    const {
+        basePath,
+        hooks: { useSession },
+        localization: contextLocalization,
+        mutators: { revokeSession },
+        viewPaths,
+        navigate,
+        toast
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { data: sessionData } = useSession()
+    const isCurrentSession = session.id === sessionData?.session?.id
+
+    const [isLoading, setIsLoading] = useState(false)
+
+    const handleRevoke = async () => {
+        setIsLoading(true)
+
+        if (isCurrentSession) {
+            navigate(`${basePath}/${viewPaths.SIGN_OUT}`)
+            return
+        }
+
+        try {
+            await revokeSession({ token: session.token })
+            refetch?.()
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+
+            setIsLoading(false)
+        }
+    }
+
+    const parser = UAParser(session.userAgent as string)
+    const isMobile = parser.device.type === "mobile"
+
+    return (
+        <Card
+            className={cn(
+                "flex-row items-center gap-3 px-4 py-3",
+                className,
+                classNames?.cell
+            )}
+        >
+            {isMobile ? (
+                <SmartphoneIcon className={cn("size-4", classNames?.icon)} />
+            ) : (
+                <LaptopIcon className={cn("size-4", classNames?.icon)} />
+            )}
+
+            <div className="flex flex-col">
+                <span className="font-semibold text-sm">
+                    {isCurrentSession
+                        ? localization.CURRENT_SESSION
+                        : session?.ipAddress}
+                </span>
+
+                <span className="text-muted-foreground text-xs">
+                    {session.userAgent?.includes("tauri-plugin-http")
+                        ? localization.APP
+                        : parser.os.name && parser.browser.name
+                          ? `${parser.os.name}, ${parser.browser.name}`
+                          : parser.os.name ||
+                            parser.browser.name ||
+                            session.userAgent ||
+                            localization.UNKNOWN}
+                </span>
+            </div>
+
+            <Button
+                className={cn(
+                    "relative ms-auto",
+                    classNames?.button,
+                    classNames?.outlineButton
+                )}
+                disabled={isLoading}
+                size="sm"
+                variant="outline"
+                onClick={handleRevoke}
+            >
+                {isLoading && <Loader2 className="animate-spin" />}
+                {isCurrentSession ? localization.SIGN_OUT : localization.REVOKE}
+            </Button>
+        </Card>
+    )
+}

package/src/components/settings/security/sessions-card.tsx

@@ -0,0 +1,58 @@
+"use client"
+import { useContext } from "react"
+
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import { CardContent } from "../../ui/card"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+import { SettingsCard } from "../shared/settings-card"
+import { SettingsCellSkeleton } from "../skeletons/settings-cell-skeleton"
+import { SessionCell } from "./session-cell"
+
+export interface SessionsCardProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    localization?: Partial<AuthLocalization>
+}
+
+export function SessionsCard({
+    className,
+    classNames,
+    localization
+}: SessionsCardProps) {
+    const {
+        hooks: { useListSessions },
+        localization: contextLocalization
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { data: sessions, isPending, refetch } = useListSessions()
+
+    return (
+        <SettingsCard
+            className={className}
+            classNames={classNames}
+            description={localization.SESSIONS_DESCRIPTION}
+            isPending={isPending}
+            title={localization.SESSIONS}
+        >
+            <CardContent className={cn("grid gap-4", classNames?.content)}>
+                {isPending ? (
+                    <SettingsCellSkeleton classNames={classNames} />
+                ) : (
+                    sessions?.map((session) => (
+                        <SessionCell
+                            key={session.id}
+                            classNames={classNames}
+                            localization={localization}
+                            session={session}
+                            refetch={refetch}
+                        />
+                    ))
+                )}
+            </CardContent>
+        </SettingsCard>
+    )
+}

package/src/components/settings/security-settings-cards.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import { useContext } from "react"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn } from "../../lib/utils"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import { DeleteAccountCard } from "./account/delete-account-card"
+import { PasskeysCard } from "./passkey/passkeys-card"
+import { ProvidersCard } from "./providers/providers-card"
+import { ChangePasswordCard } from "./security/change-password-card"
+import { SessionsCard } from "./security/sessions-card"
+import type { SettingsCardClassNames } from "./shared/settings-card"
+import { TwoFactorCard } from "./two-factor/two-factor-card"
+
+export function SecuritySettingsCards({
+    className,
+    classNames,
+    localization
+}: {
+    className?: string
+    classNames?: {
+        card?: SettingsCardClassNames
+        cards?: string
+    }
+    localization?: Partial<AuthLocalization>
+}) {
+    const {
+        credentials,
+        deleteUser,
+        hooks,
+        localization: contextLocalization,
+        passkey,
+        social,
+        genericOAuth,
+        twoFactor
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { useListAccounts } = hooks
+
+    const {
+        data: accounts,
+        isPending: accountsPending,
+        refetch: refetchAccounts
+    } = useListAccounts()
+
+    const credentialsLinked = accounts?.some(
+        (acc) => acc.providerId === "credential"
+    )
+
+    return (
+        <div
+            className={cn(
+                "flex w-full flex-col gap-4 md:gap-6",
+                className,
+                classNames?.cards
+            )}
+        >
+            {credentials && (
+                <ChangePasswordCard
+                    accounts={accounts}
+                    classNames={classNames?.card}
+                    isPending={accountsPending}
+                    localization={localization}
+                    skipHook
+                />
+            )}
+
+            {(social?.providers?.length || genericOAuth?.providers?.length) && (
+                <ProvidersCard
+                    accounts={accounts}
+                    classNames={classNames?.card}
+                    isPending={accountsPending}
+                    localization={localization}
+                    refetch={refetchAccounts}
+                    skipHook
+                />
+            )}
+
+            {twoFactor && credentialsLinked && (
+                <TwoFactorCard
+                    classNames={classNames?.card}
+                    localization={localization}
+                />
+            )}
+
+            {passkey && (
+                <PasskeysCard
+                    classNames={classNames?.card}
+                    localization={localization}
+                />
+            )}
+
+            <SessionsCard
+                classNames={classNames?.card}
+                localization={localization}
+            />
+
+            {deleteUser && (
+                <DeleteAccountCard
+                    accounts={accounts}
+                    classNames={classNames?.card}
+                    isPending={accountsPending}
+                    localization={localization}
+                    skipHook
+                />
+            )}
+        </div>
+    )
+}