Okay, I can help you set up the foundation for your ERP application using Next.js (App Router), Auth.js, Prisma, and MongoDB. This initial setup will include: 1. Project structure for Next.js with App Router. 2. Installation of necessary dependencies. 3. Prisma schema definition for core models (User, Account, Session, Authenticator, Device, TransactionLog). 4. Basic Auth.js configuration using the Prisma adapter and WebAuthn (Passkey) provider. 5. Environment variable setup. 6. Basic middleware for route protection. 7. Placeholder pages for login and a protected dashboard. { "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 = { // Potential future configurations can go 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" # This should be the public URL of your application AUTH_URL="http://localhost:3000" AUTH_TRUST_HOST=true # Set to true for development, configure properly for production # Required for WebAuthn RP AUTH_WEBAUTHN_RP_NAME="Your ERP Name" # Optional: Specify the origin if different from AUTH_URL # AUTH_WEBAUTHN_RP_ORIGIN="http://localhost:3000" # 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 in node_modules /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") } enum UserRole { ADMIN USER VIEWER // Example additional role } model User { id String @id @default(auto()) @map("_id") @db.ObjectId name String? email String? @unique emailVerified DateTime? image String? role UserRole @default(USER) deviceLimit Int @default(1) // Max number of approved devices createdAt DateTime @default(now()) updatedAt DateTime @updatedAt accounts Account[] sessions Session[] authenticators Authenticator[] devices Device[] logs TransactionLog[] } // Required for NextAuth Prisma Adapter 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]) } // Required for NextAuth Prisma Adapter 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) } // Required for NextAuth Prisma Adapter (Email provider, etc.) model VerificationToken { identifier String @id @map("_id") token String @unique expires DateTime @@unique([identifier, token]) } // Required for NextAuth WebAuthn model Authenticator { id String @id @default(auto()) @map("_id") @db.ObjectId credentialID String @unique userId String @db.ObjectId providerAccountId String // Not applicable to WebAuthn, but need to satisfy adapter potentially? Check docs. credentialPublicKey String counter Int credentialDeviceType String credentialBackedUp Boolean transports String? // Comma-separated list (e.g., "internal,hybrid") user User @relation(fields: [userId], references: [id], onDelete: Cascade) } // Custom model for device tracking and approval model Device { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId userAgent String? // Browser/OS info identifier String // Could be linked to Authenticator credentialID or a generated ID name String? // User-friendly name for the device isApproved Boolean @default(false) approvedAt DateTime? lastLoginAt DateTime? createdAt DateTime @default(now()) updatedAt DateTime @updatedAt user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([userId, identifier]) } // Custom model for logging user actions model TransactionLog { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId action String // e.g., "LOGIN", "CREATE_USER", "UPDATE_PRODUCT" details Json? // Optional: Store relevant data about the action ipAddress String? timestamp DateTime @default(now()) user User @relation(fields: [userId], references: [id], onDelete: Cascade) } 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({ // log: ['query', 'info', 'warn', 'error'], // Uncomment for detailed logs }); if (process.env.NODE_ENV !== 'production') global.prisma = prisma; export default prisma; import type { NextAuthConfig } from 'next-auth'; import { PrismaAdapter } from '@auth/prisma-adapter'; import prisma from '@/lib/prisma'; import WebAuthn from 'next-auth/providers/webauthn'; // Import other providers like Credentials if needed // import Credentials from 'next-auth/providers/credentials'; export const authConfig = { adapter: PrismaAdapter(prisma), session: { strategy: 'jwt' }, // Use JWT for session strategy to easily pass role via token providers: [ WebAuthn({ // RP settings will be inferred from AUTH_URL/AUTH_WEBAUTHN_RP_* env vars // You might need to customize verification based on your User model async authorize(credentials) { // Find user by credential ID const authenticator = await prisma.authenticator.findUnique({ where: { credentialID: credentials.id }, include: { user: true }, }); if (!authenticator) return null; // --- Device Approval Logic --- // This is a simplified check. You'll need a more robust way // to identify the *current* device and check its approval status. // WebAuthn itself confirms the *authenticator* (passkey), but not necessarily // if this specific browser/OS instance is *approved* in your system. // You might need to: // 1. During passkey registration, also create/update a `Device` record. // 2. During login, try to identify the current device (e.g., user agent) // and check its `isApproved` status in the `Device` table for that user. // This example assumes the authenticator existing implies device approval for simplicity. // A real implementation needs more logic here. // const deviceApproved = await checkDeviceApproval(authenticator.userId, currentDeviceIdentifier); // if (!deviceApproved) { // console.log(`Device not approved for user ${authenticator.userId}`); // // Maybe throw an error or return null with a specific status // return null; // } // --- Device Limit Check --- // const approvedDeviceCount = await prisma.device.count({ // where: { userId: authenticator.userId, isApproved: true }, // }); // if (approvedDeviceCount >= authenticator.user.deviceLimit) { // // Check if the current device is one of the approved ones // const isExistingApprovedDevice = await prisma.device.findFirst({ // where: { userId: authenticator.userId, identifier: currentDeviceIdentifier, isApproved: true } // }); // if (!isExistingApprovedDevice) { // console.log(`Device limit reached for user ${authenticator.userId}`); // return null; // Or redirect to a page explaining the limit // } // } console.log(`Passkey login successful for user: ${authenticator.userId}`); // Return the user object associated with the authenticator return authenticator.user; }, }), // Example Credentials provider (optional, e.g., for initial admin setup or fallback) // Credentials({ // name: "Credentials", // credentials: { // email: { label: "Email", type: "email" }, // password: { label: "Password", type: "password" } // }, // async authorize(credentials) { // // Add logic here to look up the user from the credentials supplied // const user = await prisma.user.findUnique({ where: { email: credentials.email as string } }); // // if (user) { // // Add password verification logic here (e.g., using bcrypt) // // const isValid = await bcrypt.compare(credentials.password as string, user.passwordHash); // // if (isValid) return user; else return null; // return user; // Placeholder: Replace with actual password check // } else { // return null; // } // } // }) ], pages: { signIn: '/login', // Redirect users to `/login` if unauthenticated // error: '/auth/error', // Custom error page // verifyRequest: '/auth/verify-request', // Email verification page // newUser: '/auth/new-user' // Redirect new users (e.g., first OAuth login) }, callbacks: { // async signIn({ user, account, profile, email, credentials }) { // // Add logic here before sign in is complete // // e.g., check if email is verified, check device approval // console.log("signIn callback:", { user, account }); // // const isDeviceApproved = await checkDeviceApproval(user.id, currentDeviceIdentifier); // // if (!isDeviceApproved) return false; // Prevent sign in // return true; // Allow sign in // }, async jwt({ token, user, trigger, session }) { // console.log("JWT Callback Trigger:", trigger); // console.log("JWT Callback Token:", token); // console.log("JWT Callback User:", user); // Initial sign-in or DB user object update if (user) { token.id = user.id; token.role = user.role; // Add role to the JWT token token.deviceLimit = user.deviceLimit; } // If session updated (e.g., user role changed by admin), refresh token data if (trigger === "update" && session?.role) { console.log("Updating session role in JWT:", session.role); token.role = session.role; } // Potentially refresh user data from DB periodically or on specific triggers // if (trigger === "signIn" || trigger === "signUp" || /* some interval */) { // const dbUser = await prisma.user.findUnique({ where: { id: token.id as string } }); // if (dbUser) { // token.role = dbUser.role; // token.deviceLimit = dbUser.deviceLimit; // token.name = dbUser.name; // token.email = dbUser.email; // token.picture = dbUser.image; // } // } return token; }, async session({ session, token }) { // console.log("Session Callback Session:", session); // console.log("Session Callback Token:", token); if (token && session.user) { session.user.id = token.id as string; session.user.role = token.role as UserRole; // Add role to the session object // Add other properties from token if needed // session.user.deviceLimit = token.deviceLimit as number; } // console.log("Session Callback Return:", session); return session; }, }, // Enable debug messages for detailed logging in development debug: process.env.NODE_ENV === 'development', } satisfies NextAuthConfig; // Use "satisfies" for type checking import NextAuth from 'next-auth'; import { authConfig } from './auth.config'; import { UserRole } from '@prisma/client'; // Import enum // Extend the Session and User types provided by next-auth declare module 'next-auth' { interface Session { user: { id: string; role: UserRole; // Add custom property } & DefaultSession['user']; // Keep default properties like name, email, image } interface User { // Add custom properties from your Prisma User model role: UserRole; deviceLimit: number; } } // Extend the JWT type declare module 'next-auth/jwt' { interface JWT { id: string; role: UserRole; deviceLimit: number; } } export const { handlers: { GET, POST }, // Route handlers for /api/auth/* auth, // Session management function (server-side) signIn, // Function to initiate sign-in signOut, // Function to initiate sign-out unstable_update: update, // Function to update session (e.g., after role change) } = NextAuth(authConfig); import { NextResponse } from 'next/server'; import { authConfig } from './auth.config'; import NextAuth from 'next-auth'; const { auth } = NextAuth(authConfig); // Define public routes that don't require authentication const publicRoutes = ['/login', '/api/auth/.*']; // Allow access to login and auth API routes // Define routes accessible only by ADMINs const adminRoutes = ['/admin.*', '/users.*']; // Example admin-only routes export default auth((req) => { const { nextUrl } = req; const session = req.auth; // Access session data directly from middleware 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)); // console.log('Middleware Check:'); // console.log(' Path:', nextUrl.pathname); // console.log(' Is Logged In:', isLoggedIn); // console.log(' User Role:', userRole); // console.log(' Is Public Route:', isPublicRoute); // console.log(' Is Admin Route:', isAdminRoute); // If trying to access a public route, allow it if (isPublicRoute) { // If logged in and trying to access login page, redirect to dashboard if (isLoggedIn && nextUrl.pathname === '/login') { return NextResponse.redirect(new URL('/dashboard', nextUrl)); } return NextResponse.next(); } // If not logged in and trying to access a protected route, redirect to login if (!isLoggedIn) { console.log('Redirecting to login (not logged in)'); // Add callbackUrl to redirect back after successful 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 !== 'ADMIN') { console.log('Redirecting to dashboard (not admin)'); // Redirect non-admins trying to access admin routes // You might want a dedicated "Access Denied" page instead return NextResponse.redirect(new URL('/dashboard?error=unauthorized', nextUrl)); } } // --- Add Device Approval Check Here (if needed in middleware) --- // This requires fetching device status, potentially complex in middleware. // It might be better handled within the `signIn` callback or on specific pages. // Example sketch: // const deviceId = req.cookies.get('deviceId')?.value; // Need to set this cookie on login/registration // const isDeviceApproved = await checkDeviceApproval(session.user.id, deviceId); // if (!isDeviceApproved && nextUrl.pathname !== '/device-pending') { // return NextResponse.redirect(new URL('/device-pending', nextUrl)); // } // If logged in and authorized for the route, allow access return NextResponse.next(); }); // Configure matcher to run middleware on specific paths export const config = { // Match all routes except static files, _next internal files, and specific public assets matcher: ['/((?!api/auth/|api/webauthn/|_next/static|_next/image|favicon.ico|logo.png).*)'], }; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import { SessionProvider } from "next-auth/react"; // Client provider for session access import { auth } from "@/auth"; // Server-side auth function const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "ERP Application", description: "Web-based ERP System", }; export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { const session = await auth(); // Fetch session on the server return ( // SessionProvider is needed for client components to use useSession() // It needs the session object fetched on the server for initial state {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)); min-height: 100vh; } @layer utilities { .text-balance { text-wrap: balance; } } import { redirect } from 'next/navigation'; export default function HomePage() { // The root page should likely redirect to the dashboard or login page // Middleware will handle the logic, but this provides a fallback. redirect('/dashboard'); // Or display a landing page if preferred // return ( //

Welcome to the ERP

// {/* Add links to login/dashboard */} //

// ); } import { auth, signOut } from "@/auth"; import { redirect } from "next/navigation"; // Server component example for Sign Out button async function SignOutButton() { return ( ); } export default async function DashboardPage() { const session = await auth(); // Get session on the server if (!session) { // This should ideally be handled by middleware, but acts as a safeguard redirect("/login"); } return (

Dashboard

Welcome, {session.user?.name ?? session.user?.email}!

Your Role: {session.user?.role}

This is your protected dashboard area.

{/* Example: Conditionally show content based on role */} {session.user?.role === 'ADMIN' && (

Admin Section

You have access to administrative features.

{/* Add links to admin pages like /users or /admin/settings */}

)}

{/* Placeholder for ERP modules */}

Module 1

Module 2

Module 3

); } 'use client'; // Required for client-side interactions (WebAuthn) import { useState, useEffect, useRef } from 'react'; import { signIn } from 'next-auth/react'; import { useRouter, useSearchParams } from 'next/navigation'; import { startRegistration, startAuthentication, } from '@simplewebauthn/browser'; import type { PublicKeyCredentialCreationOptionsJSON, PublicKeyCredentialRequestOptionsJSON, RegistrationResponseJSON, AuthenticationResponseJSON, } from '@simplewebauthn/types'; export default function LoginPage() { const [email, setEmail] = useState(''); const [error, setError] = useState(null); const [isSubmitting, setIsSubmitting] = useState(false); const router = useRouter(); const searchParams = useSearchParams(); const callbackUrl = searchParams.get('callbackUrl') || '/dashboard'; const isMounted = useRef(false); // Prevent double effect run in StrictMode // Check if WebAuthn is supported and conditional UI is available useEffect(() => { if (isMounted.current) return; isMounted.current = true; const checkConditionalUI = async () => { if ( window.PublicKeyCredential && PublicKeyCredential.isConditionalMediationAvailable ) { const isCMA = await PublicKeyCredential.isConditionalMediationAvailable(); if (isCMA) { console.log('Conditional UI (Passkey Autofill) is available.'); handlePasskeyAutofill(); // Attempt autofill on page load } else { console.log('Conditional UI not available.'); } } else { console.log('WebAuthn or Conditional UI not supported by this browser.'); } }; checkConditionalUI(); }, []); // --- Passkey Registration --- const handleRegister = async (e: React.FormEvent) => { e.preventDefault(); setError(null); setIsSubmitting(true); if (!email) { setError('Please enter an email address.'); setIsSubmitting(false); return; } try { // 1. Get registration options from the server const response = await fetch('/api/auth/webauthn/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, name: email.split('@')[0] }), // Send email and maybe a default name }); if (!response.ok) { const data = await response.json(); throw new Error(data.error || 'Failed to get registration options'); } const options: PublicKeyCredentialCreationOptionsJSON = await response.json(); // 2. Prompt user to create passkey using browser API const registrationData: RegistrationResponseJSON = await startRegistration(options); // 3. Send registration data back to server for verification const verificationResponse = await fetch('/api/auth/webauthn/register-verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, ...registrationData }), }); if (!verificationResponse.ok) { const data = await verificationResponse.json(); throw new Error(data.error || 'Passkey registration failed verification'); } const { verified, userId } = await verificationResponse.json(); if (verified) { console.log('Registration successful for user:', userId); // Automatically sign in after successful registration await handleSignIn(null, true); // Pass flag to indicate coming from registration } else { throw new Error('Passkey verification failed.'); } } catch (err: any) { console.error('Registration Error:', err); setError(err.message || 'An unexpected error occurred during registration.'); // Handle specific WebAuthn errors (e.g., user cancellation) if (err.name === 'NotAllowedError') { setError('Passkey creation cancelled or not allowed.'); } } finally { setIsSubmitting(false); } }; // --- Passkey Sign In (triggered by button or autofill) --- const handleSignIn = async (e?: React.FormEvent | null, fromRegistration = false) => { if (e) e.preventDefault(); // Prevent default form submission if triggered by button setError(null); setIsSubmitting(true); try { // 1. Get authentication options from the server // We don't need email here if using autofill (conditional UI) // but might need it for non-autofill flows to find the user's passkeys. const optionsResponse = await fetch('/api/auth/webauthn/authenticate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, // Only send email if not using autofill or if required by backend body: fromRegistration || !email ? undefined : JSON.stringify({ email }), }); if (!optionsResponse.ok) { const data = await optionsResponse.json(); throw new Error(data.error || 'Failed to get authentication options'); } const options: PublicKeyCredentialRequestOptionsJSON = await optionsResponse.json(); // 2. Prompt user for passkey using browser API const authenticationData: AuthenticationResponseJSON = await startAuthentication(options); // 3. Send authentication data to NextAuth's callback URL for verification & session creation const result = await signIn('webauthn', { ...authenticationData, // Pass the rawId, response etc. redirect: false, // Handle redirect manually }); if (result?.error) { throw new Error(result.error); } if (result?.ok) { console.log('Sign in successful, redirecting...'); router.push(callbackUrl); // Redirect on success router.refresh(); // Refresh server components } else { throw new Error('Sign in failed. Please try again.'); } } catch (err: any) { console.error('Sign In Error:', err); setError(err.message || 'An unexpected error occurred during sign in.'); if (err.name === 'NotAllowedError') { setError('Passkey authentication cancelled or not allowed.'); } } finally { setIsSubmitting(false); } }; // --- Passkey Autofill (Conditional UI) --- const handlePasskeyAutofill = async () => { console.log('Attempting passkey autofill...'); setError(null); setIsSubmitting(true); // Indicate activity try { // 1. Get authentication options (no email needed for autofill) const optionsResponse = await fetch('/api/auth/webauthn/authenticate', { method: 'POST' }); if (!optionsResponse.ok) { // Don't throw error here, autofill might just not be possible (no passkeys) console.warn('Failed to get options for autofill:', optionsResponse.statusText); setIsSubmitting(false); return; } const options: PublicKeyCredentialRequestOptionsJSON = await optionsResponse.json(); // Add conditional mediation flag options.mediation = 'conditional'; // 2. Start authentication with conditional flag const authenticationData: AuthenticationResponseJSON = await startAuthentication(options); // 3. Send to NextAuth for verification const result = await signIn('webauthn', { ...authenticationData, redirect: false, }); if (result?.error) throw new Error(result.error); if (result?.ok) { console.log('Autofill sign in successful, redirecting...'); router.push(callbackUrl); router.refresh(); } else { throw new Error('Autofill sign in failed.'); } } catch (err: any) { // Don't show error for cancellation, as user might choose manual login if (err.name !== 'AbortError' && err.name !== 'NotAllowedError') { console.error('Autofill Error:', err); // Don't set global error, allow user to proceed manually // setError(err.message || 'Autofill failed.'); } else { console.log('Autofill cancelled or not used.'); } } finally { setIsSubmitting(false); } }; return (

