Okay, this involves several advanced concepts including passkeys (WebAuthn), role-based access control (RBAC), device management with admin approval, and transaction logging, integrated into a Next.js application using Auth.js, Prisma, and MongoDB. This is a complex setup. I'll provide the foundational structure, including Prisma schema, Auth.js configuration, basic API routes for passkey handling (using `@simplewebauthn`), and placeholders for the core logic. Implementing the full functionality, especially the UI interactions for passkey registration/login and the admin approval workflow, will require significant additional development. { "name": "nextjs-authjs-passkey-prisma-mongo", "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" } } { "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/*"], "@/lib/*": ["./lib/*"], "@/components/*": ["./components/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } # Prisma DATABASE_URL="mongodb+srv://:@/?retryWrites=true&w=majority" # NextAuth.js # You can generate one using 'openssl rand -base64 32' AUTH_SECRET="your_strong_secret_here" AUTH_URL="http://localhost:3000" # Your deployment URL # WebAuthn / Passkey Relying Party configuration # The RP ID should be the domain name of your web app RP_ID="localhost" # Change to your domain in production # A human-readable name for your Relying Party RP_NAME="My Awesome App" # The origin of your web app (used by SimpleWebAuthn) # Should match AUTH_URL in development, and your production URL later AUTH_ORIGIN="http://localhost:3000" # Add other environment variables as needed generator client { provider = "prisma-client-js" } datasource db { provider = "mongodb" url = env("DATABASE_URL") } model User { id String @id @default(auto()) @map("_id") @db.ObjectId name String? email String? @unique emailVerified DateTime? image String? role Role @default(USER) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt accounts Account[] sessions Session[] authenticators Authenticator[] devices Device[] logs 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? 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 VerificationToken { identifier String @id @map("_id") token String @unique expires DateTime @@unique([identifier, token]) } // Model for storing WebAuthn authenticators (Passkeys) model Authenticator { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId credentialID String @unique // The unique ID for the credential credentialPublicKey Bytes // Storing the public key as bytes counter Int credentialDeviceType String // e.g., 'singleDevice' or 'multiDevice' credentialBackedUp Boolean // Whether the authenticator is backed up transports String[] // e.g., ['internal', 'hybrid', 'usb', 'nfc', 'ble'] user User @relation(fields: [userId], references: [id], onDelete: Cascade) } // Model for tracking registered devices and their approval status model Device { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId name String? // e.g., "User's MacBook Pro" or User Agent derived userAgent String? ipAddress String? status DeviceStatus @default(PENDING) registeredAt DateTime @default(now()) lastLoginAt DateTime? // Optional: Link to the specific authenticator used on this device if known authenticatorId String? @db.ObjectId user User @relation(fields: [userId], references: [id], onDelete: Cascade) // authenticator Authenticator? @relation(fields: [authenticatorId], references: [id]) // Uncomment if linking } // Model for user activity logs model TransactionLog { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId action String // e.g., LOGIN, LOGOUT, REGISTER_DEVICE, APPROVE_DEVICE, UPDATE_PROFILE details Json? // Store additional context as JSON ipAddress String? userAgent String? timestamp DateTime @default(now()) user User @relation(fields: [userId], references: [id], onDelete: Cascade) } enum Role { USER ADMIN } enum DeviceStatus { PENDING APPROVED REJECTED REVOKED } 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 export default prisma import { generateRegistrationOptions, verifyRegistrationResponse, generateAuthenticationOptions, verifyAuthenticationResponse, VerifiedRegistrationResponse, VerifiedAuthenticationResponse, } from '@simplewebauthn/server'; import type { GenerateRegistrationOptionsOpts, GenerateAuthenticationOptionsOpts, VerifyRegistrationResponseOpts, VerifyAuthenticationResponseOpts, VerifiedRegistrationResponse as SimpleVerifiedRegistrationResponse, // Alias to avoid conflict VerifiedAuthenticationResponse as SimpleVerifiedAuthenticationResponse, // Alias to avoid conflict } from '@simplewebauthn/server'; import type { RegistrationResponseJSON, AuthenticationResponseJSON, } from '@simplewebauthn/types'; import prisma from './prisma'; import { User, Authenticator, Device } from '@prisma/client'; // Import Prisma types // --- Configuration --- // Make sure these are loaded from environment variables const rpID = process.env.RP_ID!; const rpName = process.env.RP_NAME!; const expectedOrigin = process.env.AUTH_ORIGIN!; if (!rpID || !rpName || !expectedOrigin) { throw new Error("Missing Passkey environment variables: RP_ID, RP_NAME, AUTH_ORIGIN"); } // --- In-memory storage for challenges (Replace with DB/Redis in production) --- // WARNING: This is NOT suitable for production. Challenges should be stored // securely (e.g., in your database associated with the user session or a // short-lived cache like Redis) to prevent replay attacks. const challengeStore: Record = {}; const storeChallenge = (challenge: string): string => { // Simple example: use challenge itself as key. Needs better mechanism. challengeStore[challenge] = challenge; // TODO: Add expiry mechanism for challenges return challenge; }; const getChallenge = (challenge: string): string | undefined => { const stored = challengeStore[challenge]; // Consume the challenge after retrieval // delete challengeStore[challenge]; // Temporarily disabled for easier testing return stored; }; // --- End In-memory storage --- /** * Generates registration options for the user. */ export async function getRegistrationOptions(user: Pick, existingAuthenticators: Pick[]) { const options: GenerateRegistrationOptionsOpts = { rpName, rpID, userID: user.id, // Use Prisma User ID userName: user.email ?? user.id, // Use email or ID as username // Don't prompt users for additional information about the authenticator // (Recommended for smoother UX) attestationType: 'none', // Prevent users from re-registering existing authenticators excludeCredentials: existingAuthenticators.map(auth => ({ id: auth.credentialID, type: 'public-key', // Optional: Specify transports if known // transports: auth.transports, })), authenticatorSelection: { // Defaults: 'platform' for device-bound, 'cross-platform' for roaming // authenticatorAttachment: 'platform', residentKey: 'preferred', // Prefer discoverable credentials (passkeys) userVerification: 'preferred', // Prefer requiring user verification (biometrics, PIN) }, }; const generatedOptions = await generateRegistrationOptions(options); // Store the challenge temporarily (replace with DB/Redis) storeChallenge(generatedOptions.challenge); return generatedOptions; } /** * Verifies the registration response from the browser. */ export async function verifyRegistration( response: RegistrationResponseJSON, expectedChallenge: string, // Retrieve this from your secure store user: Pick // Pass the user performing registration ): Promise<{ verified: boolean; authenticator?: Authenticator, device?: Device, error?: string }> { // Retrieve and validate the challenge (replace with DB/Redis lookup) const storedChallenge = getChallenge(expectedChallenge); if (!storedChallenge || storedChallenge !== expectedChallenge) { return { verified: false, error: 'Invalid or expired challenge.' }; } let verification: SimpleVerifiedRegistrationResponse; try { const opts: VerifyRegistrationResponseOpts = { response, expectedChallenge: storedChallenge, expectedOrigin, expectedRPID: rpID, requireUserVerification: false, // Adjust as needed based on your policy }; verification = await verifyRegistrationResponse(opts); } catch (error: any) { console.error('Registration verification failed:', error); return { verified: false, error: error.message }; } const { verified, registrationInfo } = verification; if (verified && registrationInfo) { const { credentialPublicKey, credentialID, counter, credentialDeviceType, credentialBackedUp, } = registrationInfo; // Check if this credential ID already exists const existingAuthenticator = await prisma.authenticator.findUnique({ where: { credentialID }, }); if (existingAuthenticator) { return { verified: false, error: 'Authenticator already registered.' }; } // Save the new authenticator and device to the database try { const newAuthenticator = await prisma.authenticator.create({ data: { userId: user.id, credentialID, credentialPublicKey: Buffer.from(credentialPublicKey), // Store as Buffer/Bytes counter, credentialDeviceType, credentialBackedUp, transports: response.response.transports ?? [], }, }); // Create a corresponding device entry, initially PENDING approval const newDevice = await prisma.device.create({ data: { userId: user.id, name: `Device registered on ${new Date().toLocaleDateString()}`, // Placeholder name status: 'PENDING', // Requires admin approval authenticatorId: newAuthenticator.id, // Link device to authenticator // TODO: Capture User Agent and IP if possible/desired } }); // TODO: Log successful registration attempt (but pending approval) await prisma.transactionLog.create({ data: { userId: user.id, action: 'REGISTER_PASSKEY_INITIATED', details: { authenticatorId: newAuthenticator.id, deviceId: newDevice.id } } }); return { verified: true, authenticator: newAuthenticator, device: newDevice }; } catch (dbError: any) { console.error('Failed to save authenticator/device:', dbError); // Consider deleting the authenticator if device creation fails to keep consistency return { verified: false, error: 'Database error during registration.' }; } } return { verified: false, error: 'Verification failed.' }; } /** * Generates authentication options. */ export async function getAuthenticationOptions(allowedCredentialIDs: string[] = []) { const opts: GenerateAuthenticationOptionsOpts = { rpID, // Provide credential IDs for known authenticators if possible // This allows non-discoverable credentials (like some security keys) allowCredentials: allowedCredentialIDs.map(id => ({ id, type: 'public-key', // transports: ['internal', 'usb', etc.], // Optional: Add transports if known })), userVerification: 'preferred', // Prefer biometrics/PIN but allow fallback }; const generatedOptions = await generateAuthenticationOptions(opts); // Store the challenge temporarily (replace with DB/Redis) storeChallenge(generatedOptions.challenge); return generatedOptions; } /** * Verifies the authentication response from the browser. */ export async function verifyAuthentication( response: AuthenticationResponseJSON, expectedChallenge: string, // Retrieve this from your secure store authenticator: Pick, device: Pick // Pass the associated device ): Promise<{ verified: boolean; requiresApproval?: boolean; nextCounter?: number; error?: string }> { // Retrieve and validate the challenge (replace with DB/Redis lookup) const storedChallenge = getChallenge(expectedChallenge); if (!storedChallenge || storedChallenge !== expectedChallenge) { return { verified: false, error: 'Invalid or expired challenge.' }; } // Check if the device associated with this authenticator is approved if (device.status !== 'APPROVED') { // Log attempt from unapproved device await prisma.transactionLog.create({ data: { userId: authenticator.userId, action: 'LOGIN_PASSKEY_DENIED_DEVICE_NOT_APPROVED', details: { authenticatorId: authenticator.credentialID, deviceId: device.id }, // TODO: Capture IP/UserAgent if available } }); return { verified: false, requiresApproval: true, error: 'Device registration pending approval.' }; } let verification: SimpleVerifiedAuthenticationResponse; try { const opts: VerifyAuthenticationResponseOpts = { response, expectedChallenge: storedChallenge, expectedOrigin, expectedRPID: rpID, authenticator: { credentialID: authenticator.credentialID, credentialPublicKey: authenticator.credentialPublicKey, // Pass as Buffer/Uint8Array counter: authenticator.counter, transports: authenticator.transports, }, requireUserVerification: false, // Adjust policy if needed }; verification = await verifyAuthenticationResponse(opts); } catch (error: any) { console.error('Authentication verification failed:', error); // Log failed login attempt await prisma.transactionLog.create({ data: { userId: authenticator.userId, action: 'LOGIN_PASSKEY_FAILED', details: { authenticatorId: authenticator.credentialID, deviceId: device.id, error: error.message }, } }); return { verified: false, error: error.message }; } const { verified, authenticationInfo } = verification; if (verified) { // Update the authenticator counter in the database const nextCounter = authenticationInfo.newCounter; try { await prisma.authenticator.update({ where: { credentialID: authenticator.credentialID }, data: { counter: nextCounter }, }); // Update device last login time await prisma.device.update({ where: { id: device.id }, data: { lastLoginAt: new Date() } }); // Log successful login await prisma.transactionLog.create({ data: { userId: authenticator.userId, action: 'LOGIN_PASSKEY_SUCCESS', details: { authenticatorId: authenticator.credentialID, deviceId: device.id }, } }); return { verified: true, nextCounter }; } catch (dbError) { console.error('Failed to update authenticator counter:', dbError); // This is tricky - verification succeeded but DB update failed. // Depending on policy, might deny login or allow but flag for check. return { verified: false, error: 'Database error after verification.' }; } } // Log failed login attempt (verification itself failed) await prisma.transactionLog.create({ data: { userId: authenticator.userId, action: 'LOGIN_PASSKEY_FAILED', details: { authenticatorId: authenticator.credentialID, deviceId: device.id, reason: 'Verification check failed' }, } }); return { verified: false, error: 'Authentication verification failed.' }; } import type { NextAuthConfig } from 'next-auth'; import Credentials from 'next-auth/providers/credentials'; import { PrismaAdapter } from '@auth/prisma-adapter'; import prisma from '@/lib/prisma'; import { verifyAuthentication } from '@/lib/passkey-service'; // Import passkey verification import type { AuthenticationResponseJSON } from '@simplewebauthn/types'; // Separate config for middleware checks (cannot use Prisma adapter here) export const authConfig = { pages: { signIn: '/login', // Redirect users to /login if not authenticated // error: '/auth/error', // Optional: Custom error page }, callbacks: { // Use JWT strategy session: ({ session, token }) => { if (token && session.user) { session.user.id = token.id as string; session.user.role = token.role as string; // Add role to session // Add other properties from token if needed } return session; }, jwt: async ({ token, user, trigger, session }) => { if (user) { // On sign in, add user id and role to the token token.id = user.id; // Fetch role from DB if not directly available on user object from provider const dbUser = await prisma.user.findUnique({ where: { id: user.id }, select: { role: true }, }); token.role = dbUser?.role ?? 'USER'; // Default to USER if not found } // Example: Update role in token if session is updated (e.g., admin changes role) if (trigger === "update" && session?.role) { token.role = session.role; } return token; }, authorized({ auth, request: { nextUrl } }) { const isLoggedIn = !!auth?.user; const isOnDashboard = nextUrl.pathname.startsWith('/dashboard'); const isOnAdmin = nextUrl.pathname.startsWith('/admin'); const isOnLogin = nextUrl.pathname.startsWith('/login'); const isOnRegister = nextUrl.pathname.startsWith('/register'); if (isOnDashboard || isOnAdmin) { if (isLoggedIn) { // Add role check for admin area if (isOnAdmin && auth.token?.role !== 'ADMIN') { // Redirect non-admins trying to access /admin // You could redirect to dashboard or an unauthorized page return Response.redirect(new URL('/dashboard', nextUrl)); } return true; // Allow logged-in users to access dashboard/admin (if role matches) } return false; // Redirect unauthenticated users to login page } else if (isLoggedIn && (isOnLogin || isOnRegister)) { // Redirect logged-in users away from login/register pages return Response.redirect(new URL('/dashboard', nextUrl)); } // Allow access to other pages (login, register, public pages) return true; }, }, providers: [ // Provider placeholder, actual providers defined in auth.ts ], session: { strategy: 'jwt' }, // Use JWT strategy for session management adapter: PrismaAdapter(prisma), // Use Prisma adapter (primarily for DB session/user sync) trustHost: true, // Necessary for Vercel deployment, review security implications } satisfies NextAuthConfig; import NextAuth from 'next-auth'; import Credentials from 'next-auth/providers/credentials'; import { authConfig } from './auth.config'; // Import base config import prisma from '@/lib/prisma'; import { verifyAuthentication } from '@/lib/passkey-service'; import type { AuthenticationResponseJSON } from '@simplewebauthn/types'; import { User } from '@prisma/client'; // Import User type export const { handlers: { GET, POST }, auth, signIn, signOut, } = NextAuth({ ...authConfig, // Spread the base config providers: [ Credentials({ id: "passkey", // Custom ID for the passkey provider name: "Passkey", credentials: { // We don't define traditional credentials like username/password here. // Instead, we expect the client to send the WebAuthn response. // These fields are placeholders for the authorize function's input. credentialId: { label: "Credential ID", type: "text" }, authResponse: { label: "Auth Response JSON", type: "text" }, challenge: { label: "Challenge", type: "text" }, // Include challenge }, async authorize(credentials): Promise { console.log("Passkey Authorize called with credentials:", credentials); if (!credentials?.authResponse || !credentials.credentialId || !credentials.challenge) { console.error("Missing passkey credentials"); return null; } const authResponse = JSON.parse(credentials.authResponse as string) as AuthenticationResponseJSON; const credentialID = credentials.credentialId as string; const expectedChallenge = credentials.challenge as string; // Get challenge try { // 1. Find the authenticator by its credential ID const authenticator = await prisma.authenticator.findUnique({ where: { credentialID: credentialID }, include: { user: true }, // Include user data }); if (!authenticator) { console.error(`Authenticator not found for credential ID: ${credentialID}`); return null; } // 2. Find the associated device (assuming one device per authenticator for simplicity) // In a real app, you might have a more complex mapping or query based on user agent/context. const device = await prisma.device.findFirst({ where: { authenticatorId: authenticator.id }, }); if (!device) { console.error(`Device not found for authenticator ID: ${authenticator.id}`); // Decide policy: Maybe allow login but flag? For now, deny. return null; } // 3. Verify the authentication response const { verified, requiresApproval, error } = await verifyAuthentication( authResponse, expectedChallenge, // Pass the challenge from client authenticator, device // Pass the device for status check ); if (requiresApproval) { console.log(`Login attempt denied for user ${authenticator.userId}: Device ${device.id} requires approval.`); // Throw an error that can be caught by the client/redirected throw new Error("Device requires admin approval."); } if (verified) { console.log(`Passkey verification successful for user: ${authenticator.userId}`); // Return the user object associated with the authenticator // Ensure the returned object matches the expected User type for NextAuth const { user } = authenticator; return { id: user.id, name: user.name, email: user.email, emailVerified: user.emailVerified, image: user.image, role: user.role, // Include role if needed immediately createdAt: user.createdAt, updatedAt: user.updatedAt, }; } else { console.error(`Passkey verification failed for user ${authenticator.userId}: ${error}`); return null; } } catch (e: any) { console.error("Error during passkey authorization:", e); // Rethrow specific errors if needed for client feedback if (e.message === "Device requires admin approval.") { throw e; // Let NextAuth handle this potentially } return null; } }, }), // Add other providers like Google, GitHub, etc. if needed // e.g., Google({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET }), ], // Callbacks are already defined in authConfig }); import NextAuth from 'next-auth'; import { authConfig } from './auth.config'; // Import the separated config // Initialize NextAuth with the configuration containing the `authorized` callback export default NextAuth(authConfig).auth; // Define which routes should be protected by the middleware export const config = { // Matcher to specify routes protected by this middleware // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher matcher: [ // Protect dashboard and admin routes '/dashboard/:path*', '/admin/:path*', // Exclude API routes, static files, and image optimization files '/((?!api|_next/static|_next/image|favicon.ico|login|register).*)', ], }; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import { SessionProvider } from "next-auth/react"; // Import SessionProvider import { auth } from "@/auth"; // Import auth to get session server-side const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "NextAuth Passkey App", description: "Example app with NextAuth.js, Passkeys, Prisma, MongoDB", }; export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { const session = await auth(); // Get session on the server return ( // Wrap the app with SessionProvider, passing the server session {children} ); } @tailwind base; @tailwind components; @tailwind utilities; body { margin: 0; padding: 0; box-sizing: border-box; } import Link from 'next/link'; import { auth, signOut } from "@/auth"; import { Button } from "@/components/ui/button"; // Assuming shadcn/ui button export default async function HomePage() { const session = await auth(); return (

