Your commit message here

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

@@ -0,0 +1,4 @@
+import NextAuth from "@/lib/auth"
+
+export const GET = NextAuth
+export const POST = NextAuth

src/app/api/projects/route.js

@@ -1,11 +1,12 @@
 import { getAllProjects, createProject } from "@/lib/queries/projects";
 import initializeDatabase from "@/lib/init-db";
 import { NextResponse } from "next/server";
+import { withReadAuth, withUserAuth } from "@/lib/middleware/auth";
 
 // Make sure the DB is initialized before queries run
 initializeDatabase();
 
-export async function GET(req) {
+async function getProjectsHandler(req) {
 	const { searchParams } = new URL(req.url);
 	const contractId = searchParams.get("contract_id");
 
@@ -13,8 +14,12 @@ export async function GET(req) {
 	return NextResponse.json(projects);
 }
 
-export async function POST(req) {
+async function createProjectHandler(req) {
 	const data = await req.json();
 	createProject(data);
 	return NextResponse.json({ success: true });
 }
+
+// Protected routes - require authentication
+export const GET = withReadAuth(getProjectsHandler);
+export const POST = withUserAuth(createProjectHandler);

src/app/auth/error/page.js

@@ -0,0 +1,24 @@
+export default function AuthError() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
+            Authentication Error
+          </h2>
+          <p className="mt-2 text-sm text-gray-600">
+            There was a problem signing you in. Please try again.
+          </p>
+          <div className="mt-6">
+            <a
+              href="/auth/signin"
+              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
+            >
+              Back to Sign In
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/auth/signin/page.js

@@ -0,0 +1,127 @@
+"use client"
+
+import { useState } from "react"
+import { signIn, getSession } from "next-auth/react"
+import { useRouter } from "next/navigation"
+import { useSearchParams } from "next/navigation"
+
+export default function SignIn() {
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [error, setError] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const callbackUrl = searchParams.get("callbackUrl") || "/"
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError("")
+
+    try {
+      const result = await signIn("credentials", {
+        email,
+        password,
+        redirect: false,
+      })
+
+      if (result?.error) {
+        setError("Invalid email or password")
+      } else {
+        // Successful login
+        router.push(callbackUrl)
+        router.refresh()
+      }
+    } catch (error) {
+      setError("An error occurred. Please try again.")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            Sign in to your account
+          </h2>
+          <p className="mt-2 text-center text-sm text-gray-600">
+            Access the Project Management Panel
+          </p>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded relative">
+              {error}
+            </div>
+          )}
+          
+          <div className="rounded-md shadow-sm -space-y-px">
+            <div>
+              <label htmlFor="email" className="sr-only">
+                Email address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                placeholder="Email address"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="sr-only">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? (
+                <span className="flex items-center">
+                  <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Signing in...
+                </span>
+              ) : (
+                "Sign in"
+              )}
+            </button>
+          </div>
+
+          <div className="text-center">
+            <div className="text-sm text-gray-600 bg-blue-50 p-3 rounded">
+              <p className="font-medium">Default Admin Account:</p>
+              <p>Email: admin@localhost</p>
+              <p>Password: admin123456</p>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/app/layout.js

@@ -1,6 +1,7 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Navigation from "@/components/ui/Navigation";
+import { AuthProvider } from "@/components/auth/AuthProvider";
 
 const geistSans = Geist({
 	variable: "--font-geist-sans",
@@ -23,8 +24,10 @@ export default function RootLayout({ children }) {
 			<body
 				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
 			>
-				<Navigation />
-				<main>{children}</main>
+				<AuthProvider>
+					<Navigation />
+					<main>{children}</main>
+				</AuthProvider>
 			</body>
 		</html>
 	);

src/app/page.js

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { Card, CardHeader, CardContent } from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
@@ -24,6 +25,7 @@ import { formatDate } from "@/lib/utils";
 import TaskStatusChart from "@/components/ui/TaskStatusChart";
 
 export default function Home() {
+	const { data: session, status } = useSession();
 	const [stats, setStats] = useState({
 		totalProjects: 0,
 		activeProjects: 0,
@@ -47,6 +49,12 @@ export default function Home() {
 	const [loading, setLoading] = useState(true);
 
 	useEffect(() => {
+		// Only fetch data if user is authenticated
+		if (!session) {
+			setLoading(false);
+			return;
+		}
+
 		const fetchDashboardData = async () => {
 			try {
 				// Fetch all data concurrently
@@ -210,7 +218,7 @@ export default function Home() {
 		};
 
 		fetchDashboardData();
-	}, []);
+	}, [session]);
 
 	const getProjectStatusColor = (status) => {
 		switch (status) {
@@ -257,10 +265,38 @@ export default function Home() {
 			</PageContainer>
 		);
 	}
+
+	// Show loading state while session is being fetched
+	if (status === "loading") {
+		return <LoadingState message="Loading authentication..." />;
+	}
+
+	// Show sign-in prompt if not authenticated
+	if (!session) {
+		return (
+			<PageContainer>
+				<div className="text-center py-12">
+					<h1 className="text-4xl font-bold text-gray-900 mb-6">
+						Welcome to Project Management Panel
+					</h1>
+					<p className="text-xl text-gray-600 mb-8">
+						Please sign in to access the project management system.
+					</p>
+					<Link
+						href="/auth/signin"
+						className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
+					>
+						Sign In
+					</Link>
+				</div>
+			</PageContainer>
+		);
+	}
+
 	return (
 		<PageContainer>
 			<PageHeader
-				title="Dashboard"
+				title={`Welcome back, ${session.user.name}!`}
 				description="Overview of your projects, contracts, and tasks"
 			>
 				<div className="flex items-center gap-3">