better-auth-ui 3.2.5

package/src/components/auth/forms/recover-account-form.tsx

@@ -0,0 +1,138 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader2 } from "lucide-react"
+import { useContext, useEffect } from "react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { useOnSuccessTransition } from "../../../hooks/use-success-transition"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn, getLocalizedError } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import { Button } from "../../ui/button"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "../../ui/form"
+import { Input } from "../../ui/input"
+import type { AuthFormClassNames } from "../auth-form"
+
+export interface RecoverAccountFormProps {
+    className?: string
+    classNames?: AuthFormClassNames
+    isSubmitting?: boolean
+    localization: Partial<AuthLocalization>
+    redirectTo?: string
+    setIsSubmitting?: (value: boolean) => void
+}
+
+export function RecoverAccountForm({
+    className,
+    classNames,
+    isSubmitting,
+    localization,
+    redirectTo,
+    setIsSubmitting
+}: RecoverAccountFormProps) {
+    const {
+        authClient,
+        localization: contextLocalization,
+        toast
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
+        redirectTo
+    })
+
+    const formSchema = z.object({
+        code: z.string().min(1, { message: localization.BACKUP_CODE_REQUIRED })
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            code: ""
+        }
+    })
+
+    isSubmitting =
+        isSubmitting || form.formState.isSubmitting || transitionPending
+
+    useEffect(() => {
+        setIsSubmitting?.(form.formState.isSubmitting || transitionPending)
+    }, [form.formState.isSubmitting, transitionPending, setIsSubmitting])
+
+    async function verifyBackupCode({ code }: z.infer<typeof formSchema>) {
+        try {
+            await authClient.twoFactor.verifyBackupCode({
+                code,
+                fetchOptions: { throw: true }
+            })
+
+            await onSuccess()
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+
+            form.reset()
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(verifyBackupCode)}
+                className={cn("grid gap-6", className, classNames?.base)}
+            >
+                <FormField
+                    control={form.control}
+                    name="code"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel className={classNames?.label}>
+                                {localization.BACKUP_CODE}
+                            </FormLabel>
+
+                            <FormControl>
+                                <Input
+                                    placeholder={
+                                        localization.BACKUP_CODE_PLACEHOLDER
+                                    }
+                                    autoComplete="off"
+                                    className={classNames?.input}
+                                    disabled={isSubmitting}
+                                    {...field}
+                                />
+                            </FormControl>
+
+                            <FormMessage className={classNames?.error} />
+                        </FormItem>
+                    )}
+                />
+
+                <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className={cn(
+                        classNames?.button,
+                        classNames?.primaryButton
+                    )}
+                >
+                    {isSubmitting ? (
+                        <Loader2 className="animate-spin" />
+                    ) : (
+                        localization.RECOVER_ACCOUNT_ACTION
+                    )}
+                </Button>
+            </form>
+        </Form>
+    )
+}

package/src/components/auth/forms/reset-password-form.tsx