Welcome

{session?.user ? (

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

{session.user.role === 'ADMIN' && ( )}

) : (

You are not signed in.

)}

); } // Basic login page structure - Needs Passkey integration "use client"; // Required for client-side interactions import { useState } from 'react'; import { signIn } from 'next-auth/react'; import { useRouter } from 'next/navigation'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; // Assuming shadcn/ui input import { Label } from '@/components/ui/label'; // Assuming shadcn/ui label import { startAuthentication } from '@simplewebauthn/browser'; export default function LoginPage() { const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(false); const router = useRouter(); const handlePasskeyLogin = async () => { setIsLoading(true); setError(null); try { // 1. Get Authentication Options from Server const resp = await fetch('/api/auth/passkey/generate-authentication-options', { method: 'POST', headers: { 'Content-Type': 'application/json' }, // Optionally send username hint if needed by server to find credentials // body: JSON.stringify({ username: 'user@example.com' }) }); const options = await resp.json(); if (!resp.ok) { throw new Error(options.error || 'Failed to get authentication options'); } // 2. Start WebAuthn Authentication Ceremony const authResponse = await startAuthentication(options); // 3. Send Authentication Response to Server via NextAuth Credentials Provider const result = await signIn('passkey', { redirect: false, // Handle redirect manually authResponse: JSON.stringify(authResponse), credentialId: authResponse.id, // Pass credential ID used challenge: options.challenge, // Send back the challenge for verification }); if (result?.error) { // Handle specific errors from authorize function if (result.error.includes("Device requires admin approval")) { setError("Your device needs to be approved by an administrator before you can log in."); } else { setError(result.error || 'Authentication failed.'); } } else if (result?.ok) { // Redirect to dashboard on successful login router.push('/dashboard'); } else { setError('An unknown error occurred during login.'); } } catch (err: any) { console.error('Passkey login error:', err); // Handle errors from startAuthentication (e.g., user cancellation) if (err.name === 'NotAllowedError') { setError('Authentication cancelled or not allowed.'); } else { setError(err.message || 'Passkey login failed.'); } } finally { setIsLoading(false); } }; return (

