first user setup and login

app/(auth)/dashboard/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function DashboardPage() {
+    return (
+        <div>DashboardPage</div>
+    )
+}

app/(auth)/layout.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { SessionProvider, useSession } from 'next-auth/react'
+import { redirect } from 'next/navigation'
+import { ReactNode } from 'react'
+import Navbar from '@/components/Navbar'
+
+export default function AuthLayout({ children }: { children: ReactNode }) {
+    
+    return (
+        <>
+            <SessionProvider>
+                <Navbar />
+                <main className="p-4">
+                    {/* Could also add a private header here */}
+                    {children}
+                </main>
+            </SessionProvider>
+        </>
+    )
+}

app/(public)/layout.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react'
+
+export default function PublicLayout({ children }: { children: ReactNode }) {
+    return (
+        <main>
+            {/* Public site header if any */}
+            {children}
+        </main>
+    )
+}

app/(public)/login/page.tsx

@@ -0,0 +1,10 @@
+import LoginForm from '@/components/LoginForm';
+import React, { useState } from 'react'
+
+export default function LoginPage() {
+    return (
+        <div>
+            <LoginForm />
+        </div>
+    )
+}

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

@@ -0,0 +1,76 @@
+import NextAuth, { type NextAuthOptions } from 'next-auth'
+import CredentialsProvider from 'next-auth/providers/credentials'
+import { PrismaClient } from '@prisma/client'
+import bcrypt from 'bcrypt'
+
+const prisma = new PrismaClient()
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    CredentialsProvider({
+      name: 'Credentials',
+      credentials: {
+        email: { label: 'Email', type: 'email' },
+        password: { label: 'Password', type: 'password' },
+      },
+      async authorize(credentials) {
+        if (!credentials?.email || !credentials?.password) {
+          console.log('[AUTH] Missing credentials')
+          return null
+        }
+
+        const user = await prisma.user.findUnique({
+          where: { email: credentials.email },
+        })
+
+        if (!user) {
+          console.log('[AUTH] User not found')
+          return null
+        }
+
+        if (!user.password) {
+          console.log('[AUTH] User has no password set')
+          return null
+        }
+
+        const isValid = await bcrypt.compare(credentials.password, user.password)
+        if (!isValid) {
+          console.log('[AUTH] Invalid password')
+          return null
+        }
+
+        console.log('[AUTH] Successful login', user.email)
+
+        return {
+          id: user.id,
+          email: user.email,
+          name: user.name,
+          role: user.role,
+        }
+      },
+    }),
+  ],
+  session: {
+    strategy: 'jwt',
+  },
+  callbacks: {
+    async jwt({ token, user }) {
+      if (user) {
+        token.id = user.id
+        token.role = user.role
+      }
+      return token
+    },
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.id = token.id as string
+        session.user.role = token.role as "COUPLE" | "PLANNER" | "GUEST"
+      }
+      return session
+    },
+  },
+  secret: process.env.NEXTAUTH_SECRET,
+}
+
+const handler = NextAuth(authOptions)
+export { handler as GET, handler as POST }

components/LoginForm.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { signIn } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react'
+
+export default function LoginForm() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const router = useRouter();
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+
+        const result = await signIn('credentials', {
+            redirect: false,
+            email,
+            password,
+        })
+
+        console.log('[CLIENT] signIn result:', result)
+
+        if (result?.error) {
+            setError(result.error)
+        } else {
+            router.push('/')
+        }
+    }
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4 max-w-sm mx-auto mt-10">
+            <h1 className="text-2xl font-bold">Login</h1>
+            {error && <p className="text-red-500">{error}</p>}
+            <input
+                className="input input-bordered w-full"
+                type="email"
+                placeholder="Email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+            />
+            <input
+                className="input input-bordered w-full"
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+            />
+            <button className="btn btn-primary w-full" type="submit">
+                Sign In
+            </button>
+        </form>
+    )
+}

components/Navbar.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useSession, signOut } from "next-auth/react";
+
+export default function Navbar() {
+    const { data: session, status } = useSession();
+
+    if (status === 'loading') return null;
+    if (!session?.user) return null
+    
+    return (
+        <nav className="flex justify-between items-center p-4 bg-gray-100 border-b">
+            <div className="font-semibold">Wedding Planner</div>
+            <div className="flex items-center space-x-4">
+                <span className="text-sm text-gray-600">
+                    {session.user.email} ({session.user.role})
+                </span>
+                <button
+                    className="text-sm text-blue-600 underline"
+                    onClick={() => signOut({ callbackUrl: '/login' })}
+                >
+                    Logout
+                </button>
+            </div>
+        </nav>
+    )
+}

lib/auth.ts

@@ -1,69 +0,0 @@
-// lib/auth.ts
-import NextAuth from 'next-auth';
-import { PrismaAdapter } from '@next-auth/prisma-adapter';
-import CredentialsProvider from 'next-auth/providers/credentials';
-import { prisma } from './prisma';
-import type { NextAuthOptions, User } from 'next-auth';
-import bcrypt from "bcrypt";
-
-export const authOptions: NextAuthOptions = {
-    adapter: PrismaAdapter(prisma),
-    providers: [
-        CredentialsProvider({
-            name: 'Credentials',
-            credentials: {
-                email: { label: "Email", type: "email" },
-                password: { label: "Password", type: "password" },
-            },
-            async authorize(credentials) {
-                if (!credentials?.email || !credentials?.password) {
-                    throw new Error("Missing email or password");
-                }
-
-                const user = await prisma.user.findUnique({
-                    where: { email: credentials.email },
-                });
-
-                if (!user || !user.password) {
-                    throw new Error("Invalid credentials");
-                }
-
-                const isValid = await bcrypt.compare(credentials.password, user.password);
-                if (!isValid) {
-                    throw new Error("Invalid credentials");
-                }
-
-                return {
-                    id: user.id,
-                    email: user.email,
-                    name: user.name,
-                    role: user.role,
-                };
-            },
-        }),
-    ],
-    session: {
-        strategy: 'jwt',
-    },
-    callbacks: {
-        async session({ session, token }: { session: any; token: any }) {
-            if (session.user) {
-                session.user.id = token.sub!;
-                session.user.role = token.role;
-            }
-            return session;
-        },
-        async jwt({ token, user }: { token: any; user?: any }) {
-            if (user) {
-                token.role = user.role;
-            }
-            return token;
-        },
-    },
-    secret: process.env.NEXTAUTH_SECRET,
-};
-
-export const {
-  handlers: { GET, POST },
-  auth,
-} = NextAuth(authOptions);

types/next-auth.d.ts

@@ -1,20 +1,21 @@
-import NextAuth from "next-auth";
+import NextAuth from "next-auth"
 
 declare module "next-auth" {
-  interface User {
-    id: string;
-    role: "COUPLE" | "PLANNER" | "GUEST";
-  }
-
   interface Session {
     user: {
-      id: string;
-      email: string;
-      role: "COUPLE" | "PLANNER" | "GUEST";
-    };
+      id: string
+      email: string
+      role: "COUPLE" | "PLANNER" | "GUEST"
+    }
+  }
+
+  interface User {
+    id: string
+    role: "COUPLE" | "PLANNER" | "GUEST"
   }
 
   interface JWT {
-    role: "COUPLE" | "PLANNER" | "GUEST";
+    id: string
+    role: "COUPLE" | "PLANNER" | "GUEST"
   }
 }