@@ -0,0 +1,215 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader2 } from "lucide-react"
+import { useContext, useEffect, useRef } 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 { Button } from "../../ui/button"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "../../ui/form"
+import type { AuthFormClassNames } from "../auth-form"
+
+export interface ResetPasswordFormProps {
+    className?: string
+    classNames?: AuthFormClassNames
+    localization: Partial<AuthLocalization>
+    passwordValidation?: PasswordValidation
+}
+
+export function ResetPasswordForm({
+    className,
+    classNames,
+    localization,
+    passwordValidation
+}: ResetPasswordFormProps) {
+    const tokenChecked = useRef(false)
+
+    const {
+        authClient,
+        basePath,
+        credentials,
+        localization: contextLocalization,
+        viewPaths,
+        navigate,
+        toast
+    } = useContext(AuthUIContext)
+
+    const confirmPasswordEnabled = credentials?.confirmPassword
+    const contextPasswordValidation = credentials?.passwordValidation
+
+    localization = { ...contextLocalization, ...localization }
+    passwordValidation = { ...contextPasswordValidation, ...passwordValidation }
+
+    const formSchema = z
+        .object({
+            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: {
+            newPassword: "",
+            confirmPassword: ""
+        }
+    })
+
+    const isSubmitting = form.formState.isSubmitting
+
+    useEffect(() => {
+        if (tokenChecked.current) return
+        tokenChecked.current = true
+
+        const searchParams = new URLSearchParams(window.location.search)
+        const token = searchParams.get("token")
+
+        if (!token || token === "INVALID_TOKEN") {
+            navigate(
+                `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
+            )
+            toast({ variant: "error", message: localization.INVALID_TOKEN })
+        }
+    }, [basePath, navigate, toast, viewPaths, localization])
+
+    async function resetPassword({ newPassword }: z.infer<typeof formSchema>) {
+        try {
+            const searchParams = new URLSearchParams(window.location.search)
+            const token = searchParams.get("token") as string
+
+            await authClient.resetPassword({
+                newPassword,
+                token,
+                fetchOptions: { throw: true }
+            })
+
+            toast({
+                variant: "success",
+                message: localization.RESET_PASSWORD_SUCCESS
+            })
+
+            navigate(
+                `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
+            )
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+
+            form.reset()
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(resetPassword)}
+                className={cn("grid w-full gap-6", className, classNames?.base)}
+            >
+                <FormField
+                    control={form.control}
+                    name="newPassword"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel className={classNames?.label}>
+                                {localization.NEW_PASSWORD}
+                            </FormLabel>
+
+                            <FormControl>
+                                <PasswordInput
+                                    autoComplete="new-password"
+                                    className={classNames?.input}
+                                    placeholder={
+                                        localization.NEW_PASSWORD_PLACEHOLDER
+                                    }
+                                    disabled={isSubmitting}
+                                    {...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
+                                        autoComplete="new-password"
+                                        className={classNames?.input}
+                                        placeholder={
+                                            localization.CONFIRM_PASSWORD_PLACEHOLDER
+                                        }
+                                        disabled={isSubmitting}
+                                        {...field}
+                                    />
+                                </FormControl>
+
+                                <FormMessage className={classNames?.error} />
+                            </FormItem>
+                        )}
+                    />
+                )}
+
+                <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className={cn(
+                        "w-full",
+                        classNames?.button,
+                        classNames?.primaryButton
+                    )}
+                >
+                    {isSubmitting ? (
+                        <Loader2 className="animate-spin" />
+                    ) : (
+                        localization.RESET_PASSWORD_ACTION
+                    )}
+                </Button>
+            </form>
+        </Form>
+    )
+}

package/src/components/auth/forms/sign-in-form.tsx

