Okay, I can help you set up the foundation for a Next.js application using Auth.js (v5/NextAuth.js) with Prisma and MongoDB, including the structure for passkey (WebAuthn) authentication. This setup will include: 1. Next.js project structure (using App Router). 2. Prisma schema for User, Account, Session, and Authenticator (for passkeys). 3. Auth.js configuration with the Prisma adapter. 4. Basic middleware to protect routes. 5. Placeholder API routes for passkey operations. 6. A simple login page and a protected dashboard page. **Note:** Implementing the full passkey logic (challenge generation, verification, browser interaction), admin approval, device limits, RBAC, and transaction logging requires significant additional code beyond this initial setup. { "name": "nextjs-authjs-passkey-prisma", "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", "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/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, }; export default nextConfig; /** @type {import('postcss-load-config').Config} */ const config = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; export default config; import type { Config } from "tailwindcss"; const config: Config = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: {}, }, plugins: [], }; export default config; # Generate a secret: openssl rand -base64 32 AUTH_SECRET="YOUR_AUTH_SECRET" # Use mongodb+srv://... for Atlas DATABASE_URL="mongodb://localhost:27017/mydb" # WebAuthn Relying Party configuration # Your website's domain name RP_ID="localhost" # A human-readable name for your site RP_NAME="My Awesome App" # Your website's origin URL AUTH_URL="http://localhost:3000" AUTH_TRUST_HOST=true # Set to true for development with http://localhost # Add other provider secrets if needed (e.g., GITHUB_ID, GITHUB_SECRET) # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # Dependencies /node_modules /.pnp .pnp.js # Testing /coverage # Next.js /.next/ /out/ # Production /build # Misc .DS_Store *.pem # Debug npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* # Local Environment Variables .env*.local .env # Prisma prisma/generated prisma/migrations/* !prisma/migrations/migration_lock.toml # WebContainer specific .webcontainer.run .turbo generator client { provider = "prisma-client-js" } datasource db { provider = "mongodb" url = env("DATABASE_URL") } model Account { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId type String provider String providerAccountId String refresh_token String? @db.String access_token String? @db.String expires_at Int? token_type String? scope String? id_token String? @db.String session_state String? user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([provider, providerAccountId]) } model Session { id String @id @default(auto()) @map("_id") @db.ObjectId sessionToken String @unique userId String @db.ObjectId expires DateTime user User @relation(fields: [userId], references: [id], onDelete: Cascade) } model User { id String @id @default(auto()) @map("_id") @db.ObjectId name String? email String? @unique emailVerified DateTime? image String? accounts Account[] sessions Session[] authenticators Authenticator[] // Relation to Passkey Authenticators // Add role, device limits, etc. here later // role Role? @relation(fields: [roleId], references: [id]) // roleId String? @db.ObjectId // devices Device[] // logs Log[] createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } 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 credentialID String @unique // Store as base64url encoded string credentialPublicKey Bytes // Store the raw public key buffer counter Int credentialDeviceType String // 'singleDevice' or 'multiDevice' credentialBackedUp Boolean transports String[] // e.g., ["internal", "usb", "nfc", "ble"] userId String @db.ObjectId user User @relation(fields: [userId], references: [id], onDelete: Cascade) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } // Add models for Role, Permission, Device, Log later /* model Role { id String @id @default(auto()) @map("_id") @db.ObjectId name String @unique permissions Permission[] users User[] } model Permission { id String @id @default(auto()) @map("_id") @db.ObjectId action String // e.g., 'create', 'read', 'update', 'delete' subject String // e.g., 'post', 'user', 'settings' // Add conditions if needed roles Role[] } model Device { id String @id @default(auto()) @map("_id") @db.ObjectId userAgent String? ipAddress String? lastLogin DateTime? approved Boolean @default(false) // Requires admin approval userId String @db.ObjectId user User @relation(fields: [userId], references: [id], onDelete: Cascade) createdAt DateTime @default(now()) } model Log { id String @id @default(auto()) @map("_id") @db.ObjectId timestamp DateTime @default(now()) action String // e.g., 'login', 'register_device', 'update_profile' details Json? userId String @db.ObjectId user User @relation(fields: [userId], references: [id], onDelete: Cascade) } */ import { PrismaClient } from '@prisma/client'; declare global { // allow global `var` declarations // eslint-disable-next-line no-var var prisma: PrismaClient | undefined; } export const prisma = global.prisma || new PrismaClient({ // log: ['query'], // Uncomment to see Prisma queries in console }); if (process.env.NODE_ENV !== 'production') global.prisma = prisma; import NextAuth from "next-auth" import { PrismaAdapter } from "@auth/prisma-adapter" import Credentials from "next-auth/providers/credentials" // Example provider // Import other providers as needed (Google, GitHub, etc.) // import Google from "next-auth/providers/google" import { prisma } from "@/lib/prisma" import type { Adapter } from "next-auth/adapters" import type { NextAuthConfig } from "next-auth" // Basic configuration, expand with passkey logic later export const authConfig = { adapter: PrismaAdapter(prisma) as Adapter, providers: [ // Add providers here // Google({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET }), Credentials({ // The name to display on the sign in form (e.g. "Sign in with...") name: "Credentials", credentials: { email: { label: "Email", type: "email", placeholder: "jsmith@example.com" }, password: { label: "Password", type: "password" } }, async authorize(credentials, req) { // --- IMPORTANT --- // This is a placeholder. DO NOT use in production without proper password hashing and comparison. // Use a library like bcryptjs to hash passwords during registration and compare hashes here. // Example: // const user = await prisma.user.findUnique({ where: { email: credentials.email } }); // if (user && user.password) { // Assuming you add a password hash field to User model // const isValid = await bcrypt.compare(credentials.password, user.password); // if (isValid) return user; // } // return null; // Login failed console.warn("Using insecure placeholder credential validation!"); const user = await prisma.user.findUnique({ where: { email: credentials?.email as string | undefined }, }); // In this basic example, we just check if the user exists. if (user) { // Return user object if found (without password!) // You might fetch roles/permissions here too return { id: user.id, name: user.name, email: user.email, image: user.image }; } else { // If you return null then an error will be displayed advising the user to check their details. return null; } } }) ], session: { strategy: "jwt", // Use JWT for session strategy, required for middleware }, callbacks: { // Include user.id and custom properties (like role) on the JWT async jwt({ token, user }) { if (user) { token.id = user.id; // Add custom properties like role here if fetched during authorize or from DB // token.role = user.role; } return token; }, // Include user.id and custom properties on the session object async session({ session, token }) { if (session.user) { session.user.id = token.id as string; // Add custom properties like role here // session.user.role = token.role; } return session; }, // Add signIn callback for device checks/limits later // async signIn({ user, account, profile, email, credentials }) { // const isAllowedToSignIn = true // // Check device limits, approval status etc. // if (isAllowedToSignIn) { // return true // } else { // // Return false to display a default error message // return false // // Or you can return a URL to redirect to: // // return '/unauthorized' // } // } }, pages: { signIn: '/login', // Redirect users to '/login' when sign in is required // error: '/auth/error', // Error code passed in query string as ?error= // newUser: '/auth/new-user' // New users will be directed here on first sign in (leave the property out to disable) }, // Add secret and trust host for production/deployment // secret: process.env.AUTH_SECRET, // trustHost: true, // Required for Vercel deployment, set based on env } satisfies NextAuthConfig export const { handlers, auth, signIn, signOut } = NextAuth(authConfig) import { NextResponse } from 'next/server' import { auth } from "@/lib/auth" // Adjust path as needed import type { NextAuthConfig } from "next-auth" // Define public routes that don't require authentication const publicRoutes = ["/login", "/register", "/api/auth/.*", "/api/webauthn/.*"]; // Include passkey API routes // Define routes that require authentication const protectedRoutes = ["/dashboard"]; // Add other protected routes export default auth((req) => { const { pathname } = req.nextUrl; const session = req.auth; // Access session data const isPublicRoute = publicRoutes.some(pattern => new RegExp(`^${pattern}$`).test(pathname)); const isProtectedRoute = protectedRoutes.some(route => pathname.startsWith(route)); // console.log("Middleware:", pathname, "Session:", !!session, "IsPublic:", isPublicRoute, "IsProtected:", isProtectedRoute); if (!session && isProtectedRoute) { // Redirect unauthenticated users trying to access protected routes to login const loginUrl = new URL("/login", req.url); loginUrl.searchParams.set("callbackUrl", req.nextUrl.pathname); // Remember where they were going return NextResponse.redirect(loginUrl); } if (session && (pathname === "/login" || pathname === "/register")) { // Redirect authenticated users away from login/register pages return NextResponse.redirect(new URL("/dashboard", req.url)); } // Add role/permission checks here later if needed // if (session && pathname.startsWith('/admin') && session.user?.role !== 'admin') { // return NextResponse.redirect(new URL('/unauthorized', req.url)); // } // Allow the request to proceed return NextResponse.next(); }); // Optionally, don't invoke Middleware on some paths // Read more: https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher export const config = { matcher: ['/((?!api/|_next/static|_next/image|favicon.ico).*)'], }; 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 "@/lib/auth"; // Import auth to get session server-side const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "NextAuth Passkey Demo", description: "Demo app for NextAuth.js with Passkeys", }; export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { const session = await auth(); // Get session on the server return ( // Wrap with SessionProvider and pass the server session {children} ); } @tailwind base; @tailwind components; @tailwind utilities; body { @apply bg-gray-100 text-gray-900; } /* Add some basic styling */ .container { @apply max-w-lg mx-auto p-4; } .card { @apply bg-white p-6 rounded-lg shadow-md; } .form-input { @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm mb-4; } .btn { @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50; } .btn-secondary { @apply inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500; } import Link from 'next/link'; import { auth, signOut } from "@/lib/auth"; import { SignOutButton } from '@/components/auth-buttons'; // We'll create this export default async function Home() { const session = await auth(); return (

Welcome

{session?.user ? (

Signed in as {session.user.email || session.user.name}

Go to Dashboard

) : (

You are not signed in.

)}

); } "use client"; // Required for form handling import { useState } from 'react'; import { signIn } from 'next-auth/react'; // Use client-side signIn import { useRouter, useSearchParams } from 'next/navigation'; // Import passkey functions when implemented // import { startAuthentication } from '@/lib/passkey-client'; export default function LoginPage() { const router = useRouter(); const searchParams = useSearchParams(); const callbackUrl = searchParams.get('callbackUrl') || '/dashboard'; const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const handleCredentialsLogin = async (e: React.FormEvent) => { e.preventDefault(); setError(null); setLoading(true); try { const result = await signIn('credentials', { redirect: false, // Handle redirect manually email, password, callbackUrl, }); if (result?.error) { setError('Invalid email or password.'); // Or use result.error for more specific messages console.error("Sign in error:", result.error); } else if (result?.ok) { router.push(callbackUrl); // Redirect on success } else { setError('An unknown error occurred during sign in.'); } } catch (err) { console.error("Sign in exception:", err); setError('An error occurred. Please try again.'); } finally { setLoading(false); } }; const handlePasskeyLogin = async () => { setError(null); setLoading(true); alert("Passkey login not implemented yet."); // try { // await startAuthentication(); // Call your passkey client function // // If successful, the server-side callback should handle the session creation // // Potentially poll for session or rely on server redirect/message // router.push(callbackUrl); // } catch (err: any) { // console.error("Passkey login error:", err); // setError(err.message || 'Passkey login failed.'); // } finally { // setLoading(false); // } setLoading(false); // Remove this when implementing }; return (

