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

components/auth/signup-form.tsx

@@ -22,12 +22,10 @@ import type { ApiResponse, Atoll } from "@/lib/backend-types";
 import { getAtolls } from "@/queries/islands";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 
-
 export default function SignUpForm() {
 	const { data: atolls, isFetching } = useQuery<ApiResponse<Atoll>>({
 		queryKey: ["ATOLLS"],
-		queryFn: () =>
-			getAtolls(),
+		queryFn: () => getAtolls(),
 		placeholderData: keepPreviousData,
 		staleTime: 1,
 	});
@@ -38,29 +36,28 @@ export default function SignUpForm() {
 		message: "",
 	});
 
-
 	React.useEffect(() => {
-		console.log(atoll)
+		console.log(atoll);
 	}, [atoll]);
 
-
 	const params = useSearchParams();
 	const phoneNumberFromUrl = params.get("phone_number");
 	const NUMBER_WITHOUT_DASH = phoneNumberFromUrl?.split("-").join("");
 
-
 	if (actionState?.db_error === "invalidPersonValidation") {
 		return (
 			<>
-				<div className="h-24 w-72 text-center text-green-500 p-4 flex my-4 flex-col items-center justify-center border dark:title-bg bg-white dark:bg-black rounded-lg">{actionState.message}</div>
+				<div className="h-24 w-72 text-center text-green-500 p-4 flex my-4 flex-col items-center justify-center border dark:title-bg bg-white dark:bg-black rounded-lg">
+					{actionState.message}
+				</div>
 				<div className="mb-4 text-center text-sm">
-					Go to {" "}
+					Go to{" "}
 					<Link href="login" className="underline">
 						login
 					</Link>
 				</div>
 			</>
-		)
+		);
 	}
 	return (
 		<form
@@ -76,7 +73,8 @@ export default function SignUpForm() {
 					<Input
 						className={cn(
 							"text-base",
-							actionState?.errors?.fieldErrors.name && "border-2 border-red-500",
+							actionState?.errors?.fieldErrors.name &&
+								"border-2 border-red-500",
 						)}
 						name="name"
 						type="text"
@@ -99,11 +97,13 @@ export default function SignUpForm() {
 						type="text"
 						maxLength={7}
 						disabled={isPending}
-						defaultValue={(actionState?.payload?.get("id_card") || "") as string}
+						defaultValue={
+							(actionState?.payload?.get("id_card") || "") as string
+						}
 						className={cn(
 							"text-base",
 							actionState?.errors?.fieldErrors?.id_card &&
-							"border-2 border-red-500",
+								"border-2 border-red-500",
 						)}
 						placeholder="ID Card"
 					/>
@@ -126,8 +126,10 @@ export default function SignUpForm() {
 						<Select
 							disabled={isPending}
 							onValueChange={(v) => {
-								console.log({ v })
-								setAtoll(atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)));
+								console.log({ v });
+								setAtoll(
+									atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)),
+								);
 							}}
 							name="atoll_id"
 							value={atoll?.id?.toString() ?? ""}
@@ -187,7 +189,7 @@ export default function SignUpForm() {
 						className={cn(
 							"text-base",
 							actionState?.errors?.fieldErrors?.address &&
-							"border-2 border-red-500",
+								"border-2 border-red-500",
 						)}
 						disabled={isPending}
 						name="address"
@@ -211,7 +213,8 @@ export default function SignUpForm() {
 					<Input
 						className={cn(
 							"text-base",
-							actionState?.errors?.fieldErrors?.dob && "border-2 border-red-500",
+							actionState?.errors?.fieldErrors?.dob &&
+								"border-2 border-red-500",
 						)}
 						name="dob"
 						disabled={isPending}
@@ -233,7 +236,8 @@ export default function SignUpForm() {
 					<Input
 						className={cn(
 							"text-base",
-							actionState?.errors?.fieldErrors.accNo && "border-2 border-red-500",
+							actionState?.errors?.fieldErrors.accNo &&
+								"border-2 border-red-500",
 						)}
 						name="accNo"
 						type="number"
@@ -258,8 +262,8 @@ export default function SignUpForm() {
 						disabled={isPending}
 						className={cn(
 							!phoneNumberFromUrl &&
-							actionState?.errors?.fieldErrors?.phone_number &&
-							"border-2 border-red-500 rounded-md",
+								actionState?.errors?.fieldErrors?.phone_number &&
+								"border-2 border-red-500 rounded-md",
 						)}
 						defaultValue={NUMBER_WITHOUT_DASH ?? ""}
 						readOnly={Boolean(phoneNumberFromUrl)}
@@ -280,15 +284,17 @@ export default function SignUpForm() {
 					<div className="flex gap-2 items-center">
 						<input
 							type="checkbox"
-							defaultChecked={(actionState?.payload?.get("terms") || "") as string === 'on'}
-							name="terms" id="terms" />
+							defaultChecked={
+								((actionState?.payload?.get("terms") || "") as string) === "on"
+							}
+							name="terms"
+							id="terms"
+						/>
 						<label
 							htmlFor="terms"
 							className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 						>
-							<span>
-								i accept
-							</span>
+							<span>i accept</span>
 							<Link className="ml-1 underline" href="">
 								terms and conditions
 							</Link>
@@ -300,18 +306,19 @@ export default function SignUpForm() {
 						</span>
 					)}
 					<div className="flex gap-2 items-center">
-
 						<input
 							type="checkbox"
-							defaultChecked={(actionState?.payload?.get("policy") || "") as string === 'on'}
-							name="policy" id="terms" />
+							defaultChecked={
+								((actionState?.payload?.get("policy") || "") as string) === "on"
+							}
+							name="policy"
+							id="terms"
+						/>
 						<label
 							htmlFor="terms"
 							className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 						>
-							<span>
-								i undertand
-							</span>
+							<span>i undertand</span>
 							<Link className="ml-1 underline" href="">
 								the privacy policy
 							</Link>
@@ -322,7 +329,6 @@ export default function SignUpForm() {
 							{actionState?.errors?.fieldErrors?.policy}
 						</span>
 					)}
-
 				</div>
 				<Button disabled={isPending} className="mt-4 w-full" type="submit">
 					{isPending ? <Loader2 className="animate-spin" /> : "Submit"}
@@ -331,10 +337,10 @@ export default function SignUpForm() {
 
 			<div className="mb-4 text-center text-sm">
 				Already have an account?{" "}
-				<Link href="login" className="underline">
+				<Link href="signin" className="underline">
 					login
 				</Link>
 			</div>
 		</form>
 	);
-}
+}

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>