@@ -0,0 +1,289 @@
+"use client"
+
+import type { BetterFetchOption } from "@better-fetch/fetch"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader2 } from "lucide-react"
+import { useContext, useEffect } from "react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { useCaptcha } from "../../../hooks/use-captcha"
+import { useIsHydrated } from "../../../hooks/use-hydrated"
+import { useOnSuccessTransition } from "../../../hooks/use-success-transition"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import {
+    cn,
+    getLocalizedError,
+    getPasswordSchema,
+    isValidEmail
+} from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import type { PasswordValidation } from "../../../types/password-validation"
+import { Captcha } from "../../captcha/captcha"
+import { PasswordInput } from "../../password-input"
+import { Button } from "../../ui/button"
+import { Checkbox } from "../../ui/checkbox"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "../../ui/form"
+import { Input } from "../../ui/input"
+import type { AuthFormClassNames } from "../auth-form"
+
+export interface SignInFormProps {
+    className?: string
+    classNames?: AuthFormClassNames
+    isSubmitting?: boolean
+    localization: Partial<AuthLocalization>
+    redirectTo?: string
+    setIsSubmitting?: (isSubmitting: boolean) => void
+    passwordValidation?: PasswordValidation
+}
+
+export function SignInForm({
+    className,
+    classNames,
+    isSubmitting,
+    localization,
+    redirectTo,
+    setIsSubmitting,
+    passwordValidation
+}: SignInFormProps) {
+    const isHydrated = useIsHydrated()
+    const { captchaRef, getCaptchaHeaders, resetCaptcha } = useCaptcha({
+        localization
+    })
+
+    const {
+        authClient,
+        basePath,
+        credentials,
+        localization: contextLocalization,
+        viewPaths,
+        navigate,
+        toast,
+        Link
+    } = useContext(AuthUIContext)
+
+    const rememberMeEnabled = credentials?.rememberMe
+    const usernameEnabled = credentials?.username
+    const contextPasswordValidation = credentials?.passwordValidation
+
+    localization = { ...contextLocalization, ...localization }
+    passwordValidation = { ...contextPasswordValidation, ...passwordValidation }
+
+    const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
+        redirectTo
+    })
+
+    const formSchema = z.object({
+        email: usernameEnabled
+            ? z.string().min(1, {
+                  message: `${localization.USERNAME} ${localization.IS_REQUIRED}`
+              })
+            : z.string().email({
+                  message: `${localization.EMAIL} ${localization.IS_INVALID}`
+              }),
+        password: getPasswordSchema(passwordValidation, localization),
+        rememberMe: z.boolean().optional()
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: "",
+            password: "",
+            rememberMe: !rememberMeEnabled
+        }
+    })
+
+    isSubmitting =
+        isSubmitting || form.formState.isSubmitting || transitionPending
+
+    useEffect(() => {
+        setIsSubmitting?.(form.formState.isSubmitting || transitionPending)
+    }, [form.formState.isSubmitting, transitionPending, setIsSubmitting])
+
+    async function signIn({
+        email,
+        password,
+        rememberMe
+    }: z.infer<typeof formSchema>) {
+        try {
+            let response: Record<string, unknown> = {}
+
+            if (usernameEnabled && !isValidEmail(email)) {
+                const fetchOptions: BetterFetchOption = {
+                    throw: true,
+                    headers: await getCaptchaHeaders("/sign-in/username")
+                }
+
+                response = await authClient.signIn.username({
+                    username: email,
+                    password,
+                    rememberMe,
+                    fetchOptions
+                })
+            } else {
+                const fetchOptions: BetterFetchOption = {
+                    throw: true,
+                    headers: await getCaptchaHeaders("/sign-in/email")
+                }
+
+                response = await authClient.signIn.email({
+                    email,
+                    password,
+                    rememberMe,
+                    fetchOptions
+                })
+            }
+
+            if (response.twoFactorRedirect) {
+                navigate(
+                    `${basePath}/${viewPaths.TWO_FACTOR}${window.location.search}`
+                )
+            } else {
+                await onSuccess()
+            }
+        } catch (error) {
+            form.resetField("password")
+            resetCaptcha()
+
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(signIn)}
+                noValidate={isHydrated}
+                className={cn("grid w-full gap-6", className, classNames?.base)}
+            >
+                <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel className={classNames?.label}>
+                                {usernameEnabled
+                                    ? localization.USERNAME
+                                    : localization.EMAIL}
+                            </FormLabel>
+
+                            <FormControl>
+                                <Input
+                                    autoComplete={
+                                        usernameEnabled ? "username" : "email"
+                                    }
+                                    className={classNames?.input}
+                                    type={usernameEnabled ? "text" : "email"}
+                                    placeholder={
+                                        usernameEnabled
+                                            ? localization.SIGN_IN_USERNAME_PLACEHOLDER
+                                            : localization.EMAIL_PLACEHOLDER
+                                    }
+                                    disabled={isSubmitting}
+                                    {...field}
+                                />
+                            </FormControl>
+
+                            <FormMessage className={classNames?.error} />
+                        </FormItem>
+                    )}
+                />
+
+                <FormField
+                    control={form.control}
+                    name="password"
+                    render={({ field }) => (
+                        <FormItem>
+                            <div className="flex items-center justify-between">
+                                <FormLabel className={classNames?.label}>
+                                    {localization.PASSWORD}
+                                </FormLabel>
+
+                                {credentials?.forgotPassword && (
+                                    <Link
+                                        className={cn(
+                                            "text-sm hover:underline",
+                                            classNames?.forgotPasswordLink
+                                        )}
+                                        href={`${basePath}/${viewPaths.FORGOT_PASSWORD}${isHydrated ? window.location.search : ""}`}
+                                    >
+                                        {localization.FORGOT_PASSWORD_LINK}
+                                    </Link>
+                                )}
+                            </div>
+
+                            <FormControl>
+                                <PasswordInput
+                                    autoComplete="current-password"
+                                    className={classNames?.input}
+                                    placeholder={
+                                        localization.PASSWORD_PLACEHOLDER
+                                    }
+                                    disabled={isSubmitting}
+                                    {...field}
+                                />
+                            </FormControl>
+
+                            <FormMessage className={classNames?.error} />
+                        </FormItem>
+                    )}
+                />
+
+                {rememberMeEnabled && (
+                    <FormField
+                        control={form.control}
+                        name="rememberMe"
+                        render={({ field }) => (
+                            <FormItem className="flex">
+                                <FormControl>
+                                    <Checkbox
+                                        checked={field.value}
+                                        onCheckedChange={field.onChange}
+                                        disabled={isSubmitting}
+                                    />
+                                </FormControl>
+
+                                <FormLabel>
+                                    {localization.REMEMBER_ME}
+                                </FormLabel>
+                            </FormItem>
+                        )}
+                    />
+                )}
+
+                <Captcha
+                    ref={captchaRef}
+                    localization={localization}
+                    action="/sign-in/email"
+                />
+
+                <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className={cn(
+                        "w-full",
+                        classNames?.button,
+                        classNames?.primaryButton
+                    )}
+                >
+                    {isSubmitting ? (
+                        <Loader2 className="animate-spin" />
+                    ) : (
+                        localization.SIGN_IN_ACTION
+                    )}
+                </Button>
+            </form>
+        </Form>
+    )
+}