Okay, this involves several advanced concepts including Passkeys (WebAuthn), role-based access control (RBAC), device management with admin approval, and transaction 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 Prisma schema, Auth.js configuration, middleware, and placeholder API routes/pages. You will need to implement the detailed logic for Passkey interactions (using libraries like `@simplewebauthn/server` and `@simplewebauthn/browser`), the admin approval UI/API, and the specific RBAC checks within your application pages/APIs. { "name": "nextjs-authjs-passkey", "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.1.0", "@prisma/client": "^5.14.0", "@simplewebauthn/browser": "^10.0.0", "@simplewebauthn/server": "^10.0.0", "mongodb": "^6.6.2", "next": "14.2.3", "next-auth": "^5.0.0-beta.18", "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.14.0", "tailwindcss": "^3.4.1", "typescript": "^5" } } generator client { provider = "prisma-client-js" } datasource db { provider = "mongodb" url = env("DATABASE_URL") } enum UserRole { USER ADMIN } model User { id String @id @default(auto()) @map("_id") @db.ObjectId name String? email String? @unique emailVerified DateTime? image String? role UserRole @default(USER) maxDevices Int @default(5) // Max allowed registered devices createdAt DateTime @default(now()) updatedAt DateTime @updatedAt accounts Account[] sessions Session[] authenticators Authenticator[] transactionLogs TransactionLog[] } 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? createdAt DateTime @default(now()) updatedAt DateTime @updatedAt user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([provider, providerAccountId]) @@index([userId]) } model Session { id String @id @default(auto()) @map("_id") @db.ObjectId sessionToken String @unique userId String @db.ObjectId expires DateTime createdAt DateTime @default(now()) updatedAt DateTime @updatedAt user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@index([userId]) } model VerificationToken { id String @id @default(auto()) @map("_id") @db.ObjectId identifier String token String @unique expires DateTime @@unique([identifier, token]) } // Model for storing Passkey (WebAuthn) authenticators model Authenticator { id String @id @default(auto()) @map("_id") @db.ObjectId credentialID String @unique // The unique ID of the credential credentialPublicKey Bytes // The public key associated with the credential counter BigInt // Signature counter, crucial for security credentialDeviceType String // e.g., 'singleDevice' or 'multiDevice' credentialBackedUp Boolean // Whether the credential is backed up by the OS/provider transports String[] // How the authenticator can be reached (e.g., 'usb', 'nfc', 'ble', 'internal') deviceName String? // User-provided name for the device/authenticator approved Boolean @default(false) // Whether an admin has approved this device userId String @db.ObjectId createdAt DateTime @default(now()) updatedAt DateTime @updatedAt user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@index([userId]) } // Model for logging user actions model TransactionLog { id String @id @default(auto()) @map("_id") @db.ObjectId action String // e.g., 'LOGIN', 'REGISTER_DEVICE', 'APPROVE_DEVICE', 'UPDATE_PROFILE', 'DELETE_ITEM' details Json? // Optional details about the action (e.g., item ID, changed fields) timestamp DateTime @default(now()) userId String @db.ObjectId user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@index([userId]) @@index([timestamp]) } # Prisma DATABASE_URL="mongodb+srv://:@/?retryWrites=true&w=majority" # NextAuth.js # Generate a secret: openssl rand -base64 32 AUTH_SECRET="YOUR_AUTH_SECRET" AUTH_URL="http://localhost:3000" # Your app's base URL # Passkey/WebAuthn Configuration RP_NAME="Your App Name" # Relying Party Name (Displayed to user during registration/auth) RP_ID="localhost" # Relying Party ID (Must match the domain name) RP_ORIGIN="http://localhost:3000" # Relying Party Origin (Must match the URL) # Add other environment variables as needed 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 in console }) 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" // Example: Keep if you need initial login import prisma from "./prisma" import { UserRole } from "@prisma/client" import { getUserAuthenticators, verifyAuthentication } from "./passkey-server"; // Placeholder functions import { logTransaction } from "./transactions"; // Placeholder function export const { handlers, signIn, signOut, auth } = NextAuth({ adapter: PrismaAdapter(prisma), session: { strategy: "jwt" }, // Use JWT for session strategy to store role providers: [ // --- Passkey Pseudo-Provider (handled via custom sign-in logic) --- // We don't define a specific Passkey provider here. Instead, we'll // use the Credentials provider as a trigger or handle it entirely // through custom API endpoints and the `signIn` callback. // --- Example: Credentials Provider (Optional: for initial setup/fallback) --- // Credentials({ // name: "Credentials", // credentials: { // email: { label: "Email", type: "email" }, // password: { label: "Password", type: "password" } // }, // async authorize(credentials) { // // Add logic to verify email/password for initial login // // This is NOT for passkey login. // console.log("Credentials authorize:", credentials); // // Return user object or null // return null; // } // }), ], pages: { signIn: '/login', // Custom login page // error: '/auth/error', // Optional: Custom error page // verifyRequest: '/auth/verify-request', // Optional: For email/magic link // newUser: '/auth/new-user' // Optional: Redirect new users }, callbacks: { async signIn({ user, account, profile, email, credentials }) { // This callback runs on every sign-in attempt (including passkey verification) // --- Passkey Sign-In Logic --- // If the sign-in attempt is identified as a passkey attempt (e.g., via // a specific credential type or a flag passed during the custom sign-in flow), // perform the necessary checks here. const isPasskeyAttempt = credentials?.credentialType === 'passkey'; // Example flag if (isPasskeyAttempt && user?.id) { const userId = user.id; const verificationResult = credentials.verificationResult as any; // Result from verifyAuthentication if (!verificationResult?.verified) { console.error("Passkey verification failed in signIn callback"); return false; // Prevent sign-in } // 1. Check if the authenticator used is approved const authenticator = await prisma.authenticator.findUnique({ where: { credentialID: verificationResult.credentialID } }); if (!authenticator) { console.error("Authenticator not found:", verificationResult.credentialID); return false; } if (!authenticator.approved) { console.warn("Attempted login with unapproved device:", authenticator.id); // You might want to redirect to a specific page informing the user // throw new Error("Device not approved"); // Or return a specific URL string return '/login?error=DeviceNotApproved'; } // 2. Update authenticator counter (CRITICAL for security) await prisma.authenticator.update({ where: { credentialID: verificationResult.credentialID }, data: { counter: verificationResult.newCounter }, }); // 3. Log successful login transaction await logTransaction(userId, 'PASSKEY_LOGIN', { authenticatorId: authenticator.id }); console.log("Passkey sign-in successful for user:", userId); return true; // Allow sign-in } // --- Other Provider Sign-In Logic --- // Handle sign-ins from other providers (Credentials, Google, etc.) if configured if (account?.provider === 'credentials' && user) { // Add checks specific to credentials login if needed await logTransaction(user.id!, 'CREDENTIALS_LOGIN'); return true; } // Default: Allow sign-in for other providers or scenarios if user exists // Add more checks if necessary (e.g., email verification) return !!user; }, async jwt({ token, user, account, profile, trigger, session }) { // This callback is called whenever a JWT is created or updated. // `user` object is only available on initial sign-in. if (user) { token.userId = user.id; // Fetch the role directly from DB on initial sign-in const dbUser = await prisma.user.findUnique({ where: { id: user.id } }); token.role = dbUser?.role || UserRole.USER; // Add role to the token } // Example: Update role if it changes via an update action if (trigger === "update" && session?.role) { token.role = session.role; } return token; // The token will be encrypted and stored in a cookie }, async session({ session, token, user }) { // This callback is called whenever a session is checked. // We transfer information from the JWT token to the session object. if (token && session.user) { session.user.id = token.userId as string; session.user.role = token.role as UserRole; // Add role to session } return session; // The session object is returned to the client }, }, // Enable debug messages in development debug: process.env.NODE_ENV === 'development', }) // Placeholder for server-side Passkey (WebAuthn) logic using @simplewebauthn/server // You need to implement these functions fully. import { generateRegistrationOptions, verifyRegistrationResponse, generateAuthenticationOptions, verifyAuthenticationResponse, VerifiedRegistrationResponse, VerifiedAuthenticationResponse, } from '@simplewebauthn/server'; import { Authenticator, User } from '@prisma/client'; import prisma from './prisma'; import { isoBase64URL, isoUint8Array } from '@simplewebauthn/server/helpers'; const rpName = process.env.RP_NAME!; const rpID = process.env.RP_ID!; const origin = process.env.RP_ORIGIN!; if (!rpName || !rpID || !origin) { throw new Error("Missing Passkey environment variables (RP_NAME, RP_ID, RP_ORIGIN)"); } /** * Generates registration options for a user. */ export async function getRegistrationOptions(user: User, existingAuthenticators: Authenticator[]) { const options = await generateRegistrationOptions({ rpName, rpID, userID: user.id, userName: user.email!, // Use email or name // Don't prompt users for additional authenticators if they've already registered some excludeCredentials: existingAuthenticators.map(auth => ({ id: isoBase64URL.toBuffer(auth.credentialID), // Needs conversion if stored as base64url string type: 'public-key', transports: auth.transports as any, // Cast if necessary })), authenticatorSelection: { // Optional: Configure authenticator preferences // residentKey: 'preferred', // Discoverable credentials userVerification: 'preferred', // Require user verification (PIN, biometric) }, // attestation: 'direct', // Optional: Request attestation }); // Store the challenge temporarily (e.g., in session, cache, or DB) associated with the user // This is crucial for the verification step. // Example: await storeChallengeForUser(user.id, options.challenge); return options; } /** * Verifies the registration response from the client. */ export async function verifyRegistration( userId: string, responseBody: any, // Type this according to @simplewebauthn/browser response expectedChallenge: string // Retrieve the stored challenge for the user ): Promise<{ verified: boolean; registrationInfo?: VerifiedRegistrationResponse['registrationInfo'], error?: string }> { try { const verification = await verifyRegistrationResponse({ response: responseBody, expectedChallenge: expectedChallenge, expectedOrigin: origin, expectedRPID: rpID, requireUserVerification: true, // Match generateRegistrationOptions }); if (verification.verified && verification.registrationInfo) { const { registrationInfo } = verification; const { credentialPublicKey, credentialID, counter, credentialDeviceType, credentialBackedUp, } = registrationInfo; // 1. Check device limit const user = await prisma.user.findUnique({ where: { id: userId }, include: { _count: { select: { authenticators: true } } } }); if (!user) throw new Error("User not found during registration verification"); if (user._count.authenticators >= user.maxDevices) { return { verified: false, error: "Maximum number of devices reached." }; } // 2. Store the new authenticator in the database // Convert credentialID and publicKey to storable formats (e.g., base64url string for ID, Buffer for key) const newAuthenticator = await prisma.authenticator.create({ data: { userId: userId, credentialID: isoBase64URL.fromBuffer(credentialID), // Store as base64url string credentialPublicKey: Buffer.from(credentialPublicKey), // Store as Buffer/Bytes counter: BigInt(counter), // Store as BigInt credentialDeviceType: credentialDeviceType, credentialBackedUp: credentialBackedUp, transports: responseBody.response.transports || [], // Get transports from original response // approved: false, // Default is false, requires admin approval deviceName: responseBody.deviceName || null, // Optional: Get device name from client }, }); console.log("New authenticator created (pending approval):", newAuthenticator.id); // 3. Log transaction (optional here, maybe log after approval) // await logTransaction(userId, 'REGISTER_DEVICE_INITIATED', { authenticatorId: newAuthenticator.id }); return { verified: true, registrationInfo }; } else { return { verified: false, error: "Registration verification failed." }; } } catch (error: any) { console.error("Error verifying registration:", error); return { verified: false, error: error.message }; } } /** * Retrieves user's authenticators from the database. */ export async function getUserAuthenticators(userId: string): Promise { return prisma.authenticator.findMany({ where: { userId } }); } /** * Retrieves a specific authenticator by credential ID. */ export async function getAuthenticatorById(credentialID: string): Promise { // Ensure credentialID is in the format stored in the DB (e.g., base64url string) return prisma.authenticator.findUnique({ where: { credentialID } }); } /** * Generates authentication options for a user. */ export async function getAuthenticationOptions(userId: string) { const userAuthenticators = await getUserAuthenticators(userId); const options = await generateAuthenticationOptions({ rpID, // Allow users to select any of their registered authenticators allowCredentials: userAuthenticators .filter(auth => auth.approved) // IMPORTANT: Only allow approved authenticators for login .map(auth => ({ id: isoBase64URL.toBuffer(auth.credentialID), // Convert stored ID back to buffer type: 'public-key', transports: auth.transports as any, })), userVerification: 'preferred', // Request user verification }); // Store the challenge temporarily, associated with the user // Example: await storeChallengeForUser(userId, options.challenge); return options; } /** * Verifies the authentication response from the client. */ export async function verifyAuthentication( userId: string, responseBody: any, // Type this according to @simplewebauthn/browser response expectedChallenge: string // Retrieve the stored challenge ): Promise<{ verified: boolean; newCounter?: bigint; credentialID?: string; error?: string }> { try { const credentialID_b64url = responseBody.id; // The ID is base64url encoded from the browser const authenticator = await getAuthenticatorById(credentialID_b64url); if (!authenticator) { throw new Error(`Authenticator not found for credential ID: ${credentialID_b64url}`); } // IMPORTANT: Check if the authenticator is approved before verifying if (!authenticator.approved) { return { verified: false, error: "Device not approved." }; } const verification = await verifyAuthenticationResponse({ response: responseBody, expectedChallenge: expectedChallenge, expectedOrigin: origin, expectedRPID: rpID, authenticator: { credentialID: isoBase64URL.toBuffer(authenticator.credentialID), // Convert stored ID to buffer credentialPublicKey: authenticator.credentialPublicKey, // Retrieve stored public key (Buffer) counter: Number(authenticator.counter), // Convert BigInt to number for verification transports: authenticator.transports as any, }, requireUserVerification: true, // Match generateAuthenticationOptions }); if (verification.verified) { const { authenticationInfo } = verification; const { newCounter } = authenticationInfo; // Counter update is handled in the Auth.js signIn callback after successful verification return { verified: true, newCounter: BigInt(newCounter), credentialID: authenticator.credentialID }; } else { return { verified: false, error: "Authentication verification failed." }; } } catch (error: any) { console.error("Error verifying authentication:", error); return { verified: false, error: error.message }; } } import prisma from './prisma'; import { Prisma } from '@prisma/client'; /** * Logs a user transaction to the database. * @param userId - The ID of the user performing the action. * @param action - A string identifier for the action (e.g., 'LOGIN', 'UPDATE_PROFILE'). * @param details - Optional JSON object containing details about the action. */ export async function logTransaction( userId: string, action: string, details?: Prisma.InputJsonValue | null ): Promise { try { await prisma.transactionLog.create({ data: { userId, action, details, }, }); console.log(`Transaction logged: User ${userId}, Action: ${action}`); } catch (error) { console.error("Failed to log transaction:", error); // Decide how to handle logging errors (e.g., retry, log to file) } } import { NextResponse } from 'next/server' import { auth } from "@/lib/auth" // Adjusted import path import { UserRole } from '@prisma/client'; // Define protected routes and required roles const protectedRoutes: { [key: string]: UserRole[] | null } = { '/dashboard': null, // Any authenticated user '/admin': [UserRole.ADMIN], // Only ADMIN '/admin/users': [UserRole.ADMIN], '/admin/devices': [UserRole.ADMIN], '/settings': null, // Any authenticated user // Add more routes and their required roles }; export default auth((req) => { const { nextUrl } = req; const session = req.auth; // Access session data directly from auth middleware const pathname = nextUrl.pathname; // Find if the current route is protected const routeProtection = Object.entries(protectedRoutes).find(([routePrefix]) => pathname.startsWith(routePrefix) ); if (routeProtection) { const [routePrefix, requiredRoles] = routeProtection; // 1. Check if user is authenticated if (!session?.user?.id) { // Redirect unauthenticated users to login page const loginUrl = new URL('/login', nextUrl.origin); loginUrl.searchParams.set('callbackUrl', pathname); // Remember where they were going return NextResponse.redirect(loginUrl); } // 2. Check if the route requires specific roles if (requiredRoles && requiredRoles.length > 0) { const userRole = session.user?.role; if (!userRole || !requiredRoles.includes(userRole)) { // User does not have the required role, redirect or show forbidden page console.warn(`User ${session.user.id} (${userRole}) tried to access restricted route: ${pathname}`); // Option 1: Redirect to a generic 'access denied' page return NextResponse.redirect(new URL('/access-denied', nextUrl.origin)); // Option 2: Redirect to dashboard // return NextResponse.redirect(new URL('/dashboard', nextUrl.origin)); // Option 3: Return a 403 Forbidden response (less user-friendly for page loads) // return new NextResponse("Access Denied", { status: 403 }); } } // User is authenticated and has the required role (if any) return NextResponse.next(); } // Route is not protected, allow access return NextResponse.next(); }); // 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) * - login (login page) * - / (root page, if public) - adjust if root should be protected */ '/((?!api|_next/static|_next/image|favicon.ico|login|$).*)', // Add specific public pages if needed, e.g. '/public/.*' ], }; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import ClientSessionProvider from "./components/ClientSessionProvider"; // Wrapper for useSession import NavMenu from "./components/NavMenu"; // Simple navigation const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "NextAuth Passkey Demo", description: "Demo of Passkey auth with NextAuth.js", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {/* ClientSessionProvider is needed if using useSession hook in client components */}

{children}

); } @tailwind base; @tailwind components; @tailwind utilities; /* Add any global styles here */ body { @apply bg-gray-100 text-gray-900; } button, a.button { @apply inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed; } input[type="text"], input[type="email"], input[type="password"] { @apply border border-gray-300 rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500; } .error-message { @apply text-red-600 text-sm mt-1; } .success-message { @apply text-green-600 text-sm mt-1; } 'use client' // Required for SessionProvider import { SessionProvider } from "next-auth/react" import React from "react"; export default function ClientSessionProvider({ children, }: { children: React.ReactNode }) { // SessionProvider requires a client component wrapper return {children} } 'use client' import Link from 'next/link'; import { useSession, signOut } from 'next-auth/react'; import { UserRole } from '@prisma/client'; // Import enum if needed for checks export default function NavMenu() { const { data: session, status } = useSession(); const isLoading = status === 'loading'; return (