Login

{error &&

{error}

} {/* Placeholder for traditional login if needed */} {/* */}

Don't have an account?{' '} Register

); } // Basic registration page - Needs Passkey integration "use client"; import { useState } from 'react'; import { useRouter } from 'next/navigation'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { startRegistration } from '@simplewebauthn/browser'; export default function RegisterPage() { const [email, setEmail] = useState(''); const [name, setName] = useState(''); const [error, setError] = useState(null); const [message, setMessage] = useState(null); const [isLoading, setIsLoading] = useState(false); const router = useRouter(); const handleRegisterAndPasskey = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); setError(null); setMessage(null); try { // --- Step 1: Basic User Registration (Optional, adjust as needed) --- // You might register the user first, then the passkey, or do it together. // Here, we get registration options *first*, assuming we need the user ID. // A better flow might be: // 1. Submit email/name to an API route to create a *pending* user or check existence. // 2. That route returns the user ID and passkey registration options. // --- Step 2: Get Passkey Registration Options --- const optionsResp = await fetch('/api/auth/passkey/generate-registration-options', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, name }), // Send user info to server }); const options = await optionsResp.json(); if (!optionsResp.ok) { throw new Error(options.error || 'Failed to get registration options'); } // --- Step 3: Start Browser WebAuthn Registration --- let regResponse; try { regResponse = await startRegistration(options); } catch (err: any) { // Handle user cancellation or browser errors if (err.name === 'InvalidStateError') { setError('Authenticator already registered. Try logging in.'); } else { setError(`Registration failed: ${err.message}`); } setIsLoading(false); return; } // --- Step 4: Verify Registration Response with Server --- const verificationResp = await fetch('/api/auth/passkey/verify-registration', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ registrationResponse: regResponse, challenge: options.challenge, // Send back the original challenge email: email, // Send user identifier again for linking name: name, }), }); const verificationResult = await verificationResp.json(); if (!verificationResp.ok || !verificationResult.verified) { throw new Error(verificationResult.error || 'Passkey verification failed.'); } // --- Success --- setMessage('Registration successful! Your device registration is pending admin approval. You will be notified once approved.'); // Optionally redirect or clear form // router.push('/login'); // Redirect to login after successful registration } catch (err: any) { console.error('Registration error:', err); setError(err.message || 'An error occurred during registration.'); } finally { setIsLoading(false); } }; return (