Login

{error &&

{error}

}

{/* Add links to register or other providers */}

Don't have an account?{' '} Register (Placeholder)

); } import { auth } from "@/lib/auth"; import { redirect } from 'next/navigation'; import { SignOutButton } from "@/components/auth-buttons"; // Placeholder for passkey registration button/logic const RegisterPasskeyButton = () => { const handleRegister = () => { alert("Passkey registration not implemented yet."); // Call client-side function to start passkey registration flow // import { startRegistration } from '@/lib/passkey-client'; // startRegistration(); }; return ; } export default async function DashboardPage() { const session = await auth(); // This page is protected by middleware, but double-check if (!session?.user) { redirect('/login'); } return (

Dashboard

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

This page is protected.

{/* Add button to manage devices later */}

              {JSON.stringify(session, null, 2)}

); } "use client"; import { signOut } from "next-auth/react"; export function SignOutButton() { return ( ); } // Add other auth-related buttons if needed (e.g., SignInButton for header) // This file exports the handlers from your auth configuration // Needed for NextAuth.js to handle authentication routes export { handlers as GET, handlers as POST } from "@/lib/auth" import { NextRequest, NextResponse } from 'next/server'; import { generateRegistrationOptions } from '@simplewebauthn/server'; import { prisma } from '@/lib/prisma'; import { auth } from '@/lib/auth'; // Get user session // In-memory store for challenges (replace with DB/Redis in production) const challengeStore: Record = {}; export async function POST(req: NextRequest) { const session = await auth(); if (!session?.user?.id) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }); } const userId = session.user.id; const user = await prisma.user.findUnique({ where: { id: userId }, include: { authenticators: true } // Get existing authenticators }); if (!user) { return NextResponse.json({ error: 'User not found' }, { status: 404 }); } const rpID = process.env.RP_ID; const rpName = process.env.RP_NAME; const origin = process.env.AUTH_URL; // Use AUTH_URL as origin if (!rpID || !rpName || !origin) { console.error("Missing RP environment variables"); return NextResponse.json({ error: 'Server configuration error' }, { status: 500 }); } try { const options = await generateRegistrationOptions({ rpName, rpID, userID: user.id, // Use Prisma User ID userName: user.email ?? user.name ?? `user-${user.id.substring(0, 5)}`, // Use email or name // Don't prompt users for additional information about the authenticator // (Recommended for smoother UX) attestationType: 'none', // Prevent users from re-registering existing authenticators excludeCredentials: user.authenticators.map(auth => ({ id: Buffer.from(auth.credentialID, 'base64url'), // Decode base64url string to Buffer type: 'public-key', // Optional: Specify transports if available transports: auth.transports as AuthenticatorTransportFuture[] | undefined, })), authenticatorSelection: { // Defaults // residentKey: 'preferred', // Use 'required' if you want discoverable credentials userVerification: 'preferred', // 'required', 'preferred', 'discouraged' }, }); // Store the challenge temporarily (e.g., in session, DB, or cache) // Associate it with the user ID for verification challengeStore[userId] = options.challenge; // Simple in-memory store for demo return NextResponse.json(options); } catch (error) { console.error("Error generating registration options:", error); return NextResponse.json({ error: 'Failed to generate registration options' }, { status: 500 }); } } import { NextRequest, NextResponse } from 'next/server'; import { verifyRegistrationResponse } from '@simplewebauthn/server'; import type { VerifiedRegistrationResponse, RegistrationResponseJSON } from '@simplewebauthn/server'; import { prisma } from '@/lib/prisma'; import { auth } from '@/lib/auth'; // Get user session import { Buffer } from 'buffer'; // Node.js Buffer // In-memory store for challenges (replace with DB/Redis in production) const challengeStore: Record = {}; // Needs to be shared or persisted export async function POST(req: NextRequest) { const session = await auth(); if (!session?.user?.id) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }); } const userId = session.user.id; const body: RegistrationResponseJSON = await req.json(); const rpID = process.env.RP_ID; const origin = process.env.AUTH_URL; if (!rpID || !origin) { console.error("Missing RP environment variables"); return NextResponse.json({ error: 'Server configuration error' }, { status: 500 }); } // Retrieve the challenge saved during generate-registration-options const expectedChallenge = challengeStore[userId]; // Retrieve from your store if (!expectedChallenge) { return NextResponse.json({ error: 'Challenge not found or expired' }, { status: 400 }); } // Clear the challenge after use delete challengeStore[userId]; let verification: VerifiedRegistrationResponse; try { verification = await verifyRegistrationResponse({ response: body, expectedChallenge: expectedChallenge, expectedOrigin: origin, expectedRPID: rpID, requireUserVerification: true, // Enforce user verification (PIN, Biometrics) }); } catch (error: any) { console.error("Verification failed:", error); return NextResponse.json({ error: `Verification failed: ${error.message}` }, { status: 400 }); } const { verified, registrationInfo } = verification; if (verified && registrationInfo) { const { credentialPublicKey, credentialID, counter, credentialDeviceType, credentialBackedUp } = registrationInfo; // Check if authenticator with this ID already exists for any user const existingAuthenticator = await prisma.authenticator.findUnique({ where: { credentialID: Buffer.from(credentialID).toString('base64url') }, }); if (existingAuthenticator) { return NextResponse.json({ error: 'Authenticator already registered' }, { status: 409 }); // Conflict } // Save the new authenticator to the database, linked to the user await prisma.authenticator.create({ data: { userId: userId, credentialID: Buffer.from(credentialID).toString('base64url'), // Store as base64url string credentialPublicKey: Buffer.from(credentialPublicKey), // Store raw buffer counter: counter, credentialDeviceType: credentialDeviceType, credentialBackedUp: credentialBackedUp, transports: body.response.transports ?? [], // Store transports if available }, }); return NextResponse.json({ verified: true }); } else { return NextResponse.json({ error: 'Verification failed' }, { status: 400 }); } } import { NextRequest, NextResponse } from 'next/server'; import { generateAuthenticationOptions } from '@simplewebauthn/server'; import { prisma } from '@/lib/prisma'; import { Buffer } from 'buffer'; // In-memory store for challenges (replace with DB/Redis in production) const challengeStore: Record = {}; // Needs to be shared or persisted export async function POST(req: NextRequest) { // Note: This endpoint might be called *before* the user is logged in. // You might pass an email/username in the request body to find potential authenticators, // or rely on discoverable credentials (resident keys). // For simplicity here, we assume no user context initially, relying on discoverable credentials. // In a real app, you might check for a session OR accept a username/email. const rpID = process.env.RP_ID; if (!rpID) { console.error("Missing RP_ID environment variable"); return NextResponse.json({ error: 'Server configuration error' }, { status: 500 }); } try { const options = await generateAuthenticationOptions({ rpID, // Allow users to select any of their available passkeys // (If you want to scope to specific credentials, provide allowCredentials) // allowCredentials: userAuthenticators.map(auth => ({ // id: Buffer.from(auth.credentialID, 'base64url'), // type: 'public-key', // transports: auth.transports as AuthenticatorTransportFuture[] | undefined, // })), userVerification: 'preferred', // Or 'required' }); // Store the challenge temporarily. Since we don't know the user yet, // we might store it globally or use a temporary identifier. // Storing globally is insecure for production. A better approach involves // a temporary session or linking challenge to the request context. // For demo purposes, using a fixed key (highly insecure). const tempChallengeKey = 'global_auth_challenge'; challengeStore[tempChallengeKey] = options.challenge; return NextResponse.json(options); } catch (error) { console.error("Error generating authentication options:", error); return NextResponse.json({ error: 'Failed to generate authentication options' }, { status: 500 }); } } import { NextRequest, NextResponse } from 'next/server'; import { verifyAuthenticationResponse } from '@simplewebauthn/server'; import type { VerifiedAuthenticationResponse, AuthenticationResponseJSON } from '@simplewebauthn/server'; import { prisma } from '@/lib/prisma'; import { Buffer } from 'buffer'; import { encode, decode } from 'next-auth/jwt'; // To manually create session token import { cookies } from 'next/headers'; // To set session cookie // In-memory store for challenges (replace with DB/Redis in production) const challengeStore: Record = {}; // Needs to be shared or persisted export async function POST(req: NextRequest) { const body: AuthenticationResponseJSON = await req.json(); const rpID = process.env.RP_ID; const origin = process.env.AUTH_URL; const authSecret = process.env.AUTH_SECRET; // Needed to encode JWT if (!rpID || !origin || !authSecret) { console.error("Missing environment variables (RP_ID, AUTH_URL, AUTH_SECRET)"); return NextResponse.json({ error: 'Server configuration error' }, { status: 500 }); } // Retrieve the challenge (using the insecure global key for demo) const tempChallengeKey = 'global_auth_challenge'; const expectedChallenge = challengeStore[tempChallengeKey]; if (!expectedChallenge) { return NextResponse.json({ error: 'Challenge not found or expired' }, { status: 400 }); } delete challengeStore[tempChallengeKey]; // Clear challenge // Find the authenticator by its credential ID const credentialIDBase64 = body.rawId; // It's base64url encoded from the client const authenticator = await prisma.authenticator.findUnique({ where: { credentialID: credentialIDBase64 }, include: { user: true }, // Include user data }); if (!authenticator) { return NextResponse.json({ error: 'Authenticator not found' }, { status: 404 }); } let verification: VerifiedAuthenticationResponse; try { verification = await verifyAuthenticationResponse({ response: body, expectedChallenge: expectedChallenge, expectedOrigin: origin, expectedRPID: rpID, authenticator: { credentialID: Buffer.from(authenticator.credentialID, 'base64url'), // Decode from base64url string credentialPublicKey: authenticator.credentialPublicKey, // Raw buffer from DB counter: authenticator.counter, transports: authenticator.transports as AuthenticatorTransportFuture[] | undefined, }, requireUserVerification: true, // Match registration setting }); } catch (error: any) { console.error("Authentication verification failed:", error); return NextResponse.json({ error: `Verification failed: ${error.message}` }, { status: 400 }); } const { verified, authenticationInfo } = verification; if (verified) { // Update the authenticator counter in the database await prisma.authenticator.update({ where: { id: authenticator.id }, data: { counter: authenticationInfo.newCounter }, }); // --- Manually create NextAuth.js session --- const user = authenticator.user; const sessionMaxAge = 30 * 24 * 60 * 60; // 30 days in seconds (match NextAuth config if possible) const sessionExpiry = Math.floor(Date.now() / 1000) + sessionMaxAge; // Create the JWT payload (mirroring the jwt callback in auth.ts) const tokenPayload = { sub: user.id, // Subject is user ID id: user.id, name: user.name, email: user.email, picture: user.image, // Add role or other custom fields if needed // role: user.role, iat: Math.floor(Date.now() / 1000), exp: sessionExpiry, }; // Encode the JWT const sessionToken = await encode({ token: tokenPayload, secret: authSecret, maxAge: sessionMaxAge, }); // Set the session cookie const cookieName = process.env.NODE_ENV === 'production' ? '__Secure-next-auth.session-token' : 'next-auth.session-token'; cookies().set(cookieName, sessionToken, { expires: new Date(sessionExpiry * 1000), httpOnly: true, secure: process.env.NODE_ENV === 'production', path: '/', sameSite: 'lax', }); // Authentication successful, user is now logged in via cookie return NextResponse.json({ verified: true, userId: user.id }); } else { return NextResponse.json({ error: 'Authentication failed' }, { status: 400 }); } } **To Run This Project:** 1. **Install Dependencies:** bash npm install # or yarn install # or pnpm install 2. **Set Up Environment Variables:** * Create a `.env` file in the project root. * Copy the content from the provided `.env` file artifact. * **Crucially:** * Replace `"YOUR_AUTH_SECRET"` with a strong secret key. You can generate one using `openssl rand -base64 32` in your terminal. * Update `DATABASE_URL` with your actual MongoDB connection string (e.g., from MongoDB Atlas). * Verify `RP_ID`, `RP_NAME`, and `AUTH_URL`. For local development, `localhost` and `http://localhost:3000` are usually correct. For deployment, use your actual domain and URL. 3. **Set Up Database:** * Ensure your MongoDB server is running or accessible. * Apply the Prisma schema to your database: ```bash npx prisma db push ``` (This command synchronizes your database schema with your `prisma/schema.prisma` file. It's suitable for development but use `prisma migrate dev` for more robust migration management). 4. **Run the Development Server:** ```bash npm run dev # or yarn dev # or pnpm dev ``` 5. **Access the Application:** Open your browser to `http://localhost:3000`. You should see the home page. You can navigate to `/login`. The email/password login is a basic placeholder (it only checks if the email exists, **do not use this credential logic in production without hashing passwords**). The passkey buttons and API routes are placeholders and need further implementation using libraries like `@simplewebauthn/browser` on the client-side to interact with the browser's WebAuthn API. The dashboard is protected and requires login.