Phone Number

1"use client"
2 
3import { authMutationKeys } from "@better-auth-ui/core"
4import {
5  AuthPrompts,
6  type PhoneNumberAuthClient,
7  useAuth,
8  useAuthPlugin,
9  useFetchOptions,
10  useSendPhoneNumberOtp,
11  useSignInPhoneNumber,
12  useVerifyPhoneNumber
13} from "@better-auth-ui/react"
14import { useIsMutating } from "@tanstack/react-query"
15import { Eye, EyeOff } from "lucide-react"
16import { type SyntheticEvent, useState } from "react"
17 
18import { Button } from "@/components/ui/button"
19import {
20  Card,
21  CardContent,
22  CardDescription,
23  CardHeader,
24  CardTitle
25} from "@/components/ui/card"
26import { Checkbox } from "@/components/ui/checkbox"
27import {
28  Field,
29  FieldDescription,
30  FieldError,
31  FieldGroup,
32  FieldLabel,
33  FieldSeparator
34} from "@/components/ui/field"
35import { Input } from "@/components/ui/input"
36import {
37  InputGroup,
38  InputGroupAddon,
39  InputGroupButton,
40  InputGroupInput
41} from "@/components/ui/input-group"
42import { Spinner } from "@/components/ui/spinner"
43import { phoneNumberPlugin } from "@/lib/auth/phone-number-plugin"
44import { useResendCooldown } from "@/lib/auth/use-resend-cooldown"
45import { useSignInContinuation } from "@/lib/auth/use-sign-in-continuation"
46import { cn } from "@/lib/utils"
47import { OtpField } from "../otp-field"
48import { ProviderButtons, type SocialLayout } from "../provider-buttons"
49 
50type PhoneNumberMode = "code" | "password"
51 
52export type PhoneNumberProps = {
53  className?: string
54  socialLayout?: SocialLayout
55  socialPosition?: "top" | "bottom"
56}
57 
58/** Sign in with either a phone verification code or a phone and password. */
59export function PhoneNumber({
60  className,
61  socialLayout,
62  socialPosition = "bottom"
63}: PhoneNumberProps) {
64  const {
65    authClient,
66    basePaths,
67    emailAndPassword,
68    localization,
69    plugins,
70    socialProviders,
71    viewPaths,
72    Link
73  } = useAuth()
74  const {
75    localization: phoneLocalization,
76    otpLength,
77    passwordReset,
78    passwordSignIn,
79    signIn,
80    viewPaths: phoneNumberViewPaths
81  } = useAuthPlugin(phoneNumberPlugin)
82  const phoneClient = authClient as PhoneNumberAuthClient
83  const { fetchOptions, resetFetchOptions } = useFetchOptions()
84  const continueSignIn = useSignInContinuation()
85  const { cooldown, isCoolingDown, startCooldown } = useResendCooldown()
86  const [mode, setMode] = useState<PhoneNumberMode>(
87    signIn ? "code" : "password"
88  )
89  const [phoneNumber, setPhoneNumber] = useState("")
90  const [password, setPassword] = useState("")
91// … truncated