Okay, this involves several advanced concepts including passkeys (WebAuthn), role-based access control (RBAC), device management with admin approval, and logging within a Next.js application using Auth.js, Prisma, and MongoDB. Setting up the complete end-to-end flow is quite extensive. I will provide the foundational structure, including the necessary configurations, Prisma schema, Auth.js setup, middleware, and basic API route placeholders for the passkey and device management logic. You will need to build out the specific UI components and detailed logic for passkey registration/verification, admin approval workflows, and granular permissions checks. Here's the initial setup: { "name": "nextjs-authjs-passkey-rbac", "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": "^1.0.0", "@prisma/client": "^5.0.0", "@simplewebauthn/browser": "^9.0.0", "@simplewebauthn/server": "^9.0.0", "mongodb": "^6.0.0", "next": "14.2.3", "next-auth": "^4.24.7", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.3", "postcss": "^8", "prisma": "^5.0.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; module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } import type { Config } from "tailwindcss"; const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "./src/**/*.{js,ts,jsx,tsx,mdx}", // If using src directory ], 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; 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? password String? // For Credentials provider if needed roleId String? @db.ObjectId createdAt DateTime @default(now()) updatedAt DateTime @updatedAt accounts Account[] sessions Session[] authenticators Authenticator[] devices Device[] logs Log[] role Role? @relation(fields: [roleId], references: [id]) } model VerificationToken { identifier String @id @map("_id") token String @unique expires DateTime @@unique([identifier, token]) } // Model for WebAuthn credentials (Passkeys) model Authenticator { id String @id @default(auto()) @map("_id") @db.ObjectId credentialID String @unique // Store as base64url encoded string userId String @db.ObjectId credentialPublicKey Bytes // Store the raw public key bytes counter Int credentialDeviceType String // 'singleDevice' or 'multiDevice' credentialBackedUp Boolean transports String? // Comma-separated list like "internal,hybrid" user User @relation(fields: [userId], references: [id], onDelete: Cascade) } // Model for registered devices model Device { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId name String? // e.g., "Chrome on macOS" userAgent String? ipAddress String? isApproved Boolean @default(false) // Requires admin approval registeredAt DateTime @default(now()) lastLoginAt DateTime? user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@index([userId]) } // Model for Roles model Role { id String @id @default(auto()) @map("_id") @db.ObjectId name String @unique // e.g., "admin", "editor", "viewer" permissions Permission[] // Define permissions associated with this role users User[] } // Model for Permissions (example, adjust as needed) model Permission { id String @id @default(auto()) @map("_id") @db.ObjectId action String // e.g., "create", "read", "update", "delete" subject String // e.g., "user", "post", "device", "all" // Add conditions if needed, e.g., based on ownership roles Role[] // Roles that have this permission } // Model for User Transaction Logs model Log { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId action String // e.g., "login", "logout", "register_device", "update_profile" timestamp DateTime @default(now()) ipAddress String? userAgent String? details Json? // Store additional context if needed user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@index([userId, timestamp]) } # Prisma DATABASE_URL="mongodb+srv://:@/?retryWrites=true&w=majority" # NextAuth.js # Generate a secret: openssl rand -base64 32 NEXTAUTH_SECRET="YOUR_NEXTAUTH_SECRET" NEXTAUTH_URL="http://localhost:3000" # Replace with your deployment URL # WebAuthn (Passkeys) - Required for @simplewebauthn/server RP_ID="localhost" # Relying Party ID - MUST match your domain in production RP_NAME="Your App Name" RP_ORIGIN="http://localhost:3000" # MUST match your frontend origin in production 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'], // Uncomment to see Prisma queries }); if (process.env.NODE_ENV !== 'production') global.prisma = prisma; import NextAuth, { type NextAuthOptions } from 'next-auth'; import CredentialsProvider from 'next-auth/providers/credentials'; import { PrismaAdapter } from '@auth/prisma-adapter'; import { prisma } from '@/lib/prisma'; // Adjust path if needed // import bcrypt from 'bcrypt'; // Install bcrypt if using password hashing // Placeholder for WebAuthn/Passkey logic - requires separate API routes // import { webAuthnOptions } from '@/lib/webauthn'; export const authOptions: NextAuthOptions = { adapter: PrismaAdapter(prisma), providers: [ CredentialsProvider({ name: 'Credentials', credentials: { email: { label: "Email", type: "email", placeholder: "user@example.com" }, password: { label: "Password", type: "password" } }, async authorize(credentials, req) { if (!credentials?.email || !credentials?.password) { return null; } const user = await prisma.user.findUnique({ where: { email: credentials.email } }); if (!user) { // Handle user not found return null; } // IMPORTANT: Implement proper password hashing and comparison // Example using bcrypt (install bcryptjs and @types/bcryptjs): // const isValidPassword = await bcrypt.compare(credentials.password, user.password || ''); // if (!isValidPassword) { // return null; // } // For demo purposes ONLY - DO NOT use plain text passwords in production if (user.password !== credentials.password) { console.warn("Password comparison skipped for demo purposes. Implement hashing!"); // return null; // Enable this line after implementing hashing } // Add logic here to check if the device needs approval or if device limit is reached // This would involve checking the 'Device' model based on request info (IP, User-Agent) // Add logging for successful login attempt // await prisma.log.create({ data: { userId: user.id, action: 'login_credentials', ipAddress: req.headers?.['x-forwarded-for'] || req.connection?.remoteAddress, userAgent: req.headers?.['user-agent'] } }); // Return only essential user info for the session return { id: user.id, name: user.name, email: user.email, image: user.image, roleId: user.roleId, // Include roleId for client-side checks if needed }; } }), // Add other providers like Google, GitHub etc. if needed // Add WebAuthn provider logic here (complex, involves separate API routes) ], session: { strategy: 'jwt', // Use JWT for session strategy }, callbacks: { async jwt({ token, user, account, profile }) { // Persist the user ID and role ID from the database to the token if (user) { token.id = user.id; // Fetch role details if needed, or just pass the roleId const dbUser = await prisma.user.findUnique({ where: { id: user.id }, include: { role: true }, // Include role information }); token.role = dbUser?.role?.name; // Add role name to the token token.roleId = dbUser?.roleId; } return token; }, async session({ session, token }) { // Send properties to the client, like user ID and role if (session.user) { session.user.id = token.id as string; session.user.role = token.role as string; // Add role to session user object session.user.roleId = token.roleId as string; } return session; }, }, pages: { signIn: '/auth/signin', // Custom sign-in page // error: '/auth/error', // Custom error page // verifyRequest: '/auth/verify-request', // Email verification page // newUser: '/auth/new-user' // Redirect new users (e.g., first login) }, // Enable debug messages in development debug: process.env.NODE_ENV === 'development', secret: process.env.NEXTAUTH_SECRET, }; export default NextAuth(authOptions); import { withAuth } from "next-auth/middleware"; import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server'; import type { JWT } from 'next-auth/jwt'; // Define roles const ROLES = { ADMIN: 'admin', USER: 'user', VIEWER: 'viewer', }; // Define protected routes and their required roles/permissions const protectedRoutes: Record = { '/dashboard': [ROLES.USER, ROLES.ADMIN], // Requires USER or ADMIN role '/admin': [ROLES.ADMIN], // Requires ADMIN role '/settings': [ROLES.USER, ROLES.ADMIN], // Add more routes and their required roles }; export default withAuth( // `withAuth` augments your `Request` with the user's token. function middleware(req: NextRequest & { nextauth: { token: JWT | null } }) { const { token } = req.nextauth; const { pathname } = req.nextUrl; // Check if the route is protected const requiredRoles = Object.entries(protectedRoutes).find(([routePrefix]) => pathname.startsWith(routePrefix) )?.[1]; if (requiredRoles) { // If route is protected and user is not logged in, redirect to login if (!token) { const url = req.nextUrl.clone(); url.pathname = '/auth/signin'; url.searchParams.set('callbackUrl', pathname); // Redirect back after login return NextResponse.redirect(url); } // Check if the user has one of the required roles const userRole = token.role as string; // Role stored in JWT during session callback if (!userRole || !requiredRoles.includes(userRole)) { // If user doesn't have the required role, redirect to an unauthorized page or home console.warn(`Unauthorized access attempt to ${pathname} by user ${token.email} with role ${userRole}`); const url = req.nextUrl.clone(); url.pathname = '/unauthorized'; // Or redirect to '/' return NextResponse.redirect(url); } } // Allow the request to proceed if: // 1. It's not a protected route // 2. User is logged in and has the required role for a protected route return NextResponse.next(); }, { callbacks: { authorized: ({ token, req }) => { // This callback determines if the middleware function should run. // We want it to run on all pages to handle redirects correctly, // so we return true. The actual authorization logic is inside the middleware function. // Alternatively, you could do basic logged-in checks here for specific paths. // Example: return !!token || req.nextUrl.pathname.startsWith('/public'); return true; }, }, pages: { signIn: '/auth/signin', // Ensure this matches authOptions }, } ); // Define which paths the middleware should run on export const config = { matcher: [ /* * Match all request paths except for the ones starting with: * - api (API routes) * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * - auth/signin (the sign-in page itself) */ '/((?!api|_next/static|_next/image|favicon.ico|auth/signin|unauthorized).*)', // Add specific paths if needed, e.g., '/dashboard/:path*', '/admin/:path*' ], }; import '@/styles/globals.css'; // Assuming you have globals.css import type { AppProps } from 'next/app'; import { SessionProvider } from "next-auth/react"; import type { Session } from 'next-auth'; // Import Session type // Use SessionProvider context to keep session state available throughout the app export default function App({ Component, pageProps: { session, ...pageProps }, // Extract session from pageProps }: AppProps<{ session: Session }>) { // Add Session type to AppProps generic return ( ); } @tailwind base; @tailwind components; @tailwind utilities; /* Add any global styles here */ body { @apply bg-gray-100 text-gray-900; } import Link from 'next/link'; import { useSession, signIn, signOut } from 'next-auth/react'; export default function Home() { const { data: session, status } = useSession(); return (

