refactor: streamline authentication flow by removing unused code, replacing custom auth utilities with NextAuth, and updating session handling in components

components/auth/account-popver.tsx

@@ -1,56 +1,54 @@
-'use client'
-import { Button } from "@/components/ui/button"
+"use client";
+import { Button } from "@/components/ui/button";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import { authClient } from "@/lib/auth-client";
-import { Loader2, User as UserIcon } from "lucide-react"
-import { useRouter } from "next/navigation"
-import { useState } from "react"
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Loader2, User as UserIcon } from "lucide-react";
+import { signOut, useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 export function AccountPopover() {
-  const session = authClient.useSession();
-  const [loading, setLoading] = useState(false)
-  const router = useRouter()
+	const session = useSession();
+	const [loading, setLoading] = useState(false);
+	const router = useRouter();
 
-  if (session.isPending) {
-    <Button variant={"outline"} disabled>
-      <Loader2 className="animate-spin" />
-    </Button>
-  }
-  return (
-
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button className="w-fit px-2" variant="outline">
-          <UserIcon />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-fit">
-        <div className="grid gap-4">
-          <div className="space-y-2">
-            <h4 className="font-medium leading-none">{session.data?.user?.name}</h4>
-            <p className="text-sm text-muted-foreground">
-              {session.data?.user?.phoneNumber}
-            </p>
-          </div>
-          <Button disabled={loading} onClick={async () => {
-            setLoading(true)
-            await authClient.signOut({
-              fetchOptions: {
-                onSuccess: () => {
-                  router.push("/login"); // redirect to login page
-                },
-              },
-            })
-            setLoading(false)
-          }}>
-            {loading ? <Loader2 className="animate-spin" /> : "Logout"}
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
+	if (session.status === "loading") {
+		<Button variant={"outline"} disabled>
+			<Loader2 className="animate-spin" />
+		</Button>;
+	}
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button className="w-fit px-2" variant="outline">
+					<UserIcon />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-fit">
+				<div className="grid gap-4">
+					<div className="space-y-2">
+						<h4 className="font-medium leading-none">
+							{session.data?.user?.name}
+						</h4>
+						<p className="text-sm text-muted-foreground">
+							{session.data?.user?.phoneNumber}
+						</p>
+					</div>
+					<Button
+						disabled={loading}
+						onClick={async () => {
+							setLoading(true);
+							await signOut();
+							setLoading(false);
+						}}
+					>
+						{loading ? <Loader2 className="animate-spin" /> : "Logout"}
+					</Button>
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
 }

components/auth/application-layout.tsx

@@ -4,33 +4,26 @@ import { Wallet } from "@/components/wallet";
 import { ModeToggle } from "@/components/theme-toggle";
 import { AppSidebar } from "@/components/ui/app-sidebar";
 
+import { authOptions } from "@/app/auth";
 import { Separator } from "@/components/ui/separator";
 import {
 	SidebarInset,
 	SidebarProvider,
 	SidebarTrigger,
 } from "@/components/ui/sidebar";
-import { auth } from "@/app/auth";
-import prisma from "@/lib/db";
+import { getServerSession } from "next-auth";
 import { headers } from "next/headers";
 import { AccountPopover } from "./account-popver";
 
 export async function ApplicationLayout({
 	children,
 }: { children: React.ReactNode }) {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-	const billFormula = await prisma.billFormula.findFirst();
-	const user = await prisma.user.findFirst({
-		where: {
-			id: session?.user?.id,
-		},
-	});
+	const session = await getServerSession(authOptions);
+
 	return (
 		<SidebarProvider>
-			<AppSidebar role={session?.user?.role || "USER"} />
-			<DeviceCartDrawer billFormula={billFormula || null} />
+			<AppSidebar role={"admin"} />
+			{/* <DeviceCartDrawer billFormula={billFormula || null} /> */}
 			<SidebarInset>
 				<header className="flex justify-between sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4 z-10">
 					<div className="flex items-center gap-2 ">
@@ -44,7 +37,7 @@ export async function ApplicationLayout({
 					</div>
 
 					<div className="flex items-center gap-2">
-						<Wallet walletBalance={user?.walletBalance || 0} />
+						{/* <Wallet walletBalance={user?.walletBalance || 0} /> */}
 						<ModeToggle />
 						<AccountPopover />
 					</div>

components/auth/verify-otp-form.tsx

@@ -3,7 +3,6 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { authClient } from "@/lib/auth-client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
 import Link from "next/link";
@@ -37,16 +36,16 @@ export default function VerifyOTPForm({
 
 	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 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);
+			// }
 		});
 	};
 
@@ -70,11 +69,7 @@ export default function VerifyOTPForm({
 						<p className="text-red-500 text-sm">{errors.pin.message}</p>
 					)}
 				</div>
-				<Button
-					className="w-full"
-					disabled={isPending}
-					type="submit"
-				>
+				<Button className="w-full" disabled={isPending} type="submit">
 					{isPending ? <Loader2 className="animate-spin" /> : "Login"}
 				</Button>
 			</div>