MyApp

Home
Loading...
Dashboard
Settings
Admin
({session.user.email || session.user.name})
Login
Register

); } import { auth } from "@/lib/auth"; // Server-side session access export default async function HomePage() { const session = await auth(); // Get session on the server return (

Welcome to the App

{session?.user ? (

You are signed in as {session.user.email || session.user.name}. Role: {session.user.role}

) : (

You are not signed in.

)}

This is the public home page.

); } // Basic login page structure - Needs Passkey integration // You'll need client-side JS to handle passkey button clicks, // call API routes, and use @simplewebauthn/browser. 'use client'; import { useState, useEffect } from 'react'; import { signIn } from 'next-auth/react'; import { useRouter, useSearchParams } from 'next/navigation'; import { startAuthentication } from '@simplewebauthn/browser'; export default function LoginPage() { const router = useRouter(); const searchParams = useSearchParams(); const callbackUrl = searchParams.get('callbackUrl') || '/dashboard'; const error = searchParams.get('error'); const [errorMessage, setErrorMessage] = useState(null); const [isLoading, setIsLoading] = useState(false); const [email, setEmail] = useState(''); // Needed to identify user for passkey options useEffect(() => { if (error) { switch (error) { case 'CredentialsSignin': setErrorMessage('Invalid credentials.'); break; case 'DeviceNotApproved': setErrorMessage('This device has not been approved by an administrator yet.'); break; case 'PasskeyError': setErrorMessage('An error occurred during Passkey authentication.'); break; default: setErrorMessage('An unknown login error occurred.'); } } }, [error]); const handlePasskeyLogin = async () => { setIsLoading(true); setErrorMessage(null); if (!email) { setErrorMessage("Please enter your email address to use Passkey."); setIsLoading(false); return; } try { // 1. Get Authentication Options from your API const optionsRes = await fetch('/api/auth/passkey/authenticate-options', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }), // Send email to identify user }); if (!optionsRes.ok) { const errorData = await optionsRes.json(); throw new Error(errorData.message || 'Failed to get authentication options.'); } const options = await optionsRes.json(); // Store challenge temporarily (e.g., in state or session storage) // This example assumes the challenge is returned directly for simplicity, // but storing it server-side and referencing it is more secure. const challenge = options.challenge; // 2. Use @simplewebauthn/browser to prompt user const authResult = await startAuthentication(options); // 3. Send Verification Response to your API const verifyRes = await fetch('/api/auth/passkey/authenticate-verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ verificationData: authResult, email, challenge }), // Send result, email, and challenge }); if (!verifyRes.ok) { const errorData = await verifyRes.json(); throw new Error(errorData.message || 'Passkey verification failed.'); } const verificationResult = await verifyRes.json(); // 4. Use NextAuth signIn with custom credentials to trigger the callback const signInResponse = await signIn('credentials', { // Use 'credentials' as a trigger redirect: false, // Handle redirect manually credentialType: 'passkey', // Custom flag to identify passkey login in callback userId: verificationResult.userId, // Pass necessary info verificationResult: verificationResult.authInfo, // Pass verification result callbackUrl: callbackUrl }); if (signInResponse?.error) { // Handle errors reported by NextAuth signIn callback (e.g., device not approved) router.push(`/login?error=${signInResponse.error}`); } else if (signInResponse?.ok) { router.push(callbackUrl); // Redirect on successful sign-in } else { setErrorMessage("An unknown error occurred during sign-in."); } } catch (err: any) { console.error("Passkey login error:", err); setErrorMessage(err.message || 'Passkey login failed.'); // Optionally redirect with error: router.push('/login?error=PasskeyError'); } finally { setIsLoading(false); } }; // Placeholder for traditional email/password login if needed const handleCredentialsLogin = async (event: React.FormEvent) => { event.preventDefault(); setIsLoading(true); setErrorMessage(null); // Implement standard credentials sign in if you have that provider // const result = await signIn('credentials', { // redirect: false, // email: email, // password: password, // Add password state if using // callbackUrl: callbackUrl // }); // ... handle result ... setErrorMessage("Credentials login not implemented in this example."); setIsLoading(false); } return (