Auth.js Passkey Demo

{status === 'loading' &&

Loading session...

} {status === 'authenticated' && session?.user && (

Signed in as {session.user.email} ({session.user.role})

Go to Dashboard {session.user.role === 'admin' && ( Admin Panel )}

)} {status === 'unauthenticated' && (

Not signed in

)}

Project Features:

Next.js 14 (Pages Router) + TypeScript
Auth.js (NextAuth.js v4)
Prisma + MongoDB
Credentials Provider (Basic)
Passkey/WebAuthn Setup (Models + API Placeholders)
Device Registration (Model + Admin Approval Field)
Role-Based Access Control (Models + Middleware)
Transaction Logging (Model)
Tailwind CSS

); } import { useState, FormEvent } from 'react'; import { signIn, getCsrfToken, getProviders } from 'next-auth/react'; import { useRouter } from 'next/router'; import type { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next'; export default function SignIn({ csrfToken, providers }: InferGetServerSidePropsType) { const router = useRouter(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(router.query.error as string); // Get error from query params const handleSubmit = async (e: FormEvent) => { e.preventDefault(); setError(null); // Clear previous errors const result = await signIn('credentials', { redirect: false, // Don't redirect automatically, handle it manually email: email, password: password, callbackUrl: (router.query.callbackUrl as string) || '/', // Get callbackUrl from query or default to home }); if (result?.error) { setError(result.error); // Set error message from NextAuth } else if (result?.url) { router.push(result.url); // Redirect on success } else { // Should not happen with redirect: false, but handle just in case router.push((router.query.callbackUrl as string) || '/'); } }; // TODO: Add Passkey/WebAuthn Login Button and Logic here // This would typically involve: // 1. A button "Login with Passkey". // 2. onClick: Fetch authentication options from your `/api/passkey/auth-options` endpoint. // 3. Use `@simplewebauthn/browser`'s `startAuthentication` with the options. // 4. Send the result to your `/api/passkey/verify-auth` endpoint. // 5. If verification is successful, the backend should use `signIn` programmatically or establish the session. return (

Sign In

{error && (

Authentication failed: {error}

)} {/* Placeholder for Passkey Login Button */}

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

Don't have an account? Register (Not Implemented)

); } // Fetch CSRF token and providers server-side export async function getServerSideProps(context: GetServerSidePropsContext) { const csrfToken = await getCsrfToken(context); const providers = await getProviders(); // Useful if you add OAuth providers return { props: { csrfToken: csrfToken ?? null, // Handle case where token might be undefined providers: providers ?? {}, // Handle case where providers might be null }, }; } import { useSession, signOut } from 'next-auth/react'; import { useRouter } from 'next/router'; import Link from 'next/link'; export default function Dashboard() { const { data: session, status } = useSession(); const router = useRouter(); // Loading state if (status === 'loading') { return

