Okay, I can help you set up the foundation for your ERP application using Next.js, Auth.js, Prisma, and MongoDB. This initial setup will include: 1. Project structure with Next.js App Router. 2. Prisma schema definition for User, Device, Log, and Auth.js models. 3. Auth.js configuration using the Prisma adapter. 4. Middleware for route protection. 5. Basic layout and home page. 6. Instructions for environment variables. 7. Dockerfile and docker-compose.yml for local development (cannot be run in this environment but provided for your use). { "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", "bcrypt": "^5.1.1", "next": "14.2.4", "next-auth": "^5.0.0-beta.19", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/bcrypt": "^5.0.2", "@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 = { reactStrictMode: true, }; 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_URL="mongodb+srv://:@/?retryWrites=true&w=majority" # NextAuth.js # Generate one here: https://generate-secret.vercel.app/32 AUTH_SECRET="YOUR_AUTH_SECRET" # URL of your app, important for callbacks and redirects AUTH_URL="http://localhost:3000" # Credentials Provider Secret (optional, for encrypting JWT if using Credentials) # CREDENTIALS_SECRET="YOUR_CREDENTIALS_SECRET" generator client { provider = "prisma-client-js" } datasource db { provider = "mongodb" url = env("DATABASE_URL") } enum UserRole { ADMIN USER } enum DeviceStatus { PENDING APPROVED REJECTED } enum LogAction { CREATE UPDATE DELETE LOGIN LOGOUT VIEW // Added for view actions if needed REGISTER_DEVICE APPROVE_DEVICE REJECTCT_DEVICE // Add other relevant actions } model User { id String @id @default(auto()) @map("_id") @db.ObjectId name String? email String? @unique emailVerified DateTime? password String? // For Credentials provider image String? role UserRole @default(USER) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt accounts Account[] sessions Session[] devices Device[] logs Log[] } // Standard Auth.js model 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]) } // Standard Auth.js model 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) } // Standard Auth.js model (optional, for email verification) model VerificationToken { identifier String @id @map("_id") token String @unique expires DateTime @@unique([identifier, token]) } // Device registration model model Device { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId deviceIdentifier String // Unique identifier for the device (e.g., fingerprint hash, could be generated client-side) userAgent String? ipAddress String? status DeviceStatus @default(PENDING) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt lastLoginAt DateTime? user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([userId, deviceIdentifier]) // A user can register the same device only once } // Transaction Log model model Log { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId action LogAction entity String // e.g., "USER", "PRODUCT", "ORDER", "DEVICE" entityId String? // ID of the affected entity timestamp DateTime @default(now()) details Json? // Store additional context as JSON user User @relation(fields: [userId], references: [id], onDelete: Cascade) } // Example ERP Model (add more as needed) // model Product { // id String @id @default(auto()) @map("_id") @db.ObjectId // name String // description String? // price Float // sku String @unique // createdAt DateTime @default(now()) // updatedAt DateTime @updatedAt // } import { PrismaClient } from '@prisma/client'; declare global { // allow global `var` declarations // eslint-disable-next-line no-var var prisma: PrismaClient | undefined; } export const prisma = global.prisma || new PrismaClient({ // Optional: log Prisma operations // log: ['query', 'info', 'warn', 'error'], }); if (process.env.NODE_ENV !== 'production') global.prisma = prisma; export default prisma; import NextAuth from "next-auth" import { PrismaAdapter } from "@auth/prisma-adapter" import Credentials from "next-auth/providers/credentials" import bcrypt from "bcrypt" import prisma from "./prisma" import { UserRole } from "@prisma/client" // Import enum export const { handlers, signIn, signOut, auth } = NextAuth({ adapter: PrismaAdapter(prisma), providers: [ Credentials({ // The name to display on the sign in form (e.g. "Sign in with...") name: "Credentials", credentials: { email: { label: "Email", type: "email", placeholder: "user@example.com" }, password: { label: "Password", type: "password" } }, async authorize(credentials) { if (!credentials?.email || !credentials.password) { return null; } const user = await prisma.user.findUnique({ where: { email: credentials.email as string } }); if (!user || !user.password) { // User not found or doesn't have a password (e.g., OAuth user) return null; } const isPasswordValid = await bcrypt.compare( credentials.password as string, user.password ); if (!isPasswordValid) { return null; } // TODO: Implement device check logic here // 1. Get device identifier from request (needs client-side implementation) // 2. Check if device exists and is APPROVED for this user in the Device table // 3. If device check is required and fails, return null or throw an error console.log("Login successful for:", user.email); // Add basic logging // Return user object without password return { id: user.id, name: user.name, email: user.email, image: user.image, role: user.role, // Include role }; } }) // Add other providers like Google, GitHub etc. if needed // Google({ // clientId: process.env.GOOGLE_CLIENT_ID, // clientSecret: process.env.GOOGLE_CLIENT_SECRET, // }), ], session: { strategy: "jwt", // Use JWT for session strategy, required for middleware }, callbacks: { // Add user role to the JWT token async jwt({ token, user }) { if (user) { token.role = (user as any).role || UserRole.USER; // Add role to token token.id = user.id; // Add user id to token } return token; }, // Add user role to the session object async session({ session, token }) { if (session.user) { session.user.role = token.role as UserRole; // Add role to session session.user.id = token.id as string; // Add user id to session } return session; }, // Potentially redirect based on role after sign-in // async redirect({ url, baseUrl }) { // // Allows relative callback URLs // if (url.startsWith("/")) return `${baseUrl}${url}` // // Allows callback URLs on the same origin // else if (new URL(url).origin === baseUrl) return url // return baseUrl // } }, pages: { signIn: '/login', // Custom login page // error: '/auth/error', // Error code passed in query string as ?error= // signOut: '/auth/signout', // verifyRequest: '/auth/verify-request', // (used for email/passwordless login) // newUser: '/auth/new-user' // New users will be directed here on first sign in (leave the property out to disable) }, // Add event listeners for logging events: { async signIn(message) { if (message.isNewUser) { // Log user creation (handled elsewhere if using a registration form) } else if (message.user.id) { // Log successful login try { await prisma.log.create({ data: { userId: message.user.id, action: LogAction.LOGIN, entity: 'USER', entityId: message.user.id, details: { ip: message.account?.providerAccountId /* Example detail, needs refinement */ } } }); } catch (error) { console.error("Failed to log sign in event:", error); } } }, async signOut(message) { // Log successful logout // Need session token or user id from message if available // console.log("SignOut message:", message); // Check what's available // Example (assuming session token maps to user id somehow before session deletion): // try { // await prisma.log.create({ // data: { // userId: , // Need to get userId reliably // action: LogAction.LOGOUT, // entity: 'USER', // entityId: // } // }); // } catch (error) { // console.error("Failed to log sign out event:", error); // } } }, // Enable debug messages in development debug: process.env.NODE_ENV === 'development', }) import { NextResponse } from 'next/server' import { auth } from '@/lib/auth' // Adjust path as needed import { UserRole } from '@prisma/client'; // Import UserRole enum // Define public routes that don't require authentication const publicRoutes = ['/login', '/api/auth/.*']; // Allow access to login and auth API routes // Define routes restricted to ADMIN users const adminRoutes = ['/admin.*']; // Example: /admin, /admin/users, etc. export default auth((req) => { const { nextUrl } = req; const session = req.auth; // Access session data directly const isLoggedIn = !!session; const userRole = session?.user?.role; const isPublicRoute = publicRoutes.some(pattern => new RegExp(`^${pattern}$`.replace('.*', '.*')).test(nextUrl.pathname)); const isAdminRoute = adminRoutes.some(pattern => new RegExp(`^${pattern}$`.replace('.*', '.*')).test(nextUrl.pathname)); // Allow access to public routes regardless of login status if (isPublicRoute) { // If user is logged in and tries to access login page, redirect to dashboard if (isLoggedIn && nextUrl.pathname === '/login') { return NextResponse.redirect(new URL('/', nextUrl)); } return NextResponse.next(); } // If not logged in and trying to access a protected route, redirect to login if (!isLoggedIn) { console.log(`Redirecting unauthenticated user from ${nextUrl.pathname} to /login`); // Add callbackUrl to redirect back after login const callbackUrl = encodeURIComponent(nextUrl.pathname + nextUrl.search); return NextResponse.redirect(new URL(`/login?callbackUrl=${callbackUrl}`, nextUrl)); } // If logged in, check role-based access for admin routes if (isAdminRoute) { if (userRole !== UserRole.ADMIN) { console.log(`Redirecting non-admin user from ${nextUrl.pathname} to /unauthorized`); // Redirect to an 'unauthorized' page or the home page return NextResponse.redirect(new URL('/unauthorized', nextUrl)); // Or new URL('/', nextUrl) } } // TODO: Implement device check logic here if needed at middleware level // 1. Get device identifier (might need client-side cooperation) // 2. Check if the device is approved for the logged-in user (session.user.id) // 3. If check fails, redirect to a specific page (e.g., /device-approval-pending) or logout // If logged in and accessing a non-public, non-admin-restricted route, allow access return NextResponse.next(); }); // Define which paths the middleware should run on export const config = { // Matcher excluding static files, internal Next.js paths, and explicitly public routes // Adjust the matcher to cover all routes you want protected matcher: [ /* * Match all request paths except for the ones starting with: * - api/auth (Auth.js routes) * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * - login page */ '/((?!api/auth|_next/static|_next/image|favicon.ico|login).*)', ], }; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import { SessionProvider } from "next-auth/react"; // Client side provider import { auth } from "@/lib/auth"; // Server side helper const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "NextGen ERP", description: "Modern ERP System", }; export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { const session = await auth(); // Get session on the server return ( // SessionProvider is needed for client components using useSession() // If you primarily use server components and the `auth()` helper, // you might only need it on specific client layouts/pages. {/* Basic Layout Example */}

{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 { auth, signOut } from "@/lib/auth"; // Server-side auth helper // Server Component Example export default async function Home() { const session = await auth(); // Get session data return (

Welcome to the ERP Dashboard

{session?.user ? (

You are logged in as: {session.user.email}

Role: {session.user.role}

) : (

You are not logged in. Please log in.

)} {/* Add links to other ERP modules here */}

); } "use client"; // Required for handling form submission and state 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") || "/"; // Get callback URL or default to home const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(false); const handleSubmit = async (event: FormEvent) => { event.preventDefault(); setError(null); // Clear previous errors setIsLoading(true); try { const result = await signIn("credentials", { redirect: false, // Prevent NextAuth from redirecting automatically email, password, // callbackUrl: callbackUrl // Pass callbackUrl if needed by authorize, but we handle redirect manually }); if (result?.error) { console.error("Sign-in error:", result.error); // Map common errors to user-friendly messages if (result.error === "CredentialsSignin") { setError("Invalid email or password."); } else { setError("An unexpected error occurred. Please try again."); } setIsLoading(false); } else if (result?.ok) { // Sign-in successful, redirect manually console.log("Sign-in successful, redirecting to:", callbackUrl); router.push(callbackUrl); // Use router.push for client-side navigation // No need to setIsLoading(false) as we are navigating away } else { // Handle cases where result is null or ok is false without an error message setError("Login failed. Please check your credentials."); setIsLoading(false); } } catch (err) { console.error("Sign-in exception:", err); setError("An unexpected error occurred during login."); setIsLoading(false); } }; return (