Register

{error &&

{error}

} {message &&

{message}

}

Already have an account?{' '} Login

); } import { auth, signOut } from "@/auth"; import { Button } from "@/components/ui/button"; import { redirect } from "next/navigation"; export default async function DashboardPage() { const session = await auth(); if (!session?.user) { redirect("/login"); // Should be handled by middleware, but good practice } // TODO: Fetch user-specific data, device list, logs etc. return (

Dashboard

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

Your Role: {session.user.role}

My Devices

{/* TODO: List user's registered devices (pending, approved) */}

Device management coming soon...

{/* Example: Add button to register another device */}

Activity Log

{/* TODO: List recent transaction logs for the user */}

Activity log coming soon...

); } import { auth } from "@/auth"; import { redirect } from "next/navigation"; import prisma from "@/lib/prisma"; import { Button } from "@/components/ui/button"; // Assuming shadcn/ui // Server Action for approving/rejecting devices async function updateDeviceStatus(formData: FormData) { 'use server'; const deviceId = formData.get('deviceId') as string; const status = formData.get('status') as string; const session = await auth(); // Re-check auth within server action if (session?.user?.role !== 'ADMIN') { throw new Error("Unauthorized"); } if (!deviceId || !status || !['APPROVED', 'REJECTED', 'REVOKED'].includes(status)) { throw new Error("Invalid input"); } try { const updatedDevice = await prisma.device.update({ where: { id: deviceId }, data: { status: status as any }, // Cast status include: { user: true } // Include user for logging context }); // Log the action await prisma.transactionLog.create({ data: { userId: updatedDevice.userId, // User whose device was updated action: `ADMIN_DEVICE_${status}`, details: { adminUserId: session.user.id, deviceId: updatedDevice.id, deviceName: updatedDevice.name }, ipAddress: "N/A", // TODO: Get IP if possible userAgent: "Server Action" } }); console.log(`Device ${deviceId} status updated to ${status} by admin ${session.user.id}`); // Revalidate path or redirect if needed after update // revalidatePath('/admin'); } catch (error) { console.error("Failed to update device status:", error); throw new Error("Failed to update device status."); } } export default async function AdminPage() { const session = await auth(); // Middleware should handle this, but double-check if (session?.user?.role !== 'ADMIN') { redirect("/dashboard"); } // Fetch pending devices const pendingDevices = await prisma.device.findMany({ where: { status: 'PENDING' }, include: { user: { select: { email: true, name: true } } }, orderBy: { registeredAt: 'asc' }, }); // Fetch other users/data as needed for admin tasks return (

