sarlink-portal/components/auth/verify-otp-form.tsx

"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<z.infer<typeof OTPSchema>>({
		defaultValues: {
			pin: "",
		},
		resolver: zodResolver(OTPSchema),
	});
	const searchParams = useSearchParams();
	const callbackUrl = searchParams.get("callbackUrl") || "/dashboard";

	const onSubmit: SubmitHandler<z.infer<typeof OTPSchema>> = (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 (
		<form
			onSubmit={handleSubmit(onSubmit)}
			className="w-full max-w-xs  rounded-lg shadow my-4"
		>
			<div className="grid pb-4 pt-4 gap-4 px-4">
				<div className="">
					<Label htmlFor="otp-number" className="text-gray-500">
						Enter the OTP
					</Label>
					<Input
						disabled={isPending}
						id="otp-number"
						{...register("pin")}
						type="text"
					/>
					{errors.pin && (
						<p className="text-red-500 text-sm">{errors.pin.message}</p>
					)}
				</div>
				<Button className="w-full" disabled={isPending} type="submit">
					{isPending ? <Loader2 className="animate-spin" /> : "Login"}
				</Button>
			</div>
			<div className="mb-4 text-center text-sm">
				Go back to{" "}
				<Link href="signin" className="underline">
					login
				</Link>
			</div>
		</form>
	);
}