Login

Email setEmail(e.target.value)} className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="you@example.com" />

Password setPassword(e.target.value)} className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="********" />

{error && (

{error}

)}

{/* Add link to registration page if you have one */} {/*

Don't have an account?{' '} Sign up

*/}

); } import Link from 'next/link'; export default function UnauthorizedPage() { return (

Access Denied

You do not have permission to access this page.

Go to Dashboard

); } # 1. Install dependencies only when needed FROM node:20-alpine AS deps # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. RUN apk add --no-cache libc6-compat WORKDIR /app # Install dependencies based on the preferred package manager COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ RUN \ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ elif [ -f package-lock.json ]; then npm ci; \ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \ else echo "Lockfile not found." && exit 1; \ fi # 2. Rebuild the source code only when needed FROM node:20-alpine AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . # Generate Prisma Client # Make sure PRISMA_SCHEMA_PATH is set if your schema is not in the default location # ENV PRISMA_SCHEMA_PATH=./prisma/schema.prisma RUN npx prisma generate # Next.js collects completely anonymous telemetry data about general usage. # Learn more here: https://nextjs.org/telemetry # Uncomment the following line in case you want to disable telemetry during the build. ENV NEXT_TELEMETRY_DISABLED 1 RUN npm run build # 3. Production image, copy all the files and run next FROM node:20-alpine AS runner WORKDIR /app ENV NODE_ENV production # Uncomment the following line in case you want to disable telemetry during runtime. ENV NEXT_TELEMETRY_DISABLED 1 RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs COPY --from=builder /app/public ./public # Automatically leverage output traces to reduce image size # https://nextjs.org/docs/advanced-features/output-file-tracing COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static # Copy Prisma schema and generated client for runtime use COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma COPY --from=builder --chown=nextjs:nodejs /app/node_modules/.prisma ./node_modules/.prisma USER nextjs EXPOSE 3000 ENV PORT 3000 # set hostname to localhost ENV HOSTNAME "0.0.0.0" # server.js is created by next build from the standalone output # https://nextjs.org/docs/pages/api-reference/next-config-js/output CMD ["node", "server.js"] version: '3.8' services: next-app: container_name: nextjs_erp_app build: context: . dockerfile: Dockerfile restart: always ports: - '3000:3000' networks: - erp-network environment: # Make sure to set these in your .env file or here # These will override the ones in .env if defined here - DATABASE_URL=${DATABASE_URL} - AUTH_SECRET=${AUTH_SECRET} - AUTH_URL=${AUTH_URL:-http://localhost:3000} # Default if not set # Add any other environment variables needed by your app volumes: # You might want to mount volumes for development, but not typically in production compose # For development, you could mount ./src:/app/src to see code changes live (requires dev server) # - .:/app # Mounts the whole directory (use with caution, node_modules handled by image) # - /app/node_modules # Anonymous volume to prevent host node_modules overwriting container's # - /app/.next - ./prisma:/app/prisma # Ensure schema is available if needed at runtime depends_on: - mongo # Make sure mongo starts before the app (optional if using external DB) mongo: container_name: mongo_db image: mongo:latest # Use a specific version in production restart: always ports: - '27017:27017' # Expose MongoDB port if needed externally volumes: - mongo-data:/data/db # Persist database data networks: - erp-network # Optional: Add environment variables for MongoDB user/password # environment: # - MONGO_INITDB_ROOT_USERNAME=admin # - MONGO_INITDB_ROOT_PASSWORD=password networks: erp-network: driver: bridge volumes: mongo-data: # Define the named volume for persistence # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # Dependencies /node_modules /.pnp .pnp.js .yarn/install-state.gz # Testing /coverage # Next.js build files /.next/ /out/ # Prisma # Ignore generated client directory (it's generated on install/build) # node_modules/.prisma/client # Usually covered by /node_modules # Ignore migration files if you don't want them in git (depends on team workflow) # prisma/migrations # Production /build # Misc .DS_Store *.pem # Logs npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* # Environment Variables .env*.local .env # Ignore .env file containing secrets # Editor directories and files .idea .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json *.sublime-project *.sublime-workspace # Optional: Lockfiles (if generated) # package-lock.json # Keep if using npm # yarn.lock # Keep if using yarn # pnpm-lock.yaml # Keep if using pnpm # Optional: Compiled output *.tsbuildinfo # Optional: Cypress/testing files # /cypress/videos/ # /cypress/screenshots/ # Optional: Storybook files # /storybook-static # OS generated files # ehthumbs.db Thumbs.db **Next Steps & Instructions:** 1. **Environment Variables:** Create a `.env` file in the root directory by copying `.env.example`. Fill in your MongoDB connection string (`DATABASE_URL`) and generate a secure `AUTH_SECRET`. 2. **Install Dependencies:** Run `npm install` (or `yarn install` / `pnpm install`) in your terminal. 3. **Database:** Ensure your MongoDB database is running and accessible via the connection string provided in `.env`. Prisma will automatically create the database specified in the URL if it doesn't exist when it first connects. 4. **Run Development Server:** Run `npm run dev`. This will start the Next.js development server, typically on `http://localhost:3000`. 5. **Access the App:** Open your browser to `http://localhost:3000`. You should see the basic welcome page. Try navigating to `/login`. This setup provides the core structure. You'll need to build out the following: * **User Registration:** Create a registration page/API endpoint to hash passwords (`bcrypt.hash`) and save users. * **UI Components:** Implement UI using Tailwind CSS or a component library (like Shadcn/ui, Material UI, etc.). * **Device Registration Flow:** Implement client-side device identification and the API/UI for registration and admin approval. * **Logging Implementation:** Call a logging function (you'll need to create one using Prisma) in your API routes or Server Actions whenever important actions occur. * **RBAC Details:** Refine middleware and implement checks within components/pages/API routes based on `session.user.role`. * **ERP Modules:** Build out the actual ERP features (Products, Orders, etc.) with their respective pages, API routes, and database interactions. * **Docker (Local Development):** If using Docker locally (outside this environment), ensure Docker Desktop is running and use `docker-compose up --build` to start the application and database containers.