better-auth-ui 3.2.5

package/src/components/auth/forms/email-otp-form.tsx

@@ -0,0 +1,288 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader2 } from "lucide-react"
+import { useContext, useEffect, useState } from "react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { useIsHydrated } from "../../../hooks/use-hydrated"
+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 { InputOTP } from "../../ui/input-otp"
+import type { AuthFormClassNames } from "../auth-form"
+import { OTPInputGroup } from "../otp-input-group"
+
+export interface EmailOTPFormProps {
+    className?: string
+    classNames?: AuthFormClassNames
+    callbackURL?: string
+    isSubmitting?: boolean
+    localization: Partial<AuthLocalization>
+    otpSeparators?: 0 | 1 | 2
+    redirectTo?: string
+    setIsSubmitting?: (value: boolean) => void
+}
+
+export function EmailOTPForm(props: EmailOTPFormProps) {
+    const [email, setEmail] = useState<string | undefined>()
+
+    if (!email) {
+        return <EmailForm {...props} setEmail={setEmail} />
+    }
+
+    return <OTPForm {...props} email={email} />
+}
+
+function EmailForm({
+    className,
+    classNames,
+    isSubmitting,
+    localization,
+    setIsSubmitting,
+    setEmail
+}: EmailOTPFormProps & {
+    setEmail: (email: string) => void
+}) {
+    const isHydrated = useIsHydrated()
+
+    const {
+        authClient,
+        localization: contextLocalization,
+        toast
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const formSchema = z.object({
+        email: z.string().email({
+            message: `${localization.EMAIL} ${localization.IS_INVALID}`
+        })
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: ""
+        }
+    })
+
+    isSubmitting = isSubmitting || form.formState.isSubmitting
+
+    useEffect(() => {
+        setIsSubmitting?.(form.formState.isSubmitting)
+    }, [form.formState.isSubmitting, setIsSubmitting])
+
+    async function sendEmailOTP({ email }: z.infer<typeof formSchema>) {
+        try {
+            await authClient.emailOtp.sendVerificationOtp({
+                email,
+                type: "sign-in",
+                fetchOptions: { throw: true }
+            })
+
+            toast({
+                variant: "success",
+                message: localization.EMAIL_OTP_VERIFICATION_SENT
+            })
+
+            setEmail(email)
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(sendEmailOTP)}
+                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}>
+                                {localization.EMAIL}
+                            </FormLabel>
+
+                            <FormControl>
+                                <Input
+                                    className={classNames?.input}
+                                    type="email"
+                                    placeholder={localization.EMAIL_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.EMAIL_OTP_SEND_ACTION
+                    )}
+                </Button>
+            </form>
+        </Form>
+    )
+}
+
+export function OTPForm({
+    className,
+    classNames,
+    isSubmitting,
+    localization,
+    otpSeparators = 0,
+    redirectTo,
+    setIsSubmitting,
+    email
+}: EmailOTPFormProps & {
+    email: string
+}) {
+    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.EMAIL_OTP} ${localization.IS_REQUIRED}`
+            })
+            .min(6, {
+                message: `${localization.EMAIL_OTP} ${localization.IS_INVALID}`
+            })
+    })
+
+    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 verifyCode({ code }: z.infer<typeof formSchema>) {
+        try {
+            await authClient.signIn.emailOtp({
+                email,
+                otp: code,
+                fetchOptions: { throw: true }
+            })
+
+            await onSuccess()
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+
+            form.reset()
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(verifyCode)}
+                className={cn("grid w-full gap-6", className, classNames?.base)}
+            >
+                <FormField
+                    control={form.control}
+                    name="code"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel className={classNames?.label}>
+                                {localization.EMAIL_OTP}
+                            </FormLabel>
+
+                            <FormControl>
+                                <InputOTP
+                                    {...field}
+                                    maxLength={6}
+                                    onChange={(value) => {
+                                        field.onChange(value)
+
+                                        if (value.length === 6) {
+                                            form.handleSubmit(verifyCode)()
+                                        }
+                                    }}
+                                    containerClassName={
+                                        classNames?.otpInputContainer
+                                    }
+                                    className={classNames?.otpInput}
+                                    disabled={isSubmitting}
+                                >
+                                    <OTPInputGroup
+                                        otpSeparators={otpSeparators}
+                                    />
+                                </InputOTP>
+                            </FormControl>
+
+                            <FormMessage className={classNames?.error} />
+                        </FormItem>
+                    )}
+                />
+
+                <div className="grid gap-4">
+                    <Button
+                        type="submit"
+                        disabled={isSubmitting}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.primaryButton
+                        )}
+                    >
+                        {isSubmitting && <Loader2 className="animate-spin" />}
+                        {localization.EMAIL_OTP_VERIFY_ACTION}
+                    </Button>
+                </div>
+            </form>
+        </Form>
+    )
+}

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

@@ -0,0 +1,168 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import type { BetterFetchOption } from "better-auth/react"
+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 { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn, getLocalizedError } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import { Captcha } from "../../captcha/captcha"
+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 ForgotPasswordFormProps {
+    className?: string
+    classNames?: AuthFormClassNames
+    isSubmitting?: boolean
+    localization: Partial<AuthLocalization>
+    setIsSubmitting?: (value: boolean) => void
+}
+
+export function ForgotPasswordForm({
+    className,
+    classNames,
+    isSubmitting,
+    localization,
+    setIsSubmitting
+}: ForgotPasswordFormProps) {
+    const isHydrated = useIsHydrated()
+    const { captchaRef, getCaptchaHeaders, resetCaptcha } = useCaptcha({
+        localization
+    })
+
+    const {
+        authClient,
+        basePath,
+        baseURL,
+        localization: contextLocalization,
+        navigate,
+        toast,
+        viewPaths
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const formSchema = z.object({
+        email: z
+            .string()
+            .email({
+                message: `${localization.EMAIL} ${localization.IS_INVALID}`
+            })
+            .min(1, {
+                message: `${localization.EMAIL} ${localization.IS_REQUIRED}`
+            })
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: ""
+        }
+    })
+
+    isSubmitting = isSubmitting || form.formState.isSubmitting
+
+    useEffect(() => {
+        setIsSubmitting?.(form.formState.isSubmitting)
+    }, [form.formState.isSubmitting, setIsSubmitting])
+
+    async function forgotPassword({ email }: z.infer<typeof formSchema>) {
+        try {
+            const fetchOptions: BetterFetchOption = {
+                throw: true,
+                headers: await getCaptchaHeaders("/forget-password")
+            }
+
+            await authClient.requestPasswordReset({
+                email,
+                redirectTo: `${baseURL}${basePath}/${viewPaths.RESET_PASSWORD}`,
+                fetchOptions
+            })
+
+            toast({
+                variant: "success",
+                message: localization.FORGOT_PASSWORD_EMAIL
+            })
+
+            navigate(
+                `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
+            )
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+            resetCaptcha()
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(forgotPassword)}
+                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}>
+                                {localization.EMAIL}
+                            </FormLabel>
+
+                            <FormControl>
+                                <Input
+                                    className={classNames?.input}
+                                    type="email"
+                                    placeholder={localization.EMAIL_PLACEHOLDER}
+                                    disabled={isSubmitting}
+                                    {...field}
+                                />
+                            </FormControl>
+
+                            <FormMessage className={classNames?.error} />
+                        </FormItem>
+                    )}
+                />
+
+                <Captcha
+                    ref={captchaRef}
+                    localization={localization}
+                    action="/forget-password"
+                />
+
+                <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className={cn(
+                        "w-full",
+                        classNames?.button,
+                        classNames?.primaryButton
+                    )}
+                >
+                    {isSubmitting ? (
+                        <Loader2 className="animate-spin" />
+                    ) : (
+                        localization.FORGOT_PASSWORD_ACTION
+                    )}
+                </Button>
+            </form>
+        </Form>
+    )
+}