; } // If not authenticated (should be handled by middleware, but good practice) if (status === 'unauthenticated') { // router.push('/auth/signin'); // Redirect handled by middleware return

Access Denied. Redirecting...

; } // TODO: Add Passkey Registration Logic // 1. Button "Register Passkey". // 2. onClick: Fetch registration options from `/api/passkey/register-options`. // 3. Use `@simplewebauthn/browser`'s `startRegistration` with options. // 4. Send result to `/api/passkey/verify-registration`. // 5. Handle success/error messages. Inform user if device needs approval. // TODO: Display Registered Devices and Approval Status // Fetch devices associated with the user from an API endpoint. return (

Dashboard

{session?.user && (

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

Your Role: {session.user.role || 'N/A'}

User ID: {session.user.id}

)}

{/* Passkey Management Section */}

Passkey Management

{/* TODO: List registered passkeys/authenticators */}

{/* Device Management Section */}

Registered Devices

Manage devices associated with your account.

{/* TODO: List registered devices and their approval status */}

(Device listing not implemented)

New devices may require admin approval before passkey login is enabled.

{/* Link to Admin Panel (if admin) */} {session?.user?.role === 'admin' && (

Admin Area

Go to Admin Panel

)} {/* Placeholder for other dashboard content */}

Other Actions

