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

app/(dashboard)/devices/page.tsx

@@ -23,6 +23,7 @@ export default async function Devices({
 				<h3 className="text-sarLinkOrange text-2xl">My Devices</h3>
 				<AddDeviceDialogForm user_id={session?.user?.id} />
 			</div>
+			<pre>{JSON.stringify(session, null, 2)}</pre>
 
 			<div
 				id="user-filters"

app/auth.ts

@@ -22,28 +22,26 @@ export const authOptions: NextAuthOptions = {
 		CredentialsProvider({
 			name: "Credentials",
 			credentials: {
-				email: { label: "Email", type: "text", placeholder: "jsmith" },
+				pin: { label: "Pin", type: "text", placeholder: "000000" },
-				password: { label: "Password", type: "password" },
 			},
 			async authorize(credentials) {
-				const { email, password } = credentials as {
+				const { pin } = credentials as {
-					email: string;
+					pin: string;
-					password: string;
 				};
-				console.log("email and password", email, password);
+				console.log("pin", pin);
 				const res = await fetch(
-					`${process.env.NEXT_PUBLIC_API_URL}/auth/login/`,
+					`${process.env.SARLINK_API_BASE_URL}/callback/auth/`,
 					{
 						method: "POST",
 						headers: {
 							"Content-Type": "application/json",
 						},
 						body: JSON.stringify({
-							username: email,
+							token: pin,
-							password: password,
 						}),
 					},
 				);
+				console.log(res);
 				console.log("status", res.status);
 
 				const data = await res.json();
@@ -53,7 +51,7 @@ export const authOptions: NextAuthOptions = {
 						return { ...data.user, apiToken: data.token, expiry: data.expiry };
 					case 400:
 						throw new Error(
-							JSON.stringify({ message: data.message, status: res.status }),
+							JSON.stringify({ message: data.token[0], status: res.status }),
 						);
 					case 429:
 						throw new Error(

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: () =>
+		queryFn: () => getAtolls(),
-			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,7 +97,9 @@ 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 &&
@@ -126,8 +126,10 @@ export default function SignUpForm() {
 						<Select
 							disabled={isPending}
 							onValueChange={(v) => {
-								console.log({ v })
+								console.log({ v });
-								setAtoll(atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)));
+								setAtoll(
+									atolls?.data.find((atoll) => atoll.id === Number.parseInt(v)),
+								);
 							}}
 							name="atoll_id"
 							value={atoll?.id?.toString() ?? ""}
@@ -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"
@@ -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'}
+							defaultChecked={
-							name="terms" id="terms" />
+								((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>
+							<span>i accept</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'}
+							defaultChecked={
-							name="policy" id="terms" />
+								((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>
+							<span>i undertand</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,7 +337,7 @@ 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>

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({
+			const nextAuth = await signIn("credentials", {
-			// 	phoneNumber: phone_number,
+				pin: data.pin,
-			// 	code: data.pin,
+				callbackUrl,
-			// });
+				redirect: false,
-			// console.log({ isVerified });
+			});
-			// if (!isVerified.error) {
+			if (!nextAuth?.error) {
-			// 	router.push("/devices");
+				router.push("/devices");
-			// } else {
+			} else {
-			// 	toast.error(isVerified.error.message);
+				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>

middleware.ts

@@ -6,5 +6,5 @@ export default withAuth(
 );
 
 export const config = {
-	matcher: ["/about/:path*", "/dashboard/:path*"],
+	matcher: ["/about/:path*", "/dashboard/:path*", "/devices/:path*"],
 };