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.