Next.js Security

Advanced Authentication

Multi-factor auth, session management, OAuth flows, and JWT strategies.

Advertisement

Advanced Authentication

Multi-factor auth, session management, OAuth flows, and JWT strategies.

Overview

Advanced auth patterns provide secure user authentication.

Key Concepts

  • Multi-Factor Auth — Additional security layers
  • Session Management — Handle session lifecycle
  • OAuth Flows — Authorization code, PKCE
  • JWT Strategies — Access and refresh tokens
  • Account Linking — Connect multiple providers

Code Examples

// MFA verification
// app/verify-mfa/page.js
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function VerifyMFA() {
  const [code, setCode] = useState('');
  const [error, setError] = useState('');
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    const result = await verifyMFACode(code);
    
    if (result.success) {
      router.push('/dashboard');
    } else {
      setError('Invalid code');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Enter MFA Code</h1>
      <input
        type="text"
        value={code}
        onChange={(e) => setCode(e.target.value)}
        placeholder="6-digit code"
        maxLength={6}
      />
      {error && <p className="text-red-500">{error}</p>}
      <button type="submit">Verify</button>
    </form>
  );
}

// Session refresh
// lib/auth.js
import { SignJWT, jwtVerify } from 'jose';

export async function createTokens(user) {
  const accessToken = await new SignJWT({ sub: user.id, role: user.role })
    .setProtectedHeader({ alg: 'HS256' })
    .setExpirationTime('15m')
    .sign(secret);

  const refreshToken = await new SignJWT({ sub: user.id })
    .setProtectedHeader({ alg: 'HS256' })
    .setExpirationTime('7d')
    .sign(secret);

  return { accessToken, refreshToken };
}

export async function refreshAccessToken(refreshToken) {
  try {
    const { payload } = await jwtVerify(refreshToken, secret);
    const user = await getUser(payload.sub);
    return createTokens(user);
  } catch {
    throw new Error('Invalid refresh token');
  }
}

Practice

Implement MFA with TOTP and session management with refresh tokens.