Admin Panel

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

Pending Device Approvals

{pendingDevices.length === 0 ? (

No devices pending approval.

) : (

User: {device.user.name ?? device.user.email}

Device Name: {device.name ?? 'Unnamed Device'}

Registered: {device.registeredAt.toLocaleString()}
{/* Add User Agent/IP if stored */}

)}

{/* TODO: Add sections for User Management (roles, permissions), Viewing Logs, etc. */}

User Management

User role/permission management coming soon...

System Logs

System-wide transaction log viewer coming soon...

); } // API Route to generate passkey registration options import { NextRequest, NextResponse } from 'next/server'; import { getRegistrationOptions } from '@/lib/passkey-service'; import prisma from '@/lib/prisma'; import { User } from '@prisma/client'; export async function POST(request: NextRequest) { try { const { email, name } = await request.json(); if (!email) { return NextResponse.json({ error: 'Email is required' }, { status: 400 }); } // Find or create user (adjust logic as needed) // IMPORTANT: Ensure this aligns with your user creation strategy. // This example creates the user immediately. You might want a pending state. let user = await prisma.user.findUnique({ where: { email } }); if (!user) { user = await prisma.user.create({ data: { email, name, role: 'USER', // Default role }, }); // Log user creation await prisma.transactionLog.create({ data: { userId: user.id, action: 'USER_REGISTERED', details: { email: user.email } } }); } else { // Optionally prevent re-registration initiation if user exists and already has keys? // Or allow adding more keys. Current logic allows adding more. } // Get existing authenticators for this user to prevent re-registration const existingAuthenticators = await prisma.authenticator.findMany({ where: { userId: user.id }, select: { credentialID: true }, }); const options = await getRegistrationOptions(user, existingAuthenticators); // IMPORTANT: Store the challenge associated with the user/session securely. // The passkey-service currently uses insecure in-memory storage. // You need to replace this with DB/Redis storage linked to the user's session ID or a temporary token. // Example: await storeChallengeInDb(user.id, options.challenge); return NextResponse.json(options); } catch (error: any) { console.error('Error generating registration options:', error); return NextResponse.json({ error: error.message || 'Failed to generate registration options' }, { status: 500 }); } } // API Route to verify passkey registration response import { NextRequest, NextResponse } from 'next/server'; import { verifyRegistration } from '@/lib/passkey-service'; import prisma from '@/lib/prisma'; import type { RegistrationResponseJSON } from '@simplewebauthn/types'; export async function POST(request: NextRequest) { try { const { registrationResponse, challenge, email } = await request.json() as { registrationResponse: RegistrationResponseJSON, challenge: string, email: string }; if (!registrationResponse || !challenge || !email) { return NextResponse.json({ error: 'Missing required fields' }, { status: 400 }); } // Retrieve the user trying to register const user = await prisma.user.findUnique({ where: { email } }); if (!user) { return NextResponse.json({ error: 'User not found' }, { status: 404 }); } // IMPORTANT: Retrieve the expected challenge securely associated with this user/session. // Replace the placeholder `challenge` below with the retrieved value. const expectedChallenge = challenge; // Placeholder - MUST fetch from secure store const { verified, error, device } = await verifyRegistration(registrationResponse, expectedChallenge, user); if (verified && device) { // Registration verified and authenticator/device saved (pending approval) return NextResponse.json({ verified: true, message: `Device registered successfully for ${user.email}. Awaiting admin approval.` }); } else { return NextResponse.json({ verified: false, error: error || 'Verification failed' }, { status: 400 }); } } catch (error: any) { console.error('Error verifying registration:', error); return NextResponse.json({ verified: false, error: error.message || 'Failed to verify registration' }, { status: 500 }); } } // API Route to generate passkey authentication options import { NextRequest, NextResponse } from 'next/server'; import { getAuthenticationOptions } from '@/lib/passkey-service'; import prisma from '@/lib/prisma'; export async function POST(request: NextRequest) { try { // Optionally receive a username hint to find user-specific credentials // const { username } = await request.json(); // let allowedCredentialIDs: string[] = []; // if (username) { // const user = await prisma.user.findUnique({ where: { email: username } }); // if (user) { // const authenticators = await prisma.authenticator.findMany({ // where: { userId: user.id }, // select: { credentialID: true } // }); // allowedCredentialIDs = authenticators.map(a => a.credentialID); // } // } // Generate options (potentially allowing any discoverable credential if no hint provided) const options = await getAuthenticationOptions(/* allowedCredentialIDs */); // IMPORTANT: Store the challenge securely, associated with the session/request. // Replace the insecure in-memory storage in passkey-service. // Example: await storeChallengeInDb(sessionId, options.challenge); return NextResponse.json(options); } catch (error: any) { console.error('Error generating authentication options:', error); return NextResponse.json({ error: error.message || 'Failed to generate authentication options' }, { status: 500 }); } } // Example shadcn/ui Button component (install via CLI: npx shadcn-ui@latest add button) import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" // Assumes utils.ts exists const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } // Example shadcn/ui Input component (install via CLI: npx shadcn-ui@latest add input) import * as React from "react" import { cn } from "@/lib/utils" // Assumes utils.ts exists export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef( ({ className, type, ...props }, ref) => { return ( ) } ) Input.displayName = "Input" export { Input } // Example shadcn/ui Label component (install via CLI: npx shadcn-ui@latest add label) "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" // Assumes utils.ts exists const labelVariants = cva( "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" ) const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } // Utility for shadcn/ui components (install via CLI: npx shadcn-ui@latest init) import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } // Example Tailwind config for shadcn/ui (generated by npx shadcn-ui@latest init) import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ './pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config // Basic PostCSS config for Next.js + Tailwind module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } /** @type {import('next').NextConfig} */ const nextConfig = { // Required for Server Actions experimental features if needed // experimental: { // serverActions: true, // }, }; export default nextConfig; **To Run This Project:** 1. **Set up Environment Variables:** Create a `.env` file by copying `.env.example` and fill in your MongoDB connection string (`DATABASE_URL`) and generate a strong `AUTH_SECRET`. Update `RP_ID`, `RP_NAME`, and `AUTH_ORIGIN` according to your development environment (likely `localhost` and `http://localhost:3000` initially) and later your production domain. 2. **Install Dependencies:** bash npm install # Or yarn install 3. **Install shadcn/ui components (Optional but used in examples):** ```bash npx shadcn-ui@latest init npx shadcn-ui@latest add button input label ``` *Follow the prompts. Choose default options if unsure.* 4. **Apply Database Schema:** ```bash npx prisma db push ``` *(Use `prisma migrate dev` for production workflows, but `db push` is simpler for initial setup/prototyping).* 5. **Run Development Server:** ```bash npm run dev # Or yarn dev ``` **Next Steps & Considerations:** * **Secure Challenge Storage:** The current `passkey-service.ts` uses insecure in-memory challenge storage. **This MUST be replaced** with a secure method (e.g., storing challenges in Redis or your database, linked to the user's session ID or a temporary state token, with a short expiry time). * **UI Implementation:** Build out the UI for managing devices (listing, potentially renaming), viewing logs, and the admin panel for user role management. * **Granular Permissions:** Implement the logic for checking specific permissions (add, edit, delete, view) based on user roles. This might involve fetching permissions in the `auth` callbacks or using a library like CASL. * **Device Limits:** Add logic during registration verification (`/api/auth/passkey/verify-registration`) or device approval to enforce limits on the number of `APPROVED` devices per user. * **Error Handling:** Improve error handling and user feedback, especially for passkey operations (e.g., user cancellation, unsupported browser, device not approved). * **Transaction Logging:** Expand logging to cover more actions (profile updates, admin actions, etc.) and capture relevant details (IP address, user agent). * **Security:** Thoroughly review security aspects, including input validation, rate limiting API endpoints, proper handling of secrets, and CSRF protection (NextAuth helps with this). * **Passkey Edge Cases:** Handle scenarios like lost/stolen devices (revocation), multiple passkeys per user, and different authenticator types.