ERP Login / Register

{error && (

{error}

)} {/* Passkey Sign In Button (non-autofill) */} {/* This button might only be needed if autofill fails or isn't supported */}

Or Register

{/* Registration Form */} {/* Optional: Add link/button for traditional password login if implemented */} {/*

*/}

); } // This file exports the handlers for GET and POST requests to /api/auth/* // It uses the handlers generated in src/auth.ts export { GET, POST } from "@/auth" // If you need edge runtime compatibility (e.g., for Vercel Edge Functions), // you might need to configure it here, but ensure your adapter/database supports it. // Prisma with MongoDB typically requires a Node.js environment. // export const runtime = "edge" // Optional: Use edge runtime if compatible // Server-side endpoint to generate WebAuthn registration options import { generateRegistrationOptions } from '@simplewebauthn/server'; import { NextResponse } from 'next/server'; import prisma from '@/lib/prisma'; import { authConfig } from '@/auth.config'; // Import authConfig for RP details export async function POST(request: Request) { try { const { email, name } = await request.json(); if (!email) { return NextResponse.json({ error: 'Email is required' }, { status: 400 }); } // Check if user already exists let user = await prisma.user.findUnique({ where: { email } }); if (!user) { // Create a new user if they don't exist // In a real app, you might want a separate registration flow // or invite system instead of creating users on the fly here. user = await prisma.user.create({ data: { email, name: name || email.split('@')[0], // Use provided name or derive from email // Set default role, device limit etc. as needed role: 'USER', deviceLimit: 1, }, }); console.log(`Created new user for registration: ${user.id} (${email})`); } else { console.log(`User found for registration: ${user.id} (${email})`); } // Get existing authenticators for the user to prevent duplicates const userAuthenticators = await prisma.authenticator.findMany({ where: { userId: user.id }, }); const options = await generateRegistrationOptions({ rpName: authConfig.providers.find(p => p.id === 'webauthn')?.name ?? process.env.AUTH_WEBAUTHN_RP_NAME ?? 'Your App Name', rpID: new URL(process.env.AUTH_URL!).hostname, // Derive RP ID from AUTH_URL hostname userID: user.id, // Use Prisma User ID userName: user.email!, // Use email as userName for WebAuthn userDisplayName: user.name ?? user.email!, // Use name or email for display // Don't prompt for resident keys (passkeys stored on device) by default // authenticatorSelection: { residentKey: 'required', userVerification: 'preferred' }, // Exclude credentials already registered for this user excludeCredentials: userAuthenticators.map(auth => ({ id: auth.credentialID, type: 'public-key', // Optional: Specify transports if known (e.g., ["internal", "hybrid"]) // transports: auth.transports?.split(','), })), // Require attestation for more security (optional) // attestation: 'direct', }); // Store the challenge temporarily (e.g., in session, or a short-lived DB record) // For simplicity here, we'll rely on the client sending it back. // In a production app, store `options.challenge` associated with the user session // and verify it in the register-verify step. console.log(`Generated registration options for user ${user.id}, challenge: ${options.challenge}`); return NextResponse.json(options); } catch (error) { console.error("Error generating registration options:", error); return NextResponse.json({ error: 'Failed to generate registration options' }, { status: 500 }); } } // Server-side endpoint to verify WebAuthn registration response import { verifyRegistrationResponse } from '@simplewebauthn/server'; import type { VerifiedRegistrationResponse, VerifyRegistrationResponseOpts } from '@simplewebauthn/server'; import type { RegistrationResponseJSON } from '@simplewebauthn/types'; import { NextResponse } from 'next/server'; import prisma from '@/lib/prisma'; import { authConfig } from '@/auth.config'; // Import authConfig for RP details export async function POST(request: Request) { try { const body: RegistrationResponseJSON & { email: string } = await request.json(); const { email } = body; if (!email) { return NextResponse.json({ error: 'Email is required for verification' }, { status: 400 }); } const user = await prisma.user.findUnique({ where: { email } }); if (!user) { return NextResponse.json({ error: 'User not found' }, { status: 404 }); } // Retrieve the expected challenge (needs to be stored temporarily, see register route) // ** IMPORTANT: This is a placeholder. You MUST store the challenge securely ** // ** (e.g., in the user's session or a temporary DB record) after generating ** // ** registration options and retrieve it here for verification. ** const expectedChallenge = "PLACEHOLDER_RETRIEVE_STORED_CHALLENGE"; // Replace with actual challenge retrieval const rpID = new URL(process.env.AUTH_URL!).hostname; const expectedOrigin = process.env.AUTH_WEBAUTHN_RP_ORIGIN ?? new URL(process.env.AUTH_URL!).origin; let verification: VerifiedRegistrationResponse; try { const opts: VerifyRegistrationResponseOpts = { response: body, expectedChallenge: `${expectedChallenge}`, // Ensure it's a string expectedOrigin, expectedRPID: rpID, requireUserVerification: false, // Adjust based on your requirements ('preferred', 'required', 'discouraged') }; console.log("Verification Options:", opts); verification = await verifyRegistrationResponse(opts); console.log("Verification Result:", verification); } catch (error: any) { console.error("WebAuthn Verification Error:", error); return NextResponse.json({ error: `Verification failed: ${error.message}` }, { status: 400 }); } const { verified, registrationInfo } = verification; if (verified && registrationInfo) { console.log("Registration verified successfully:", registrationInfo); const { credentialPublicKey, credentialID, counter, credentialDeviceType, credentialBackedUp } = registrationInfo; // Check if this credential ID already exists const existingAuthenticator = await prisma.authenticator.findUnique({ where: { credentialID: Buffer.from(credentialID).toString('base64url') }, }); if (existingAuthenticator) { console.warn(`Authenticator with credentialID ${Buffer.from(credentialID).toString('base64url')} already exists.`); // Decide how to handle: update counter? return error? For now, we'll allow login. // Potentially update counter if needed: // await prisma.authenticator.update({ // where: { id: existingAuthenticator.id }, // data: { counter }, // }); } else { // Save the new authenticator to the database await prisma.authenticator.create({ data: { credentialID: Buffer.from(credentialID).toString('base64url'), // Store as base64url string userId: user.id, credentialPublicKey: Buffer.from(credentialPublicKey).toString('base64url'), // Store as base64url string counter: counter, credentialDeviceType: credentialDeviceType, credentialBackedUp: credentialBackedUp, // Store transports if available in body.response.clientExtensionResults transports: body.response.transports?.join(','), // Store as comma-separated string providerAccountId: '', // Not directly applicable for WebAuthn but might be needed by adapter schema }, }); console.log(`Saved new authenticator for user ${user.id}`); // --- Device Approval Logic --- // Automatically create a Device record, initially unapproved unless it's the first device? // Or require admin approval for all new devices. const deviceIdentifier = Buffer.from(credentialID).toString('base64url'); // Use credential ID as unique device identifier const isFirstDevice = await prisma.device.count({ where: { userId: user.id } }) === 0; await prisma.device.create({ data: { userId: user.id, identifier: deviceIdentifier, name: `Device registered on ${new Date().toLocaleDateString()}`, // Default name userAgent: request.headers.get('user-agent') ?? 'Unknown', isApproved: isFirstDevice, // Auto-approve the first device? Or set to false always. approvedAt: isFirstDevice ? new Date() : null, lastLoginAt: new Date(), // Mark login time } }); console.log(`Created device record for authenticator ${deviceIdentifier}, Approved: ${isFirstDevice}`); } // Return success and user ID return NextResponse.json({ verified: true, userId: user.id }); } else { console.error("Registration verification failed."); return NextResponse.json({ error: 'Registration verification failed.' }, { status: 400 }); } } catch (error) { console.error("Error verifying registration:", error); return NextResponse.json({ error: 'Failed to verify registration' }, { status: 500 }); } } // Server-side endpoint to generate WebAuthn authentication options import { generateAuthenticationOptions } from '@simplewebauthn/server'; import type { GenerateAuthenticationOptionsOpts } from '@simplewebauthn/server'; import { NextResponse } from 'next/server'; import prisma from '@/lib/prisma'; import { authConfig } from '@/auth.config'; // Import authConfig for RP details export async function POST(request: Request) { try { let userAuthenticators: any[] = []; const body = await request.text(); // Read body safely let email: string | undefined; // Check if body is valid JSON and contains email try { const jsonData = JSON.parse(body); email = jsonData.email; } catch (e) { // Body might be empty or not JSON, which is fine for conditional UI console.log("No email provided in request body, proceeding with potential conditional UI flow."); } if (email) { // If email is provided (non-conditional flow), find the user and their authenticators const user = await prisma.user.findUnique({ where: { email } }); if (user) { userAuthenticators = await prisma.authenticator.findMany({ where: { userId: user.id }, }); console.log(`Found ${userAuthenticators.length} authenticators for user ${user.id} (${email})`); } else { console.log(`User with email ${email} not found for authentication.`); // Return empty options or an error? Returning options allows browser to handle "no passkey found" } } else { // If no email (conditional UI flow), don't filter by user yet. // The browser will filter available passkeys based on rpId. console.log("Generating authentication options for conditional UI (no specific user)."); // We *could* fetch all authenticators, but it's not necessary for generating options. } const rpID = new URL(process.env.AUTH_URL!).hostname; const opts: GenerateAuthenticationOptionsOpts = { rpID, // Allow any credential associated with this RP ID if no user specified // If user *is* specified (email provided), allow only their credentials allowCredentials: userAuthenticators.length > 0 ? userAuthenticators.map(auth => ({ id: auth.credentialID, type: 'public-key', transports: auth.transports?.split(','), // Optional: Provide transports hint })) : undefined, // Undefined allows any credential for the RP ID (for conditional UI) userVerification: 'preferred', // Or 'required'/'discouraged' }; const options = await generateAuthenticationOptions(opts); // Store the challenge temporarily (e.g., in session or short-lived DB record) // ** IMPORTANT: This is crucial for security. ** // Store `options.challenge` associated with the potential user (if email provided) // or the session, and verify it during the actual sign-in callback (`authorize` in auth.config.ts). console.log(`Generated authentication options, challenge: ${options.challenge}`); // Example: await storeChallengeForSession(sessionId, options.challenge); return NextResponse.json(options); } catch (error) { console.error("Error generating authentication options:", error); return NextResponse.json({ error: 'Failed to generate authentication options' }, { status: 500 }); } } **Next Steps & Explanation:** 1. **Environment Variables:** Create a `.env` file in the root directory and populate it with your MongoDB connection string (`DATABASE_URL`) and a secure `AUTH_SECRET` (generate one using `openssl rand -base64 32`). Also set `AUTH_URL` to your development URL (e.g., `http://localhost:3000`) and `AUTH_WEBAUTHN_RP_NAME` to your app's name. 2. **Install Dependencies:** Run `npm install` or `yarn install`. 3. **Database Setup:** * Make sure your MongoDB server is running and accessible. * Run `npx prisma db push` to sync your Prisma schema with the database. This will create the collections based on your models. 4. **Run the Application:** Run `npm run dev` or `yarn dev`. 5. **Access:** * Open `http://localhost:3000`. You should be redirected to `/login`. * Try registering with an email. Your browser should prompt you to create a passkey (e.g., using Windows Hello, Touch ID, Face ID, or a security key). * After successful registration, you should be automatically signed in and redirected to `/dashboard`. * Sign out using the button on the dashboard. * Return to `/login`. Your browser might now automatically prompt you to sign in with the passkey you created (Conditional UI / Autofill). If not, use the "Sign In with Passkey" button. **Important Considerations:** * **Challenge Storage:** The current WebAuthn API routes (`/api/auth/webauthn/*`) have **placeholder comments** regarding challenge storage. In a production application, you **must** securely store the `challenge` generated during option creation (e.g., in the user's session or a temporary database record) and verify it during the verification step. This prevents replay attacks. * **Device Approval Flow:** The device approval logic is sketched out in comments within `auth.config.ts` (`authorize` callback) and `register-verify/route.ts`. You need to implement the actual logic for: * Identifying the current device during login (this is non-trivial and often relies on user agent or asking the user to name their device). * Checking the `isApproved` status in the `Device` model. * Creating an admin interface to view and approve pending devices. * Enforcing device limits. * **Error Handling:** The login page and API routes have basic error handling. Enhance this for a better user experience. * **Transaction Logging:** The `TransactionLog` model exists, but you need to implement a service or utility function to call `prisma.transactionLog.create(...)` whenever a significant action occurs (login, data modification, etc.). * **RBAC Enforcement:** The middleware provides basic role checking for admin routes. You'll need to refine this and potentially add checks within specific pages or API routes for finer-grained permissions (add, edit, delete, view). * **UI/UX:** This is a foundational setup. You'll need to build out the actual ERP modules, navigation, and use a UI library (like Tailwind CSS, which is included, or others like Shadcn/ui, Material UI) to create the modern, responsive interface. * **Security:** Review NextAuth.js and WebAuthn security best practices, especially regarding RP ID, origins, user verification requirements, and challenge handling. Ensure `AUTH_SECRET` is kept secret. This provides a solid starting point for your ERP application with passkey authentication. Remember to implement the missing pieces, particularly around challenge storage and the device approval workflow.