Username

1"use client"
2 
3import {
4  type UsernameAuthClient,
5  useAuth,
6  useAuthPlugin,
7  useIsUsernameAvailable
8} from "@better-auth-ui/react"
9import { useDebouncer } from "@tanstack/react-pacer"
10import { Check, X } from "lucide-react"
11import { useState } from "react"
12import type { AdditionalFieldProps } from "@/components/auth/additional-field"
13import { Field, FieldError, FieldLabel } from "@/components/ui/field"
14import {
15  InputGroup,
16  InputGroupAddon,
17  InputGroupInput
18} from "@/components/ui/input-group"
19import { Spinner } from "@/components/ui/spinner"
20import { usernamePlugin } from "@/lib/auth/username-plugin"
21 
22/**
23 * Renderer for the `username` additional field. Owns availability checking,
24 * length limits, and visual indicators. `isInvalid` reflects only browser
25 * validation (minLength, required, etc.) — availability feedback is shown
26 * via the icon and `aria-label` without affecting the field's invalid state.
27 */
28export function UsernameField({
29  name,
30  field,
31  isPending
32}: AdditionalFieldProps) {
33  const { authClient, localization: authLocalization } = useAuth()
34  const {
35    localization,
36    minUsernameLength,
37    maxUsernameLength,
38    isUsernameAvailable: checkAvailability,
39    usernamePrefix
40  } = useAuthPlugin(usernamePlugin)
41 
42  const currentUsername = String(field.defaultValue ?? "")
43  const [value, setValue] = useState(currentUsername)
44  const [error, setError] = useState<string>()
45 
46  const {
47    mutate: requestAvailability,
48    data: availability,
49    error: availabilityError,
50    reset: resetAvailability
51  } = useIsUsernameAvailable(authClient as UsernameAuthClient, {
52    onError: () => {}
53  })
54 
55  const debouncer = useDebouncer(
56    (next: string) => {
57      const trimmed = next.trim()
58      if (!trimmed || trimmed === currentUsername) {
59        resetAvailability()
60        return
61      }
62 
63      requestAvailability({ username: trimmed })
64    },
65    { wait: 500 }
66  )
67 
68  function handleChange(next: string) {
69    setValue(next)
70    setError(undefined)
71    resetAvailability()
72 
73    if (checkAvailability) {
74      debouncer.maybeExecute(next)
75    }
76  }
77 
78  const isCheckingAvailability =
79    !!checkAvailability && !!value.trim() && value.trim() !== currentUsername
80 
81  return (
82    <Field data-invalid={!!error}>
83      <FieldLabel htmlFor={name}>{field.label}</FieldLabel>
84 
85      <InputGroup>
86        {usernamePrefix && (
87          <InputGroupAddon align="inline-start">
88            {usernamePrefix}
89          </InputGroupAddon>
90        )}
91 
92// … truncated