(Add user-specific content here based on roles/permissions)

Back to Home

); } import { useSession } from 'next-auth/react'; import Link from 'next/link'; // This is a placeholder Admin page. // You would fetch data (users, devices needing approval, roles) here // and build UI components for management tasks. export default function AdminDashboard() { const { data: session, status } = useSession(); // Basic loading and auth check (middleware should handle primary protection) if (status === 'loading') return

; if (status === 'unauthenticated' || session?.user?.role !== 'admin') { return

Access Denied.

; } // TODO: Fetch data for admin tasks // - Users list (for role assignment) // - Devices list (filter by isApproved === false) // - Roles list (for management) // - Logs (optional) // TODO: Implement Admin Actions // - Approve/Reject Device Registration // - Assign Roles to Users // - Create/Edit/Delete Roles & Permissions return (

Admin Panel

{/* Device Approval Section */}

Device Approval Queue

{/* TODO: List devices awaiting approval */}

(Device approval list not implemented)

{/* Add buttons to approve/reject */}

{/* User Management Section */}

User Management

{/* TODO: List users */}

(User list and role assignment not implemented)

{/* Add functionality to change user roles */}

{/* Role Management Section */}

Role & Permission Management

{/* TODO: List roles and permissions */}

(Role/permission management not implemented)

{/* Add functionality to create/edit roles */}

{/* Transaction Logs Section */}

Transaction Logs

{/* TODO: Display recent logs */}

(Log viewer not implemented)

Back to Dashboard

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

Unauthorized

You do not have permission to access this page.

