Add 2FA to your Next.js app in 30 minutes with Better Auth

bun add better-auth

import { betterAuth } from 'better-auth';
import { twoFactor } from 'better-auth/plugins';
import { prismaAdapter } from 'better-auth/adapters/prisma';
import { db } from '@/lib/db/client';

export const auth = betterAuth({
  database: prismaAdapter(db, { provider: 'postgresql' }),
  emailAndPassword: { enabled: true },
  plugins: [
    twoFactor({
      issuer: 'CREA.MBA',
    }),
  ],
});

model TwoFactor {
  id          String @id
  secret      String
  backupCodes String
  userId      String
  user        User   @relation(fields: [userId], references: [id], onDelete: Cascade)
}

bunx prisma migrate dev --name add-2fa

import { auth } from '@/lib/auth/server';
import { headers } from 'next/headers';
import { NextResponse } from 'next/server';

export async function POST() {
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const result = await auth.api.enableTwoFactor({
    body: { password: '' }, // ask for password in production
    headers: await headers(),
  });

  return NextResponse.json({
    qrCode: result.totpURI,
    backupCodes: result.backupCodes,
  });
}

'use client';
import { useState } from 'react';
import QRCode from 'react-qr-code';

export function Enable2FA() {
  const [qrCode, setQrCode] = useState<string | null>(null);
  const [backupCodes, setBackupCodes] = useState<string[]>([]);
  const [verificationCode, setVerificationCode] = useState('');

  async function startSetup() {
    const res = await fetch('/api/auth/2fa/enable', { method: 'POST' });
    const data = await res.json();
    setQrCode(data.qrCode);
    setBackupCodes(data.backupCodes);
  }

  async function verifyAndActivate() {
    const res = await fetch('/api/auth/2fa/verify', {
      method: 'POST',
      body: JSON.stringify({ code: verificationCode }),
      headers: { 'Content-Type': 'application/json' },
    });
    if (res.ok) alert('2FA enabled');
  }

  if (!qrCode) {
    return <button onClick={startSetup}>Enable 2FA</button>;
  }

  return (
    <div>
      <p>Scan with your authenticator app:</p>
      <QRCode value={qrCode} />
      <p>Backup codes (save these):</p>
      <ul>
        {backupCodes.map((c) => (
          <li key={c}>
            <code>{c}</code>
          </li>
        ))}
      </ul>
      <input
        value={verificationCode}
        onChange={(e) => setVerificationCode(e.target.value)}
        placeholder="6-digit code"
      />
      <button onClick={verifyAndActivate}>Verify</button>
    </div>
  );
}

async function handleLogin(email: string, password: string) {
  const res = await auth.signIn.email({ email, password });
  if (res.requiresTwoFactor) {
    setShow2FAInput(true);
    return;
  }
  // full login
}

async function handle2FACode(code: string) {
  const res = await auth.twoFactor.verifyTotp({ code });
  if (res.success) {
    // full login
  }
}