package/src/components/auth/forms/magic-link-form.tsx

@@ -0,0 +1,191 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import type { BetterFetchOption } from "better-auth/react"
+import { Loader2 } from "lucide-react"
+import { useCallback, 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 { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn, getLocalizedError, getSearchParam } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import { Captcha } from "../../captcha/captcha"
+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 MagicLinkFormProps {
+    className?: string
+    classNames?: AuthFormClassNames
+    callbackURL?: string
+    isSubmitting?: boolean
+    localization: Partial<AuthLocalization>
+    redirectTo?: string
+    setIsSubmitting?: (value: boolean) => void
+}
+
+export function MagicLinkForm({
+    className,
+    classNames,
+    callbackURL: callbackURLProp,
+    isSubmitting,
+    localization,
+    redirectTo: redirectToProp,
+    setIsSubmitting
+}: MagicLinkFormProps) {
+    const isHydrated = useIsHydrated()
+    const { captchaRef, getCaptchaHeaders, resetCaptcha } = useCaptcha({
+        localization
+    })
+
+    const {
+        authClient,
+        basePath,
+        baseURL,
+        persistClient,
+        localization: contextLocalization,
+        redirectTo: contextRedirectTo,
+        viewPaths,
+        toast
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const getRedirectTo = useCallback(
+        () =>
+            redirectToProp || getSearchParam("redirectTo") || contextRedirectTo,
+        [redirectToProp, contextRedirectTo]
+    )
+
+    const getCallbackURL = useCallback(
+        () =>
+            `${baseURL}${
+                callbackURLProp ||
+                (persistClient
+                    ? `${basePath}/${viewPaths.CALLBACK}?redirectTo=${getRedirectTo()}`
+                    : getRedirectTo())
+            }`,
+        [
+            callbackURLProp,
+            persistClient,
+            basePath,
+            viewPaths,
+            baseURL,
+            getRedirectTo
+        ]
+    )
+
+    const formSchema = z.object({
+        email: z.string().email({
+            message: `${localization.EMAIL} ${localization.IS_INVALID}`
+        })
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: ""
+        }
+    })
+
+    isSubmitting = isSubmitting || form.formState.isSubmitting
+
+    useEffect(() => {
+        setIsSubmitting?.(form.formState.isSubmitting)
+    }, [form.formState.isSubmitting, setIsSubmitting])
+
+    async function sendMagicLink({ email }: z.infer<typeof formSchema>) {
+        try {
+            const fetchOptions: BetterFetchOption = {
+                throw: true,
+                headers: await getCaptchaHeaders("/sign-in/magic-link")
+            }
+
+            await authClient.signIn.magicLink({
+                email,
+                callbackURL: getCallbackURL(),
+                fetchOptions
+            })
+
+            toast({
+                variant: "success",
+                message: localization.MAGIC_LINK_EMAIL
+            })
+
+            form.reset()
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+            resetCaptcha()
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(sendMagicLink)}
+                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}>
+                                {localization.EMAIL}
+                            </FormLabel>
+
+                            <FormControl>
+                                <Input
+                                    className={classNames?.input}
+                                    type="email"
+                                    placeholder={localization.EMAIL_PLACEHOLDER}
+                                    disabled={isSubmitting}
+                                    {...field}
+                                />
+                            </FormControl>
+
+                            <FormMessage className={classNames?.error} />
+                        </FormItem>
+                    )}
+                />
+
+                <Captcha
+                    ref={captchaRef}
+                    localization={localization}
+                    action="/sign-in/magic-link"
+                />
+
+                <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className={cn(
+                        "w-full",
+                        classNames?.button,
+                        classNames?.primaryButton
+                    )}
+                >
+                    {isSubmitting ? (
+                        <Loader2 className="animate-spin" />
+                    ) : (
+                        localization.MAGIC_LINK_ACTION
+                    )}
+                </Button>
+            </form>
+        </Form>
+    )
+}