Device Authorization

1"use client"
2 
3import type { DeviceAuthorizationLocalization } from "@better-auth-ui/core/plugins"
4import {
5  type DeviceAuthorizationAuthClient,
6  useApproveDevice,
7  useAuth,
8  useAuthPlugin,
9  useDenyDevice,
10  useSession,
11  useVerifyDeviceCode
12} from "@better-auth-ui/react"
13import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
14import { CheckIcon, CircleCheckIcon, CircleXIcon, XIcon } from "lucide-react"
15import {
16  type FormEvent,
17  type ReactNode,
18  useCallback,
19  useEffect,
20  useReducer,
21  useRef,
22  useState
23} from "react"
24 
25import { Button } from "@/components/ui/button"
26import {
27  Card,
28  CardContent,
29  CardDescription,
30  CardFooter,
31  CardHeader,
32  CardTitle
33} from "@/components/ui/card"
34import {
35  Field,
36  FieldError,
37  FieldGroup,
38  FieldLabel
39} from "@/components/ui/field"
40import {
41  InputOTP,
42  InputOTPGroup,
43  InputOTPSeparator,
44  InputOTPSlot
45} from "@/components/ui/input-otp"
46import { Separator } from "@/components/ui/separator"
47import { Spinner } from "@/components/ui/spinner"
48import { deviceAuthorizationPlugin } from "@/lib/auth/device-authorization-plugin"
49import { cn } from "@/lib/utils"
50 
51type DeviceAuthorizationStep = "code" | "approval" | "approved" | "denied"
52 
53type DeviceAuthorizationState = {
54  step: DeviceAuthorizationStep
55  codeError: string
56}
57 
58type DeviceAuthorizationAction =
59  | { type: "codeChanged" }
60  | { type: "verificationFailed"; message: string }
61  | { type: "verificationSucceeded"; status: string }
62  | { type: "approved" }
63  | { type: "denied" }
64 
65const initialDeviceAuthorizationState: DeviceAuthorizationState = {
66  step: "code",
67  codeError: ""
68}
69 
70function deviceAuthorizationReducer(
71  state: DeviceAuthorizationState,
72  action: DeviceAuthorizationAction
73): DeviceAuthorizationState {
74  switch (action.type) {
75    case "codeChanged":
76      return state.codeError ? { ...state, codeError: "" } : state
77    case "verificationFailed":
78      return { step: "code", codeError: action.message }
79    case "verificationSucceeded":
80      if (action.status === "approved") {
81        return { step: "approved", codeError: "" }
82      }
83      if (action.status === "denied") {
84        return { step: "denied", codeError: "" }
85      }
86      return { step: "approval", codeError: "" }
87    case "approved":
88      return { step: "approved", codeError: "" }
89    case "denied":
90      return { step: "denied", codeError: "" }
91  }
92}
93 
94function normalizeDeviceCode(value: string) {
95  return value.replace(/-/g, "").trim().toUpperCase()
96}
97 
98// … truncated