"use client"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { zodResolver } from "@hookform/resolvers/zod"; import { Loader2 } from "lucide-react"; import { signIn } from "next-auth/react"; import Link from "next/link"; import { useRouter, useSearchParams } from "next/navigation"; import { useTransition } from "react"; import { type SubmitHandler, useForm } from "react-hook-form"; import { toast } from "sonner"; import { z } from "zod"; const OTPSchema = z.object({ pin: z.string().min(6, { message: "Your one-time password must be 6 characters.", }), }); export default function VerifyOTPForm({ phone_number, }: { phone_number: string }) { const [isPending, startTransition] = useTransition(); const router = useRouter(); console.log("verification in OTP form", phone_number); const { register, handleSubmit, formState: { errors }, } = useForm>({ defaultValues: { pin: "", }, resolver: zodResolver(OTPSchema), }); const searchParams = useSearchParams(); const callbackUrl = searchParams.get("callbackUrl") || "/dashboard"; const onSubmit: SubmitHandler> = (data) => { startTransition(async () => { const nextAuth = await signIn("credentials", { pin: data.pin, callbackUrl, redirect: false, }); if (!nextAuth?.error) { router.push("/devices"); } else { toast.error(JSON.parse(nextAuth?.error ?? "").message); } }); }; // "{\"message\":\"The token you entered isn't valid.\",\"status\":400}" return (
{errors.pin && (

{errors.pin.message}

)}
Go back to{" "} login
); }