Okay, let's start building the foundation for your ERP application using Next.js, Auth.js, Prisma, and MongoDB. This initial setup includes the project structure, necessary dependencies, Prisma configuration with basic models, Auth.js setup, and middleware for authentication. { "name": "nextjs-erp", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "prisma generate && next build", "start": "next start", "lint": "next lint", "postinstall": "prisma generate" }, "dependencies": { "@auth/prisma-adapter": "^2.2.0", "@prisma/client": "^5.15.0", "mongodb": "^6.7.0", "next": "14.2.4", "next-auth": "^5.0.0-beta.19", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.4", "postcss": "^8", "prisma": "^5.15.0", "tailwindcss": "^3.4.1", "typescript": "^5" } } { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } /** @type {import('next').NextConfig} */ const nextConfig = { // Add any specific Next.js configurations here }; export default nextConfig; /** @type {import('postcss-load-config').Config} */ const config = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; export default config; import type { Config } from "tailwindcss"; const config: Config = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, }, }, plugins: [], }; export default config; # Prisma / Database # Replace with your actual MongoDB connection string DATABASE_URL="mongodb+srv://:@/?retryWrites=true&w=majority" # NextAuth.js # Generate a secret: openssl rand -base64 32 AUTH_SECRET="YOUR_AUTH_SECRET" AUTH_URL="http://localhost:3000" # Replace with your production URL later # Add any other environment variables here (e.g., for external services) # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # Dependencies /node_modules /.pnp .pnp.js # Testing /coverage # Next.js /.next/ /out/ # Production /build # Misc .DS_Store *.pem # Logs npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* # Local Env Files .env*.local .env # Prisma # Ignore generated client directory - it's generated during build/postinstall /node_modules/@prisma/client # IDE files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw? generator client { provider = "prisma-client-js" } datasource db { provider = "mongodb" url = env("DATABASE_URL") } model Account { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId type String provider String providerAccountId String refresh_token String? @db.String access_token String? @db.String expires_at Int? token_type String? scope String? id_token String? @db.String session_state String? user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([provider, providerAccountId]) } model Session { id String @id @default(auto()) @map("_id") @db.ObjectId sessionToken String @unique userId String @db.ObjectId expires DateTime user User @relation(fields: [userId], references: [id], onDelete: Cascade) } model User { id String @id @default(auto()) @map("_id") @db.ObjectId name String? email String? @unique emailVerified DateTime? image String? createdAt DateTime @default(now()) updatedAt DateTime @updatedAt role Role @default(USER) // Default role accounts Account[] sessions Session[] devices Device[] auditLogs AuditLog[] } model VerificationToken { id String @id @default(auto()) @map("_id") @db.ObjectId identifier String token String @unique expires DateTime @@unique([identifier, token]) } // ERP Specific Models enum Role { ADMIN MANAGER USER } model Device { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId deviceIdentifier String // Unique identifier for the device (e.g., derived from user agent, IP, or a generated UUID stored in cookie) name String? // User-friendly name for the device isApproved Boolean @default(false) registeredAt DateTime @default(now()) lastUsedAt DateTime @updatedAt userAgent String? // Store user agent for identification help ipAddress String? // Store last known IP (use with caution due to dynamic IPs) user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([userId, deviceIdentifier]) @@index([userId]) } model AuditLog { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId action String // e.g., "CREATE", "UPDATE", "DELETE", "LOGIN", "VIEW" resource String // e.g., "Product", "User", "Order" resourceId String? // ID of the affected resource, if applicable timestamp DateTime @default(now()) details Json? // Store additional details, like changed fields (before/after) user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@index([userId]) @@index([timestamp]) @@index([resource]) } // Add other ERP models here later (e.g., Product, Customer, Order) // model Product { ... } // model Customer { ... } // model Order { ... } import { PrismaClient } from '@prisma/client'; // PrismaClient is attached to the `global` object in development to prevent // exhausting your database connection limit. // // Learn more: // https://pris.ly/d/help/next-js-best-practices const globalForPrisma = global as unknown as { prisma: PrismaClient | undefined }; export const prisma = globalForPrisma.prisma ?? new PrismaClient({ // Log Prisma operations (optional, can be noisy) // log: ['query', 'info', 'warn', 'error'], }); if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma; export default prisma; import type { NextAuthConfig } from 'next-auth'; import Credentials from 'next-auth/providers/credentials'; import prisma from '@/lib/prisma'; import { User } from '@prisma/client'; // Import User type if needed for validation // NOTE: Using Credentials provider requires careful validation // Add other providers like Google, GitHub etc. as needed export const authConfig = { pages: { signIn: '/login', // Custom login page // error: '/auth/error', // Optional: Custom error page // verifyRequest: '/auth/verify-request', // Optional: For email provider // newUser: '/auth/new-user' // Optional: Redirect new users }, providers: [ Credentials({ // You can add custom fields to the login form here, or leave empty // credentials: { // email: { label: "Email", type: "email" }, // password: { label: "Password", type: "password" } // }, async authorize(credentials) { // --- IMPORTANT --- // Add logic here to look up the user from the credentials supplied // This is a placeholder. You need to implement password hashing (e.g., bcrypt) // and comparison. NEVER store plain text passwords. // --- --- --- --- console.log('Attempting authorization with credentials:', credentials); // Example (replace with actual password verification): // const user = await prisma.user.findUnique({ // where: { email: credentials.email as string }, // }); // // if (user && credentials.password && await bcrypt.compare(credentials.password as string, user.passwordHash)) { // // Any object returned will be saved in `user` property of the JWT // console.log('Authorization successful for:', user.email); // // Return only necessary user fields, exclude password hash // const { passwordHash, ...userWithoutPassword } = user; // return userWithoutPassword; // } else { // // If you return null then an error will be displayed advising the user to check their details. // console.log('Authorization failed'); // return null; // // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter // } // Placeholder: Allow any login for now for setup purposes // REMOVE THIS IN PRODUCTION if (credentials?.email) { const user = await prisma.user.findUnique({ where: { email: credentials.email as string }, }); if (user) return user; // Insecure: No password check! // Optionally create user if not exists (for demo) const newUser = await prisma.user.create({ data: { email: credentials.email as string, name: (credentials.email as string).split('@')[0], // Simple name generation // Add default role if needed } }); return newUser; } return null; // Deny if no email provided }, }), // Add other providers like Google, GitHub, etc. here // e.g., Google({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET }) ], session: { strategy: 'jwt', // Use JWT for session strategy }, callbacks: { // Use authorized callback to control access to pages authorized({ auth, request: { nextUrl } }) { const isLoggedIn = !!auth?.user; const isOnDashboard = nextUrl.pathname.startsWith('/dashboard'); const isOnLoginPage = nextUrl.pathname.startsWith('/login'); const isOnApiAuthRoute = nextUrl.pathname.startsWith('/api/auth'); if (isOnApiAuthRoute) { // Allow all requests to /api/auth/** return true; } if (isOnDashboard) { if (isLoggedIn) return true; // Allow access to dashboard if logged in return false; // Redirect unauthenticated users to login page } else if (isLoggedIn && isOnLoginPage) { // If logged in and trying to access login page, redirect to dashboard return Response.redirect(new URL('/dashboard', nextUrl)); } // Allow access to public pages (like login page) if not logged in return true; }, // Include user ID and role in the JWT token async jwt({ token, user, account, profile }) { if (user) { token.id = user.id; // Cast user to include role if using Credentials provider or DB lookup const dbUser = await prisma.user.findUnique({ where: { id: user.id } }); if (dbUser) { token.role = dbUser.role; } } return token; }, // Include user ID and role in the session object async session({ session, token }) { if (token && session.user) { session.user.id = token.id as string; session.user.role = token.role as User['role']; // Add role to session user } return session; }, }, // Add adapter AFTER providers and callbacks if needed for database session storage // adapter: PrismaAdapter(prisma), // Uncomment if using database sessions instead of JWT } satisfies NextAuthConfig; import NextAuth from 'next-auth'; import { PrismaAdapter } from '@auth/prisma-adapter'; import prisma from '@/lib/prisma'; import { authConfig } from './auth.config'; // Import base config export const { handlers: { GET, POST }, auth, signIn, signOut, // unstable_update, // Use if you need to update session data } = NextAuth({ ...authConfig, // Spread the base config adapter: PrismaAdapter(prisma), // Add the Prisma adapter here // Add any overrides specific to the main NextAuth setup if needed // For example, database session strategy requires the adapter session: { strategy: "database", // Use database sessions with Prisma adapter maxAge: 30 * 24 * 60 * 60, // 30 days updateAge: 24 * 60 * 60, // 24 hours }, // Ensure callbacks from authConfig are included or redefined if necessary callbacks: { ...authConfig.callbacks, // Include callbacks from auth.config.ts // Example: Add device check logic here if needed during session creation/update // async session({ session, user, token }) { // // Call the base session callback first // const updatedSession = await authConfig.callbacks.session({ session, token }); // // Add device check logic // // This requires getting device identifier from the request context, which is tricky here. // // Middleware is a better place for device checks. // // console.log("Session callback user:", user); // user object from adapter // // console.log("Session callback token:", token); // token object if using JWT // return updatedSession; // }, }, }); import NextAuth from 'next-auth'; import { authConfig } from './auth.config'; import { NextRequest, NextResponse } from 'next/server'; import { Role } from '@prisma/client'; // Import Role enum const { auth } = NextAuth(authConfig); // Define public routes that don't require authentication const publicRoutes = ['/login', '/api/auth/.*']; // Allow login and auth API routes // Define routes that require admin role const adminRoutes = ['/admin.*', '/dashboard/users.*']; // Example admin routes // Define routes related to device management const deviceRoutes = ['/devices/register', '/devices/pending']; export default auth(async (req: NextRequest & { auth: any }) => { const { nextUrl } = req; const session = req.auth; // Get session using the injected auth object const isLoggedIn = !!session?.user; const userRole = session?.user?.role as Role; // Get user role from session const isPublicRoute = publicRoutes.some(pattern => new RegExp(`^${pattern}$`.replace('.*', '.*')).test(nextUrl.pathname)); const isAdminRoute = adminRoutes.some(pattern => new RegExp(`^${pattern}$`.replace('.*', '.*')).test(nextUrl.pathname)); const isDeviceRoute = deviceRoutes.some(path => nextUrl.pathname.startsWith(path)); console.log(`Middleware: Path=${nextUrl.pathname}, LoggedIn=${isLoggedIn}, Role=${userRole}, IsPublic=${isPublicRoute}, IsAdmin=${isAdminRoute}`); // Allow access to public routes if (isPublicRoute) { // If user is logged in and tries to access login page, redirect to dashboard if (isLoggedIn && nextUrl.pathname === '/login') { console.log("Redirecting logged-in user from /login to /dashboard"); return NextResponse.redirect(new URL('/dashboard', nextUrl.origin)); } console.log("Allowing access to public route:", nextUrl.pathname); return NextResponse.next(); } // If not logged in and trying to access a protected route, redirect to login if (!isLoggedIn) { console.log("Redirecting unauthenticated user to login for path:", nextUrl.pathname); const redirectUrl = new URL('/login', nextUrl.origin); redirectUrl.searchParams.set('callbackUrl', nextUrl.pathname); // Remember where they were going return NextResponse.redirect(redirectUrl); } // --- Device Check Logic (Placeholder - Requires implementation) --- // 1. Get device identifier (e.g., from a secure cookie set during registration) // const deviceIdCookie = req.cookies.get('deviceId'); // const deviceIdentifier = deviceIdCookie?.value; // // 2. Check if device is registered and approved for the user in the database // if (deviceIdentifier) { // const device = await prisma.device.findUnique({ // where: { userId_deviceIdentifier: { userId: session.user.id, deviceIdentifier } } // }); // // if (!device && !isDeviceRoute) { // // Device not registered, redirect to registration // console.log("Device not registered, redirecting to /devices/register"); // return NextResponse.redirect(new URL('/devices/register', nextUrl.origin)); // } // // if (device && !device.isApproved && !isDeviceRoute && nextUrl.pathname !== '/devices/pending') { // // Device registered but not approved, redirect to pending page // console.log("Device not approved, redirecting to /devices/pending"); // return NextResponse.redirect(new URL('/devices/pending', nextUrl.origin)); // } // // If device exists and is approved, or if user is on a device management page, continue // } else if (!isDeviceRoute) { // // No device identifier found, redirect to registration // console.log("No device identifier found, redirecting to /devices/register"); // return NextResponse.redirect(new URL('/devices/register', nextUrl.origin)); // } // --- End Device Check Logic --- // --- Role-Based Access Control (RBAC) --- if (isAdminRoute) { if (userRole !== Role.ADMIN) { console.log(`Access denied for role ${userRole} to admin route: ${nextUrl.pathname}`); // Redirect non-admins trying to access admin routes // You could redirect to a dedicated 'access-denied' page or the dashboard return NextResponse.redirect(new URL('/dashboard?error=unauthorized', nextUrl.origin)); } console.log(`Allowing ADMIN access to admin route: ${nextUrl.pathname}`); } // Add more role checks for other routes as needed (e.g., MANAGER role) // If all checks pass, allow the request to proceed console.log("Allowing access to protected route:", nextUrl.pathname); return NextResponse.next(); }); // Define which paths the middleware should run on export const config = { // Matcher excluding static files, images, and /api/auth/** matcher: ['/((?!api/auth|_next/static|_next/image|favicon.ico).*)'], }; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import { SessionProvider } from "next-auth/react"; // Client component for session access import { auth } from "@/../auth"; // Server-side auth access const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "ERP System", description: "Modern Web-Based ERP", }; export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { const session = await auth(); // Get session on the server return ( // SessionProvider needs to wrap the content to provide session context client-side // It requires the session object obtained server-side {/* Basic Layout Structure - Add Navbar/Sidebar later */}

