Two-Factor

1"use client"
2 
3import { REGEXP_ONLY_DIGITS } from "input-otp"
4import { useId } from "react"
5 
6import { Field, FieldError, FieldLabel } from "@/components/ui/field"
7import {
8  InputOTP,
9  InputOTPGroup,
10  InputOTPSlot
11} from "@/components/ui/input-otp"
12import { cn } from "@/lib/utils"
13 
14export type OtpFieldProps = {
15  /** Visible label rendered above the slots. */
16  label: string
17  /** Number of slots — keep in sync with the server's code length. */
18  length: number
19  value: string
20  onChange: (value: string) => void
21  onComplete?: (value: string) => void
22  autoFocus?: boolean
23  className?: string
24  errorMessage?: string
25  disabled?: boolean
26  name?: string
27}
28 
29/** Strip everything the numeric slots can't hold — pasted codes often carry spaces or dashes. */
30function normalizeCode(value: string) {
31  return value.replace(/\D/g, "")
32}
33 
34/**
35 * Labelled one-time-code input.
36 *
37 * Shared by every code-based flow (email OTP, two-factor challenge,
38 * two-factor enrollment) so slot sizing, pasting, and error wiring behave the
39 * same everywhere.
40 *
41 * @param label - Visible label, also used as the accessible name.
42 * @param length - Number of code characters.
43 * @param errorMessage - Rendered below the slots when set.
44 */
45export function OtpField({
46  autoFocus,
47  className,
48  disabled,
49  errorMessage,
50  label,
51  length,
52  name,
53  onChange,
54  onComplete,
55  value
56}: OtpFieldProps) {
57  const inputId = useId()
58 
59  return (
60    <Field className={cn(className)} data-invalid={!!errorMessage}>
61      <FieldLabel htmlFor={inputId}>{label}</FieldLabel>
62 
63      <InputOTP
64        aria-invalid={!!errorMessage}
65        aria-label={label}
66        autoComplete="one-time-code"
67        autoFocus={autoFocus}
68        containerClassName="w-full justify-center"
69        disabled={disabled}
70        id={inputId}
71        inputMode="numeric"
72        maxLength={length}
73        name={name}
74        pasteTransformer={normalizeCode}
75        pattern={REGEXP_ONLY_DIGITS}
76        value={value}
77        onChange={(next) => onChange(normalizeCode(next))}
78        onComplete={(completedCode) =>
79          onComplete?.(normalizeCode(completedCode))
80        }
81      >
82        <InputOTPGroup>
83          {Array.from({ length }, (_, slotIndex) => (
84            <InputOTPSlot
85              index={slotIndex}
86              key={`otp-slot-${String(slotIndex + 1)}`}
87            />
88          ))}
89        </InputOTPGroup>
90      </InputOTP>
91 
92      <FieldError>{errorMessage}</FieldError>
93    </Field>
94  )
95}