Login

{errorMessage && (

{errorMessage}

)} {/* Email input is needed for Passkey to identify the user */}

Email Address setEmail(e.target.value)} required className="border border-gray-300 rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="you@example.com" disabled={isLoading} />

{/* Optional: Add separator and other login methods */} {/*

*/} {/* Example: Placeholder for Credentials Form */} {/* */}

); } import { auth } from "@/lib/auth"; import { redirect } from 'next/navigation'; export default async function DashboardPage() { const session = await auth(); // This should be handled by middleware, but double-check if (!session?.user) { redirect('/login?callbackUrl=/dashboard'); } return (

Dashboard

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

Your Role: {session?.user?.role}

This page is protected and requires authentication.

{/* Add dashboard content here */}

); } // Placeholder for user settings page - Needs Passkey registration UI 'use client'; // Required for user interaction import { useSession } from 'next-auth/react'; import { useState, useEffect } from 'react'; import { startRegistration } from '@simplewebauthn/browser'; interface Authenticator { id: string; deviceName: string | null; approved: boolean; createdAt: string; // Or Date } export default function SettingsPage() { const { data: session, status } = useSession({ required: true }); // Require auth const [authenticators, setAuthenticators] = useState([]); const [isLoading, setIsLoading] = useState(false); const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null); const [newDeviceName, setNewDeviceName] = useState(''); // Fetch user's authenticators useEffect(() => { const fetchAuthenticators = async () => { if (session?.user?.id) { setIsLoading(true); try { const res = await fetch('/api/user/authenticators'); // API route to create if (!res.ok) throw new Error('Failed to fetch authenticators'); const data = await res.json(); setAuthenticators(data.authenticators || []); } catch (error: any) { setMessage({ type: 'error', text: error.message }); } finally { setIsLoading(false); } } }; if (status === 'authenticated') { fetchAuthenticators(); } }, [session, status]); const handleRegisterDevice = async () => { setIsLoading(true); setMessage(null); try { // 1. Get Registration Options from API const optionsRes = await fetch('/api/auth/passkey/register-options', { method: 'POST' }); if (!optionsRes.ok) { const errorData = await optionsRes.json(); throw new Error(errorData.message || 'Failed to get registration options.'); } const options = await optionsRes.json(); // Store challenge (similar to login) const challenge = options.challenge; // 2. Use @simplewebauthn/browser const registrationResult = await startRegistration(options); // 3. Send Verification to API const verifyRes = await fetch('/api/auth/passkey/register-verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ verificationData: registrationResult, challenge: challenge, // Send challenge back for verification deviceName: newDeviceName || null // Send optional device name }), }); if (!verifyRes.ok) { const errorData = await verifyRes.json(); throw new Error(errorData.message || 'Failed to verify registration.'); } const result = await verifyRes.json(); setMessage({ type: 'success', text: 'Device registration initiated! It needs admin approval.' }); setNewDeviceName(''); // Re-fetch authenticators to show the new (unapproved) one const updatedRes = await fetch('/api/user/authenticators'); const updatedData = await updatedRes.json(); setAuthenticators(updatedData.authenticators || []); } catch (err: any) { console.error("Passkey registration error:", err); setMessage({ type: 'error', text: err.message || 'Device registration failed.' }); } finally { setIsLoading(false); } }; if (status === 'loading') { return

