change our current auth system for NextAuth.js (now Auth.js): This is th

src/app/admin/layout.tsx

@@ -17,7 +17,7 @@ import {
   SidebarFooter,
 } from '@/components/ui/sidebar';
 import { LayoutDashboard, LogOut, Settings, Mail, User as UserIcon } from 'lucide-react';
-import { signOut, getSession } from '@/lib/auth';
+import { signOut } from '@/lib/auth';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -28,17 +28,18 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import type { User } from '@/lib/types';
-
+import { auth } from '@/app/api/auth/[...nextauth]/route';
 
 export default async function AdminLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const session = (await getSession()) as User | null;
-  const userInitials = session?.name
-    ? session.name
+  const session = await auth();
+  const user = session?.user;
+
+  const userInitials = user?.name
+    ? user.name
         .split(' ')
         .map((n) => n[0])
         .join('')
@@ -108,14 +109,14 @@ export default async function AdminLayout({
             <DropdownMenuTrigger asChild>
               <Button variant="secondary" size="icon" className="rounded-full">
                  <Avatar>
-                  <AvatarImage src={`https://placehold.co/100x100.png`} alt={session?.name ?? ''} />
+                  <AvatarImage src={`https://placehold.co/100x100.png`} alt={user?.name ?? ''} />
                   <AvatarFallback>{userInitials}</AvatarFallback>
                 </Avatar>
                 <span className="sr-only">Toggle user menu</span>
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
+              <DropdownMenuLabel>{user?.name}</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuItem asChild>
                 <Link href="/admin/settings/user">Settings</Link>
@@ -123,7 +124,7 @@ export default async function AdminLayout({
               <DropdownMenuSeparator />
                <form action={signOut} className="w-full">
                 <DropdownMenuItem asChild>
-                    <button type="submit" className="w-full">
+                    <button type="submit" className="w-full text-left">
                       Sign Out
                     </button>
                 </DropdownMenuItem>

src/app/admin/settings/user/page.tsx

@@ -18,7 +18,6 @@ import { Label } from "@/components/ui/label";
 import { useToast } from "@/hooks/use-toast";
 import { useEffect, useTransition } from "react";
 import { getUser, updateUser } from "@/lib/actions/user";
-import { User } from "@/lib/types";
 
 const userProfileSchema = z.object({
   name: z.string().min(1, "Name is required"),

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,68 @@
+
+import NextAuth from 'next-auth';
+import CredentialsProvider from 'next-auth/providers/credentials';
+import db from '@/lib/db';
+import type { User } from '@/lib/types';
+
+export const {
+  handlers: { GET, POST },
+  auth,
+  signIn,
+  signOut,
+} = NextAuth({
+  providers: [
+    CredentialsProvider({
+      name: 'Credentials',
+      credentials: {
+        email: { label: 'Email', type: 'email' },
+        password: { label: 'Password', type: 'password' },
+      },
+      async authorize(credentials) {
+        if (!credentials?.email || !credentials.password) {
+          return null;
+        }
+
+        const email = credentials.email as string;
+        const password = credentials.password as string;
+
+        try {
+          const stmt = db.prepare('SELECT * FROM users WHERE email = ?');
+          const user = stmt.get(email) as User | undefined;
+
+          // In a real app, you would use a secure password hashing library like bcrypt
+          if (user && user.password === password) {
+            // Return a user object that NextAuth will use to create the session
+            return {
+              id: user.id.toString(),
+              name: user.name,
+              email: user.email,
+            };
+          } else {
+            // Invalid credentials
+            return null;
+          }
+        } catch (error) {
+          console.error('Database error during authorization:', error);
+          return null;
+        }
+      },
+    }),
+  ],
+  callbacks: {
+    jwt({ token, user }) {
+      if (user) {
+        token.id = user.id;
+      }
+      return token;
+    },
+    session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.id as string;
+      }
+      return session;
+    },
+  },
+  pages: {
+    signIn: '/login',
+  },
+});

src/app/login/page.tsx

@@ -4,15 +4,14 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { signIn, getSession } from '@/lib/auth';
-import { redirect } from 'next/navigation';
+import { signIn } from '@/app/api/auth/[...nextauth]/route';
+
+async function handleSignIn(formData: FormData) {
+  'use server';
+  await signIn('credentials', formData);
+}
 
 export default async function LoginPage() {
-  const session = await getSession();
-  if (session) {
-    redirect('/admin');
-  }
-
   return (
     <div className="flex min-h-screen items-center justify-center bg-background">
       <Card className="w-full max-w-sm">
@@ -21,7 +20,7 @@ export default async function LoginPage() {
           <CardDescription>Enter your credentials to access the dashboard.</CardDescription>
         </CardHeader>
         <CardContent>
-          <form action={signIn} className="grid gap-4">
+          <form action={handleSignIn} className="grid gap-4">
             <div className="grid gap-2">
               <Label htmlFor="email">Email</Label>
               <Input
@@ -35,11 +34,11 @@ export default async function LoginPage() {
             </div>
             <div className="grid gap-2">
               <Label htmlFor="password">Password</Label>
-              <Input 
-                id="password" 
-                type="password" 
-                name="password" 
-                required 
+              <Input
+                id="password"
+                type="password"
+                name="password"
+                required
                 defaultValue="password"
               />
             </div>