{children}

); } @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } } body { color: rgb(var(--foreground-rgb)); background: linear-gradient( to bottom, transparent, rgb(var(--background-end-rgb)) ) rgb(var(--background-start-rgb)); } @layer utilities { .text-balance { text-wrap: balance; } } import { redirect } from 'next/navigation'; export default function HomePage() { // Redirect root path to the login page or dashboard if logged in // The middleware should handle this, but this is a fallback/explicit redirect redirect('/login'); // Or display a landing page if preferred // return ( //

Welcome to the ERP System

Please log in to continue.

// {/* Link to login can be added here if middleware doesn't redirect */} //

// ); } "use client"; // Required for handling form submission and client-side logic import { signIn } from "next-auth/react"; import { useRouter, useSearchParams } from "next/navigation"; // Use next/navigation for App Router import { useState, FormEvent } from "react"; export default function LoginPage() { const router = useRouter(); const searchParams = useSearchParams(); const callbackUrl = searchParams.get("callbackUrl") || "/dashboard"; // Default redirect after login const error = searchParams.get("error"); // Get error from query params if login failed const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); // Add password state if using password field const [isLoading, setIsLoading] = useState(false); const [loginError, setLoginError] = useState(error ? "Login failed. Please check your credentials." : null); const handleSubmit = async (event: FormEvent) => { event.preventDefault(); setIsLoading(true); setLoginError(null); // Clear previous errors try { const result = await signIn("credentials", { redirect: false, // Prevent NextAuth from redirecting automatically email: email, // password: password, // Uncomment if using password callbackUrl: callbackUrl, // Tell NextAuth where to redirect on success (handled manually below) }); if (result?.error) { console.error("Sign in error:", result.error); setLoginError("Login failed. Please check your credentials or try again."); setIsLoading(false); } else if (result?.ok && result?.url) { // Manually redirect on success router.push(callbackUrl); // Use the determined callbackUrl // No need to setIsLoading(false) as we are navigating away } else { // Handle unexpected cases setLoginError("An unexpected error occurred during login."); setIsLoading(false); } } catch (error) { console.error("Login exception:", error); setLoginError("An error occurred. Please try again."); setIsLoading(false); } }; return (

ERP Login

{loginError && (

{loginError}

)}

Email address setEmail(e.target.value)} className="block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 sm:text-sm" placeholder="you@example.com" disabled={isLoading} />