Loading session...

; } return (

Settings

Manage your account settings and registered devices.

{message && (

{message.text}

)}

Registered Devices (Passkeys)

{isLoading &&

Loading devices...

} {!isLoading && authenticators.length === 0 &&

No devices registered yet.

} {!isLoading && authenticators.length > 0 && (

{auth.deviceName || `Device registered on ${new Date(auth.createdAt).toLocaleDateString()}`} {auth.approved ? 'Approved' : 'Pending Approval'} {/* Add delete button if needed - requires API endpoint */}

)}

Register New Device/Passkey

Device Name (Optional) setNewDeviceName(e.target.value)} className="border border-gray-300 rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="e.g., My Laptop, Work Phone" disabled={isLoading} />

{/* Add other settings sections here (e.g., profile update) */}

); } import { auth } from "@/lib/auth"; import { redirect } from 'next/navigation'; import { UserRole } from '@prisma/client'; import Link from "next/link"; export default async function AdminPage() { const session = await auth(); // Middleware should handle this, but good practice to check if (!session?.user || session.user.role !== UserRole.ADMIN) { redirect('/access-denied'); // Or redirect to login } return (

Admin Dashboard

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

This area is restricted to users with the ADMIN role.

Manage Device Approvals Manage Users {/* Placeholder */} View Transaction Logs {/* Placeholder */} {/* Add links to other admin sections */}

); } // Placeholder page for Admin Device Approval // Needs client component to fetch devices and handle approval/rejection API calls 'use client'; import { useState, useEffect } from 'react'; import { useSession } from 'next-auth/react'; import { UserRole } from '@prisma/client'; import { useRouter } from 'next/navigation'; interface PendingAuthenticator { id: string; deviceName: string | null; createdAt: string; user: { id: string; email: string | null; name: string | null; }; } export default function AdminDevicesPage() { const { data: session, status } = useSession({ required: true }); const router = useRouter(); const [pendingDevices, setPendingDevices] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const [actionLoading, setActionLoading] = useState>({}); // Track loading state per device // Redirect if not admin (client-side check) useEffect(() => { if (status === 'authenticated' && session?.user?.role !== UserRole.ADMIN) { router.replace('/access-denied'); // Or dashboard/login } }, [session, status, router]); // Fetch pending devices useEffect(() => { const fetchPendingDevices = async () => { if (session?.user?.role === UserRole.ADMIN) { setIsLoading(true); setError(null); try { const res = await fetch('/api/admin/devices/pending'); // API route to create if (!res.ok) { throw new Error('Failed to fetch pending devices.'); } const data = await res.json(); setPendingDevices(data.devices || []); } catch (err: any) { setError(err.message); } finally { setIsLoading(false); } } }; if (status === 'authenticated') { fetchPendingDevices(); } }, [session, status]); const handleDeviceAction = async (authenticatorId: string, approve: boolean) => { setActionLoading(prev => ({ ...prev, [authenticatorId]: true })); setError(null); try { const res = await fetch(`/api/admin/devices/${authenticatorId}/approve`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ approve }), // Send true to approve, false to reject/delete }); if (!res.ok) { const errorData = await res.json(); throw new Error(errorData.message || `Failed to ${approve ? 'approve' : 'reject'} device.`); } // Remove the device from the list after successful action setPendingDevices(prev => prev.filter(device => device.id !== authenticatorId)); } catch (err: any) { setError(err.message); } finally { setActionLoading(prev => ({ ...prev, [authenticatorId]: false })); } }; if (status === 'loading' || isLoading) { return

