refactor: update authentication flow to use PIN instead of email/password, enhance OTP verification with NextAuth, and improve session handling in components

components/auth/verify-otp-form.tsx

@@ -5,8 +5,9 @@ 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 } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useTransition } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -33,22 +34,26 @@ export default function VerifyOTPForm({
 		},
 		resolver: zodResolver(OTPSchema),
 	});
+	const searchParams = useSearchParams();
+	const callbackUrl = searchParams.get("callbackUrl") || "/dashboard";
 
 	const onSubmit: SubmitHandler<z.infer<typeof OTPSchema>> = (data) => {
 		startTransition(async () => {
-			// const isVerified = await authClient.phoneNumber.verify({
-			// 	phoneNumber: phone_number,
-			// 	code: data.pin,
-			// });
-			// console.log({ isVerified });
-			// if (!isVerified.error) {
-			// 	router.push("/devices");
-			// } else {
-			// 	toast.error(isVerified.error.message);
-			// }
+			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)}
@@ -75,7 +80,7 @@ export default function VerifyOTPForm({
 			</div>
 			<div className="mb-4 text-center text-sm">
 				Go back to{" "}
-				<Link href="login" className="underline">
+				<Link href="signin" className="underline">
 					login
 				</Link>
 			</div>