{/* Add Password Field if needed */} {/*

Password setPassword(e.target.value)} className="block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 sm:text-sm" placeholder="Password" disabled={isLoading} />

*/}

{/* Add links for password reset or registration if needed */}

); } "use client"; // Needed for hooks like useSession import { useSession, signOut } from "next-auth/react"; import { useRouter } from "next/navigation"; // Use next/navigation for App Router export default function DashboardPage() { const { data: session, status } = useSession(); const router = useRouter(); if (status === "loading") { return

; } if (status === "unauthenticated") { // Should be handled by middleware, but good as a fallback router.push("/login"); return

Redirecting to login...

; // Avoid rendering content while redirecting } // Access user info from session const userName = session?.user?.name ?? session?.user?.email ?? "User"; const userRole = session?.user?.role ?? "N/A"; return (

Dashboard

Welcome, {userName}!

Your role: {userRole}

{/* Add links to other ERP sections based on role */} {userRole === 'ADMIN' && (

Admin Actions

{/* Manage Users */} {/* Approve Devices */}

(Admin links placeholder)

)} {/* Add other dashboard content here */}

This is your main dashboard area.

); } // This file exports the handlers from auth.ts for the Next.js Route Handler export { GET, POST } from "@/../auth"; // export const runtime = "edge"; // Optional: Use Edge runtime if preferred and compatible /// /// // NOTE: This file should not be edited // see https://nextjs.org/docs/basic-features/typescript for more information. // Add type definition for NextAuth session user augmentation import type { DefaultSession, User as DefaultUser } from 'next-auth'; import { Role } from '@prisma/client'; // Import Role enum from Prisma declare module 'next-auth' { /** * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context */ interface Session { user: { /** The user's id. */ id: string; /** The user's role. */ role: Role; // Add role property } & DefaultSession['user']; // Keep default properties like name, email, image } /** Extends the default User model */ interface User extends DefaultUser { role: Role; // Add role property to the User model recognized by NextAuth } } // Augment JWT type if using JWT strategy and adding custom claims declare module 'next-auth/jwt' { /** Returned by the `jwt` callback and `getToken`, when using JWT sessions */ interface JWT { /** User ID */ id: string; /** User Role */ role: Role; } }