; } // Ensure user is admin before rendering sensitive content if (session?.user?.role !== UserRole.ADMIN) { return

Access Denied.

; // Or redirect handled by useEffect } return (

Pending Device Approvals

{error &&

Error: {error}

} {pendingDevices.length === 0 ? (

No devices are currently pending approval.

) : (

{pendingDevices.map((device) => ( ))}

User	Device Name	Registered On	Actions
{device.user.email \|\| device.user.name \|\| device.user.id}	{device.deviceName \|\| 'N/A'}	{new Date(device.createdAt).toLocaleString()}

)}

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

Access Denied

You do not have permission to view this page.

Go to Dashboard

); } // API Route: Generate Passkey Registration Options import { NextResponse } from 'next/server'; import { auth } from '@/lib/auth'; import { getRegistrationOptions, getUserAuthenticators } from '@/lib/passkey-server'; import prisma from '@/lib/prisma'; // Store challenges temporarily (replace with a more robust solution like Redis or DB) const challengeStore: Record = {}; export async function POST(req: Request) { const session = await auth(); if (!session?.user?.id) { return NextResponse.json({ message: 'Unauthorized' }, { status: 401 }); } const userId = session.user.id; try { const user = await prisma.user.findUnique({ where: { id: userId } }); if (!user) { return NextResponse.json({ message: 'User not found' }, { status: 404 }); } // Check device limit before generating options const existingAuthenticators = await getUserAuthenticators(userId); if (existingAuthenticators.length >= user.maxDevices) { return NextResponse.json({ message: `Maximum device limit (${user.maxDevices}) reached.` }, { status: 400 }); } const options = await getRegistrationOptions(user, existingAuthenticators); // Store the challenge associated with the user ID challengeStore[userId] = options.challenge; // TODO: Add expiry to challenges console.log(`Generated registration options for user ${userId}, challenge: ${options.challenge}`); return NextResponse.json(options); } catch (error: any) { console.error("Error generating registration options:", error); return NextResponse.json({ message: error.message || 'Failed to generate registration options' }, { status: 500 }); } } // API Route: Verify Passkey Registration Response import { NextResponse } from 'next/server'; import { auth } from '@/lib/auth'; import { verifyRegistration } from '@/lib/passkey-server'; import { logTransaction } from '@/lib/transactions'; // Retrieve challenges from temporary store (replace with robust solution) const challengeStore: Record = {}; // Needs to be shared/persistent state export async function POST(req: Request) { const session = await auth(); if (!session?.user?.id) { return NextResponse.json({ message: 'Unauthorized' }, { status: 401 }); } const userId = session.user.id; try { const { verificationData, challenge: clientChallenge, deviceName } = await req.json(); // Retrieve the expected challenge stored during options generation const expectedChallenge = challengeStore[userId]; // Fetch stored challenge if (!expectedChallenge) { return NextResponse.json({ message: 'Challenge not found or expired.' }, { status: 400 }); } // Optional: Compare clientChallenge with expectedChallenge if sent back // if (clientChallenge !== expectedChallenge) { // return NextResponse.json({ message: 'Challenge mismatch.' }, { status: 400 }); // } // Add deviceName to the verificationData if provided if (deviceName) { verificationData.deviceName = deviceName; } const { verified, registrationInfo, error } = await verifyRegistration( userId, verificationData, expectedChallenge // Use the server-stored challenge ); // Clear the used challenge delete challengeStore[userId]; if (verified && registrationInfo) { // Log successful initiation (pending approval) // Note: The actual authenticator record is created within verifyRegistration const authenticator = await prisma.authenticator.findFirst({ where: { credentialID: Buffer.from(registrationInfo.credentialID).toString('base64url') } // Find by ID }); if (authenticator) { await logTransaction(userId, 'REGISTER_DEVICE_INITIATED', { authenticatorId: authenticator.id, deviceName: authenticator.deviceName }); } return NextResponse.json({ success: true, message: 'Registration successful, pending approval.' }); } else { return NextResponse.json({ message: error || 'Verification failed.' }, { status: 400 }); } } catch (error: any) { console.error("Error verifying registration:", error); // Clear challenge on error? Maybe not if it was a transient issue. // delete challengeStore[userId]; return NextResponse.json({ message: error.message || 'Failed to verify registration' }, { status: 500 }); } } // API Route: Generate Passkey Authentication Options import { NextResponse } from 'next/server'; import { getAuthenticationOptions } from '@/lib/passkey-server'; import prisma from '@/lib/prisma'; // Store challenges temporarily (replace with a more robust solution like Redis or DB) const challengeStore: Record = {}; export async function POST(req: Request) { try { const { email } = await req.json(); // Get email from request body if (!email) { return NextResponse.json({ message: 'Email is required' }, { status: 400 }); } // Find user by email to get their ID const user = await prisma.user.findUnique({ where: { email } }); if (!user) { // Don't reveal if user exists or not for security reasons during login // Generate dummy options or return a generic error // For simplicity here, we return 404, but consider security implications return NextResponse.json({ message: 'User not found' }, { status: 404 }); } const userId = user.id; const options = await getAuthenticationOptions(userId); // Store the challenge associated with the user ID challengeStore[userId] = options.challenge; // TODO: Add expiry to challenges console.log(`Generated authentication options for user ${userId} (email: ${email}), challenge: ${options.challenge}`); // Return only necessary options to the client return NextResponse.json({ challenge: options.challenge, rpId: options.rpId, allowCredentials: options.allowCredentials, userVerification: options.userVerification, timeout: options.timeout }); } catch (error: any) { console.error("Error generating authentication options:", error); return NextResponse.json({ message: error.message || 'Failed to generate authentication options' }, { status: 500 }); } } // API Route: Verify Passkey Authentication Response import { NextResponse } from 'next/server'; import { verifyAuthentication } from '@/lib/passkey-server'; import prisma from '@/lib/prisma'; // Retrieve challenges from temporary store (replace with robust solution) const challengeStore: Record = {}; // Needs to be shared/persistent state export async function POST(req: Request) { try { const { verificationData, email, challenge: clientChallenge } = await req.json(); if (!email) { return NextResponse.json({ message: 'Email is required' }, { status: 400 }); } if (!verificationData) { return NextResponse.json({ message: 'Verification data is required' }, { status: 400 }); } // Find user by email const user = await prisma.user.findUnique({ where: { email } }); if (!user) { // Security: Generic error, don't reveal user existence return NextResponse.json({ message: 'Authentication failed.' }, { status: 400 }); } const userId = user.id; // Retrieve the expected challenge stored during options generation const expectedChallenge = challengeStore[userId]; // Fetch stored challenge if (!expectedChallenge) { return NextResponse.json({ message: 'Challenge not found or expired.' }, { status: 400 }); } // Optional: Compare clientChallenge with expectedChallenge // if (clientChallenge !== expectedChallenge) { // return NextResponse.json({ message: 'Challenge mismatch.' }, { status: 400 }); // } const { verified, newCounter, credentialID, error } = await verifyAuthentication( userId, verificationData, expectedChallenge // Use the server-stored challenge ); // Clear the used challenge delete challengeStore[userId]; if (verified && newCounter !== undefined && credentialID) { // Verification successful! // The actual sign-in and counter update happens in the NextAuth `signIn` callback. // We return necessary info to the client to trigger `signIn`. console.log(`Authentication verification successful for user ${userId}`); return NextResponse.json({ success: true, userId: userId, authInfo: { // Pass info needed by signIn callback verified: true, newCounter: newCounter.toString(), // Convert BigInt to string for JSON credentialID: credentialID } }); } else { console.error(`Authentication verification failed for user ${userId}: ${error}`); return NextResponse.json({ message: error || 'Authentication failed.' }, { status: 400 }); } } catch (error: any) { console.error("Error verifying authentication:", error); // Clear challenge on error? // delete challengeStore[userId]; // Consider if challenge should be reusable on transient errors return NextResponse.json({ message: error.message || 'Failed to verify authentication' }, { status: 500 }); } } // API Route: Get user's registered authenticators import { NextResponse } from 'next/server'; import { auth } from '@/lib/auth'; import prisma from '@/lib/prisma'; export async function GET(req: Request) { const session = await auth(); if (!session?.user?.id) { return NextResponse.json({ message: 'Unauthorized' }, { status: 401 }); } const userId = session.user.id; try { const authenticators = await prisma.authenticator.findMany({ where: { userId: userId }, select: { // Select only necessary fields to send to client id: true, deviceName: true, approved: true, createdAt: true, }, orderBy: { createdAt: 'desc', }, }); return NextResponse.json({ authenticators }); } catch (error: any) { console.error("Error fetching user authenticators:", error); return NextResponse.json({ message: 'Failed to fetch authenticators' }, { status: 500 }); } } // API Route: Get devices pending approval (Admin only) import { NextResponse } from 'next/server'; import { auth } from '@/lib/auth'; import prisma from '@/lib/prisma'; import { UserRole } from '@prisma/client'; export async function GET(req: Request) { const session = await auth(); // Authorization check if (!session?.user?.id || session.user.role !== UserRole.ADMIN) { return NextResponse.json({ message: 'Forbidden' }, { status: 403 }); } try { const pendingDevices = await prisma.authenticator.findMany({ where: { approved: false }, // Find devices that are not approved select: { id: true, deviceName: true, createdAt: true, user: { // Include basic user info select: { id: true, email: true, name: true, } } }, orderBy: { createdAt: 'asc', // Show oldest first }, }); return NextResponse.json({ devices: pendingDevices }); } catch (error: any) { console.error("Error fetching pending devices:", error); return NextResponse.json({ message: 'Failed to fetch pending devices' }, { status: 500 }); } } // API Route: Approve or Reject a device (Admin only) import { NextResponse } from 'next/server'; import { auth } from '@/lib/auth'; import prisma from '@/lib/prisma'; import { UserRole } from '@prisma/client'; import { logTransaction } from '@/lib/transactions'; interface ApproveParams { params: { authenticatorId: string }; } export async function POST(req: Request, { params }: ApproveParams) { const session = await auth(); const adminUserId = session?.user?.id; // Authorization check if (!adminUserId || session.user.role !== UserRole.ADMIN) { return NextResponse.json({ message: 'Forbidden' }, { status: 403 }); } const { authenticatorId } = params; if (!authenticatorId) { return NextResponse.json({ message: 'Authenticator ID is required' }, { status: 400 }); } try { const { approve } = await req.json(); // Expecting { approve: boolean } in body if (typeof approve !== 'boolean') { return NextResponse.json({ message: 'Invalid request body, expected { approve: boolean }' }, { status: 400 }); } const device = await prisma.authenticator.findUnique({ where: { id: authenticatorId }, select: { id: true, approved: true, userId: true, deviceName: true } // Select needed fields }); if (!device) { return NextResponse.json({ message: 'Device not found' }, { status: 404 }); } if (approve) { // Approve the device if (device.approved) { return NextResponse.json({ message: 'Device already approved' }, { status: 400 }); } await prisma.authenticator.update({ where: { id: authenticatorId }, data: { approved: true }, }); // Log approval await logTransaction(adminUserId, 'ADMIN_APPROVE_DEVICE', { targetUserId: device.userId, authenticatorId: device.id, deviceName: device.deviceName }); return NextResponse.json({ success: true, message: 'Device approved successfully.' }); } else { // Reject (delete) the device await prisma.authenticator.delete({ where: { id: authenticatorId }, }); // Log rejection await logTransaction(adminUserId, 'ADMIN_REJECT_DEVICE', { targetUserId: device.userId, authenticatorId: device.id, deviceName: device.deviceName }); return NextResponse.json({ success: true, message: 'Device rejected and removed successfully.' }); } } catch (error: any) { console.error(`Error processing device action for ${authenticatorId}:`, error); // Log failure await logTransaction(adminUserId, 'ADMIN_DEVICE_ACTION_FAILED', { authenticatorId: authenticatorId, error: error.message }); return NextResponse.json({ message: 'Failed to process device action' }, { status: 500 }); } } // Extend the default NextAuth types for Session and JWT import { UserRole } from "@prisma/client"; import NextAuth, { DefaultSession, DefaultUser } from "next-auth"; import { JWT as DefaultJWT } from "next-auth/jwt"; 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: UserRole; } & DefaultSession["user"]; // Keep default fields like name, email, image } /** Extends the default User model */ interface User extends DefaultUser { role: UserRole; } } declare module "next-auth/jwt" { /** Returned by the `jwt` callback and `getToken`, when using JWT sessions */ interface JWT extends DefaultJWT { /** User ID */ userId?: string; /** User Role */ role?: UserRole; // Add other custom fields you might add to the token } } 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}", ], theme: { extend: { // Add custom theme extensions if needed }, }, plugins: [], }; export default config; { "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": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "lib/auth.ts", "middleware.ts"], "exclude": ["node_modules"] } # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # Dependencies /node_modules /.pnp .pnp.js # Testing /coverage # Next.js build output /.next/ /out/ # Prisma # Ignore generated client unless you need to commit it # /node_modules/@prisma/client # Ignore migration state in development (if using migrations) # /prisma/migrations # Production environment variables .env*.local # Optional: Editor directories and files .vscode* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json *.sublime-workspace *.sublime-project .idea *.iml # System files .DS_Store Thumbs.db **Before Running:** 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` (e.g., using `openssl rand -base64 32`). Set `RP_NAME`, `RP_ID`, and `RP_ORIGIN` according to your application's name and domain (use `localhost` and `http://localhost:3000` for local development). 2. **Install Dependencies:** Run `npm install` or `yarn install`. 3. **Database Setup:** Run `npx prisma db push` to sync your Prisma schema with your MongoDB database. This will create the necessary collections based on your models. 4. **Run the Development Server:** Run `npm run dev` or `yarn dev`. **Explanation and Next Steps:** 1. **Core Setup:** This structure sets up Next.js, Prisma with MongoDB, Auth.js, basic routing, middleware for authentication checks, and UI components. 2. **Passkey Placeholders:** The crucial Passkey logic in `lib/passkey-server.ts`, the API routes (`/api/auth/passkey/...`), and the client-side interactions in `app/login/page.tsx` and `app/settings/page.tsx` are placeholders using `@simplewebauthn`. You need to: * Implement robust **challenge storage** (e.g., using Redis, a database table, or potentially short-lived session data) instead of the simple in-memory `challengeStore`. Challenges must be securely stored, associated with the user session/ID, used once, and have an expiration time. * Thoroughly test the conversion between buffer formats (`Uint8Array`) used by WebAuthn and storable formats (like `Buffer` in Prisma/Node and base64url strings). The `@simplewebauthn/server/helpers` can assist with this. * Handle various edge cases and errors during the WebAuthn flows. 3. **Admin Approval:** The `/admin/devices` page fetches pending devices and provides buttons. The corresponding API route (`/api/admin/devices/[authenticatorId]/approve`) handles the approval (updating `approved: true`) or rejection (deleting the authenticator). You need to build out the rest of the Admin UI (user management, log viewing). 4. **RBAC:** * Middleware (`middleware.ts`) protects routes based on authentication status and role (`/admin/**` requires `ADMIN`). * The session object (`useSession` hook or `auth()` server-side) contains the user's role (`session.user.role`). Use this in your pages and components to conditionally render UI elements or restrict actions. * **Crucially:** Implement permission checks within your API routes that handle data modification (CRUD operations). Before creating, updating, or deleting data, verify the `session.user.role` and potentially more granular permissions if needed. 5. **Transaction Logging:** The `logTransaction` utility is provided. Call this function from relevant API routes or server actions (e.g., after successful login, device approval/rejection, profile update, data changes) to record user activity. You'll need an interface (likely in the admin section) to view these logs. 6. **Device Limit:** The `maxDevices` field is on the `User` model. The `verifyRegistration` function includes a basic check against this limit. You might want an admin interface to adjust this limit per user. 7. **Error Handling & UX:** Improve error handling and user feedback throughout the Passkey registration/authentication flows and admin actions. This is a complex application, so proceed step-by-step, focusing on one feature at a time (e.g., get basic Passkey registration working, then login, then admin approval). Remember to prioritize security, especially around challenge handling and authenticator counter updates.