Go to Home Page

); } {/* Placeholder API routes for Passkey/WebAuthn */} import type { NextApiRequest, NextApiResponse } from 'next'; import { generateRegistrationOptions } from '@simplewebauthn/server'; import { prisma } from '@/lib/prisma'; // Adjust path if needed import { getServerSession } from "next-auth/next"; import { authOptions } from '../auth/[...nextauth]'; // Adjust path // In-memory store for challenges (replace with DB/Redis in production) const challengeStore: Record = {}; export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== 'POST') { return res.status(405).json({ message: 'Method Not Allowed' }); } const session = await getServerSession(req, res, authOptions); if (!session?.user?.id) { return res.status(401).json({ message: 'Unauthorized' }); } const userId = session.user.id; const user = await prisma.user.findUnique({ where: { id: userId }, include: { authenticators: true }, // Get existing authenticators }); if (!user) { return res.status(404).json({ message: 'User not found' }); } const rpID = process.env.RP_ID!; const rpName = process.env.RP_NAME!; const rpOrigin = process.env.RP_ORIGIN!; try { const options = await generateRegistrationOptions({ rpID, rpName, userID: user.id, // Use database ID userName: user.email!, // Use email or name userDisplayName: user.name ?? user.email!, // Don't prompt users for additional authenticators if they already have some // excludeCredentials: user.authenticators.map(auth => ({ // id: auth.credentialID, // Need to decode from base64url if stored that way // type: 'public-key', // transports: auth.transports?.split(',') as AuthenticatorTransportFuture[] | undefined, // })), authenticatorSelection: { // residentKey: 'preferred', // For discoverable credentials (passkeys) userVerification: 'preferred', // Prefer biometrics/PIN }, // attestationType: 'none', // 'direct', 'indirect', 'none', 'enterprise' }); // Store the challenge temporarily (associate with user ID) // IMPORTANT: Use a proper store (DB, Redis) in production, not in-memory challengeStore[userId] = options.challenge; console.log("Generated registration options for user:", userId, "Challenge:", options.challenge); return res.status(200).json(options); } catch (error) { console.error('Error generating registration options:', error); return res.status(500).json({ message: 'Failed to generate registration options' }); } } import type { NextApiRequest, NextApiResponse } from 'next'; import { verifyRegistrationResponse } from '@simplewebauthn/server'; import type { VerifiedRegistrationResponse, VerifyRegistrationResponseOpts } from '@simplewebauthn/server'; import { prisma } from '@/lib/prisma'; // Adjust path import { getServerSession } from "next-auth/next"; import { authOptions } from '../auth/[...nextauth]'; // Adjust path import type { RegistrationResponseJSON } from '@simplewebauthn/types'; // In-memory store for challenges (replace with DB/Redis in production) const challengeStore: Record = {}; // Needs to be shared or persisted export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== 'POST') { return res.status(405).json({ message: 'Method Not Allowed' }); } const session = await getServerSession(req, res, authOptions); if (!session?.user?.id) { return res.status(401).json({ message: 'Unauthorized' }); } const userId = session.user.id; const user = await prisma.user.findUnique({ where: { id: userId } }); if (!user) { return res.status(404).json({ message: 'User not found' }); } const rpID = process.env.RP_ID!; const rpOrigin = process.env.RP_ORIGIN!; // Retrieve the challenge stored during options generation const expectedChallenge = challengeStore[userId]; // Retrieve challenge for the user console.log("Verifying registration for user:", userId, "Expected Challenge:", expectedChallenge); if (!expectedChallenge) { console.error("No challenge found for user:", userId); return res.status(400).json({ message: 'Challenge not found or expired' }); } // Clear the challenge after use (important!) delete challengeStore[userId]; const body: RegistrationResponseJSON = req.body; try { const verification: VerifiedRegistrationResponse = await verifyRegistrationResponse({ response: body, expectedChallenge: expectedChallenge, expectedOrigin: rpOrigin, expectedRPID: rpID, requireUserVerification: true, // Enforce user verification (biometric, PIN) }); const { verified, registrationInfo } = verification; if (verified && registrationInfo) { console.log("Registration verified for user:", userId); const { credentialPublicKey, credentialID, counter, credentialDeviceType, credentialBackedUp } = registrationInfo; // Check if this credential ID already exists for any user const existingAuthenticator = await prisma.authenticator.findUnique({ where: { credentialID: Buffer.from(credentialID).toString('base64url') }, // Store ID as base64url string }); if (existingAuthenticator) { console.warn("Credential ID already exists:", existingAuthenticator.credentialID); return res.status(409).json({ message: 'Credential ID already registered.' }); } // Save the authenticator to the database await prisma.authenticator.create({ data: { userId: userId, credentialID: Buffer.from(credentialID).toString('base64url'), // Store as base64url string credentialPublicKey: Buffer.from(credentialPublicKey), // Store raw bytes counter: counter, credentialDeviceType: credentialDeviceType, credentialBackedUp: credentialBackedUp, transports: body.response.transports?.join(','), // Store transports as comma-separated string }, }); // --- Device Registration Logic --- // Create a device entry, initially not approved const userAgent = req.headers['user-agent'] ?? 'Unknown'; const ipAddress = req.headers['x-forwarded-for'] as string || req.socket.remoteAddress; await prisma.device.create({ data: { userId: userId, name: `Device registered via Passkey (${new Date().toLocaleDateString()})`, // Or derive from user agent userAgent: userAgent, ipAddress: ipAddress, isApproved: false, // Default to false, requires admin approval } }); // --- Logging --- await prisma.log.create({ data: { userId: userId, action: 'passkey_register', ipAddress: ipAddress, userAgent: userAgent, details: { credentialID: Buffer.from(credentialID).toString('base64url') } } }); return res.status(200).json({ verified: true }); } else { console.error("Registration verification failed:", verification); return res.status(400).json({ verified: false, message: 'Registration verification failed.' }); } } catch (error: any) { console.error('Error verifying registration:', error); return res.status(500).json({ verified: false, message: error.message }); } } import type { NextApiRequest, NextApiResponse } from 'next'; import { generateAuthenticationOptions } from '@simplewebauthn/server'; import { prisma } from '@/lib/prisma'; // Adjust path // In-memory store for challenges (replace with DB/Redis in production) const challengeStore: Record = {}; // Needs to be shared or persisted export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== 'POST') { return res.status(405).json({ message: 'Method Not Allowed' }); } // In a real app, you might get the user ID from the request (e.g., if they entered email first) // Or, if using discoverable credentials (passkeys), you might not know the user yet. const { email } = req.body; // Optional: Get email if provided for non-discoverable credentials let userAuthenticators: { credentialID: string, transports?: string }[] = []; if (email) { const user = await prisma.user.findUnique({ where: { email: email }, include: { authenticators: true } }); if (user) { userAuthenticators = user.authenticators.map(auth => ({ id: Buffer.from(auth.credentialID, 'base64url'), // Decode base64url ID back to Buffer/Uint8Array type: 'public-key', transports: auth.transports?.split(',') as AuthenticatorTransportFuture[] | undefined, })); } } const rpID = process.env.RP_ID!; try { const options = await generateAuthenticationOptions({ rpID, // Allow users to select any passkey associated with this RP // For non-discoverable credentials, you might provide `allowCredentials` based on email lookup allowCredentials: email ? userAuthenticators : undefined, userVerification: 'preferred', // Prefer biometrics/PIN }); // Store the challenge temporarily // IMPORTANT: Associate challenge with the *potential* user or session if possible, // or handle challenge lookup differently during verification. For discoverable credentials, // the user isn't known yet. Storing globally is insecure without proper management. // A common pattern is to store the challenge in the user's session *after* they initiate login. // For this placeholder, we'll store it globally (NOT PRODUCTION READY) const tempChallengeId = `auth_${Date.now()}`; // Temporary ID for the challenge challengeStore[tempChallengeId] = options.challenge; console.log("Generated auth options. Challenge:", options.challenge, "Stored with temp ID:", tempChallengeId); // Return the options AND the temporary ID to the client return res.status(200).json({ ...options, challengeId: tempChallengeId }); } catch (error) { console.error('Error generating authentication options:', error); return res.status(500).json({ message: 'Failed to generate authentication options' }); } } import type { NextApiRequest, NextApiResponse } from 'next'; import { verifyAuthenticationResponse } from '@simplewebauthn/server'; import type { VerifiedAuthenticationResponse, VerifyAuthenticationResponseOpts } from '@simplewebauthn/server'; import { prisma } from '@/lib/prisma'; // Adjust path import type { AuthenticationResponseJSON } from '@simplewebauthn/types'; // Import signIn from next-auth/react is for CLIENT-SIDE. Need server-side equivalent or manual session creation. // We will manually find the user and potentially create a session or use a custom sign-in flow. // In-memory store for challenges (replace with DB/Redis in production) const challengeStore: Record = {}; // Needs to be shared or persisted export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== 'POST') { return res.status(405).json({ message: 'Method Not Allowed' }); } const body: AuthenticationResponseJSON & { challengeId: string } = req.body; const { challengeId } = body; // Retrieve the challenge using the temporary ID const expectedChallenge = challengeStore[challengeId]; console.log("Verifying auth. Expected Challenge:", expectedChallenge, "from temp ID:", challengeId); if (!expectedChallenge) { console.error("No challenge found for temp ID:", challengeId); return res.status(400).json({ message: 'Challenge not found, expired, or already used.' }); } // Clear the challenge (important!) delete challengeStore[challengeId]; const rpID = process.env.RP_ID!; const rpOrigin = process.env.RP_ORIGIN!; let dbAuthenticator; try { // Find the authenticator by its credential ID (received from the client) const credentialIDBase64URL = Buffer.from(body.rawId, 'base64url').toString('base64url'); // Ensure consistent format console.log("Looking for authenticator with credential ID:", credentialIDBase64URL); dbAuthenticator = await prisma.authenticator.findUnique({ where: { credentialID: credentialIDBase64URL }, include: { user: true } // Include user data }); if (!dbAuthenticator) { console.error("Authenticator not found for credential ID:", credentialIDBase64URL); return res.status(404).json({ message: 'Authenticator not found.' }); } console.log("Found authenticator for user:", dbAuthenticator.userId); // --- Device Approval Check --- // Find the device associated with this login attempt (might need more sophisticated matching) const userAgent = req.headers['user-agent'] ?? 'Unknown'; const ipAddress = req.headers['x-forwarded-for'] as string || req.socket.remoteAddress; // This check is basic. A robust solution might involve linking authenticator to device // or prompting for device registration if it's unrecognized. const device = await prisma.device.findFirst({ where: { userId: dbAuthenticator.userId, // Add more criteria if possible, e.g., matching userAgent partially }, orderBy: { // Get the most recently used/registered device as a heuristic lastLoginAt: 'desc', } }); // If a device record exists, check if it's approved. // If no device record exists for this user agent/IP, maybe deny or prompt registration? // For simplicity here, we check the found device or assume okay if no specific device found yet. if (device && !device.isApproved) { console.warn(`Login attempt from unapproved device for user ${dbAuthenticator.userId}. Device ID: ${device.id}`); // Optionally log this attempt await prisma.log.create({ data: { userId: dbAuthenticator.userId, action: 'login_passkey_unapproved_device', ipAddress: ipAddress, userAgent: userAgent, details: { credentialID: credentialIDBase64URL, deviceId: device.id } } }); return res.status(403).json({ message: 'Device not approved. Please contact an administrator.' }); } // --- End Device Approval Check --- const verification: VerifiedAuthenticationResponse = await verifyAuthenticationResponse({ response: body, expectedChallenge: expectedChallenge, expectedOrigin: rpOrigin, expectedRPID: rpID, authenticator: { credentialID: Buffer.from(dbAuthenticator.credentialID, 'base64url'), // Provide as Uint8Array/Buffer credentialPublicKey: dbAuthenticator.credentialPublicKey, // Provide as Buffer counter: dbAuthenticator.counter, transports: dbAuthenticator.transports?.split(',') as AuthenticatorTransportFuture[] | undefined, }, requireUserVerification: true, // Usually true for login }); const { verified, authenticationInfo } = verification; if (verified) { console.log("Authentication verified for user:", dbAuthenticator.userId); // Update the authenticator counter in the DB await prisma.authenticator.update({ where: { id: dbAuthenticator.id }, data: { counter: authenticationInfo.newCounter }, }); // Update device last login time if (device) { await prisma.device.update({ where: { id: device.id }, data: { lastLoginAt: new Date(), ipAddress: ipAddress, userAgent: userAgent } // Update details }); } else { // Optionally create a new device record if login is allowed from unrecognized devices // For now, we assume a device record should exist if approval is required. } // --- Log successful login --- await prisma.log.create({ data: { userId: dbAuthenticator.userId, action: 'login_passkey_success', ipAddress: ipAddress, userAgent: userAgent, details: { credentialID: credentialIDBase64URL } } }); // --- Establish Session --- // IMPORTANT: Manually establishing a session with NextAuth requires careful handling. // The standard `signIn` is client-side. Server-side, you might: // 1. Use a custom endpoint that NextAuth calls internally (complex). // 2. Manually create JWT/database session tokens matching NextAuth's format. // 3. Redirect the user to a specific NextAuth callback URL with necessary info. // Placeholder: Return user info. The client needs to handle session creation, // possibly by calling the standard NextAuth signin flow with a custom provider // or by managing the session token received here (less standard with NextAuth). // A common pattern is to redirect to `/api/auth/callback/credentials` (or a custom one) // after successful passkey verification, passing necessary user info. // For now, just return success and user details. Client needs more logic. const user = dbAuthenticator.user; return res.status(200).json({ verified: true, user: { // Send necessary user info back id: user.id, email: user.email, name: user.name, roleId: user.roleId // Include role for client-side use if needed } }); } else { console.error("Authentication verification failed:", verification); return res.status(400).json({ verified: false, message: 'Authentication verification failed.' }); } } catch (error: any) { console.error('Error verifying authentication:', error); // Log failed attempt if (dbAuthenticator) { await prisma.log.create({ data: { userId: dbAuthenticator.userId, action: 'login_passkey_failed', ipAddress: req.headers['x-forwarded-for'] as string || req.socket.remoteAddress, userAgent: req.headers['user-agent'] ?? 'Unknown', details: { error: error.message } } }).catch(logErr => console.error("Failed to write failure log:", logErr)); // Avoid crashing if logging fails } return res.status(500).json({ verified: false, message: error.message }); } } {/* Placeholder API for Admin Actions */} import type { NextApiRequest, NextApiResponse } from 'next'; import { prisma } from '@/lib/prisma'; import { getServerSession } from "next-auth/next"; import { authOptions } from '../auth/[...nextauth]'; export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== 'POST') { return res.status(405).json({ message: 'Method Not Allowed' }); } const session = await getServerSession(req, res, authOptions); // Check if user is authenticated and is an admin if (!session?.user?.id || session.user.role !== 'admin') { return res.status(403).json({ message: 'Forbidden: Admin access required.' }); } const { deviceId, approve } = req.body; // Expect deviceId and approve (boolean) if (!deviceId || typeof approve !== 'boolean') { return res.status(400).json({ message: 'Missing deviceId or approval status.' }); } try { const device = await prisma.device.findUnique({ where: { id: deviceId }, }); if (!device) { return res.status(404).json({ message: 'Device not found.' }); } const updatedDevice = await prisma.device.update({ where: { id: deviceId }, data: { isApproved: approve }, }); // Log the admin action await prisma.log.create({ data: { userId: session.user.id, // Admin user ID action: approve ? 'admin_approve_device' : 'admin_reject_device', details: { targetDeviceId: deviceId, targetUserId: device.userId } } }); return res.status(200).json({ message: `Device ${approve ? 'approved' : 'rejected'} successfully.`, device: updatedDevice }); } catch (error) { console.error('Error updating device approval:', error); return res.status(500).json({ message: 'Failed to update device approval status.' }); } } import NextAuth, { DefaultSession, DefaultUser } from "next-auth"; import { JWT, DefaultJWT } from "next-auth/jwt"; // Extend the built-in session/user/token types to include id and role 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?: string | null; // Add role here roleId?: string | null; // Add roleId here } & DefaultSession["user"]; // Keep existing properties like name, email, image } /** The OAuth profile returned from your provider */ interface User extends DefaultUser { roleId?: string | null; // Add roleId to the User model type } } declare module "next-auth/jwt" { /** Returned by the `jwt` callback and `getToken`, when using JWT sessions */ interface JWT extends DefaultJWT { /** User ID */ id: string; /** User Role */ role?: string | null; // Add role here roleId?: string | null; // Add roleId here } } **To Run This Setup:** 1. **Create `.env` file:** Copy `.env.example` to `.env` and fill in your MongoDB connection string (`DATABASE_URL`) and generate a `NEXTAUTH_SECRET`. Adjust `RP_ID`, `RP_NAME`, and `RP_ORIGIN` if not running on `localhost:3000`. 2. **Install Dependencies:** bash npm install # or yarn install 3. **Apply Prisma Migrations (Initial Sync):** Since MongoDB doesn't use traditional migrations like SQL, `prisma db push` syncs your schema with the database. ```bash npx prisma db push ``` * You might be prompted to reset the database if it already exists with incompatible schema changes. Be careful in production! 4. **Seed Initial Data (Optional but Recommended):** Create a `prisma/seed.ts` file to create default roles (e.g., 'admin', 'user') and potentially an initial admin user. ```typescript // prisma/seed.ts import { PrismaClient } from '@prisma/client'; // import bcrypt from 'bcryptjs'; // If using password hashing const prisma = new PrismaClient(); async function main() { console.log(`Start seeding ...`); // Create Roles const adminRole = await prisma.role.upsert({ where: { name: 'admin' }, update: {}, create: { name: 'admin' }, }); const userRole = await prisma.role.upsert({ where: { name: 'user' }, update: {}, create: { name: 'user' }, }); console.log(`Created roles: admin (${adminRole.id}), user (${userRole.id})`); // Create a default Admin User (replace with secure password handling) const adminEmail = 'admin@example.com'; // const hashedPassword = await bcrypt.hash('password123', 10); // Hash password const adminUser = await prisma.user.upsert({ where: { email: adminEmail }, update: {}, // Don't update if exists for seeding create: { email: adminEmail, name: 'Admin User', password: 'password123', // STORE HASHED PASSWORD IN REAL APP roleId: adminRole.id, // Assign admin role }, }); console.log(`Created admin user: ${adminUser.email} (ID: ${adminUser.id})`); console.log(`Seeding finished.`); } main() .catch((e) => { console.error(e); process.exit(1); }) .finally(async () => { await prisma.$disconnect(); }); ``` Add a script to `package.json`: `"prisma:seed": "ts-node --compiler-options {\\\"module\\\":\\\"CommonJS\\\"} prisma/seed.ts"` (you might need `ts-node`). Then run `npm run prisma:seed` or `yarn prisma:seed`. 5. **Run the Development Server:** ```bash npm run dev # or yarn dev ``` Now you can access `http://localhost:3000`. You can sign in using the Credentials provider (e.g., `admin@example.com` / `password123` if seeded). The dashboard and admin pages are protected by middleware based on roles. The API routes and database models for passkeys, devices, roles, and logs are in place, but the frontend logic and detailed backend verification/workflows need further implementation.