Email OTP

1"use client"
2 
3import { authMutationKeys } from "@better-auth-ui/core"
4import {
5  type EmailOtpAuthClient,
6  useAuth,
7  useAuthPlugin,
8  useSendVerificationOtp,
9  useSignInEmailOtp
10} from "@better-auth-ui/react"
11import { useIsMutating } from "@tanstack/react-query"
12import { type SyntheticEvent, useState } from "react"
13 
14import { Button } from "@/components/ui/button"
15import {
16  Card,
17  CardContent,
18  CardDescription,
19  CardHeader,
20  CardTitle
21} from "@/components/ui/card"
22import {
23  Field,
24  FieldDescription,
25  FieldError,
26  FieldGroup,
27  FieldLabel,
28  FieldSeparator
29} from "@/components/ui/field"
30import { Input } from "@/components/ui/input"
31import { Spinner } from "@/components/ui/spinner"
32import { emailOtpPlugin } from "@/lib/auth/email-otp-plugin"
33import { useResendCooldown } from "@/lib/auth/use-resend-cooldown"
34import { useSignInContinuation } from "@/lib/auth/use-sign-in-continuation"
35import { cn } from "@/lib/utils"
36import { OpenEmailButton } from "../open-email-button"
37import { OtpField } from "../otp-field"
38import { ProviderButtons, type SocialLayout } from "../provider-buttons"
39 
40export type EmailOtpProps = {
41  className?: string
42  socialLayout?: SocialLayout
43  socialPosition?: "top" | "bottom"
44}
45 
46/**
47 * Passwordless sign-in with an emailed one-time code.
48 *
49 * Two steps on one route: enter an email, then enter the code that arrives.
50 * The email step never reveals whether an account exists — the server decides
51 * whether the code creates an account, mirroring `emailOTP({ disableSignUp })`.
52 *
53 * @param socialLayout - Provider button layout.
54 * @param socialPosition - `"top"` or `"bottom"`. Defaults to `"bottom"`.
55 */
56export function EmailOtp({
57  className,
58  socialLayout,
59  socialPosition = "bottom"
60}: EmailOtpProps) {
61  const {
62    authClient,
63    basePaths,
64    emailAndPassword,
65    localization,
66    plugins,
67    socialProviders,
68    viewPaths,
69    Link
70  } = useAuth()
71  const { localization: emailOtpLocalization, otpLength } =
72    useAuthPlugin(emailOtpPlugin)
73 
74  const otpClient = authClient as EmailOtpAuthClient
75  const continueSignIn = useSignInContinuation()
76  const { cooldown, isCoolingDown, startCooldown } = useResendCooldown()
77 
78  const [email, setEmail] = useState("")
79  const [code, setCode] = useState("")
80  const [codeSent, setCodeSent] = useState(false)
81  const [fieldErrors, setFieldErrors] = useState<{ email?: string }>({})
82 
83  const { mutate: sendVerificationOtp, isPending: isSending } =
84    useSendVerificationOtp(otpClient, {
85// … truncated