typescriptadvanced
Next.js Middleware for Authentication
Protect routes with Next.js middleware using token verification and role-based redirects.
typescriptPress ⌘/Ctrl + Shift + C to copy
// middleware.ts (at project root)
import { NextRequest, NextResponse } from 'next/server';
const protectedRoutes = ['/dashboard', '/settings', '/admin'];
const authRoutes = ['/login', '/register'];
export function middleware(request: NextRequest) {
const { pathname } = request.nextUrl;
const token = request.cookies.get('auth-token')?.value;
// Check if route is protected
const isProtected = protectedRoutes.some((route) =>
pathname.startsWith(route)
);
const isAuthRoute = authRoutes.some((route) =>
pathname.startsWith(route)
);
// Redirect unauthenticated users to login
if (isProtected && !token) {
const loginUrl = new URL('/login', request.url);
loginUrl.searchParams.set('callbackUrl', pathname);
return NextResponse.redirect(loginUrl);
}
// Redirect authenticated users away from auth pages
if (isAuthRoute && token) {
return NextResponse.redirect(new URL('/dashboard', request.url));
}
// Role-based access control
if (pathname.startsWith('/admin') && token) {
// Decode token to check role (simplified)
const payload = JSON.parse(atob(token.split('.')[1]));
if (payload.role !== 'admin') {
return NextResponse.redirect(new URL('/dashboard', request.url));
}
}
// Add security headers
const response = NextResponse.next();
response.headers.set('X-Frame-Options', 'DENY');
response.headers.set('X-Content-Type-Options', 'nosniff');
return response;
}
export const config = {
matcher: [
'/((?!api|_next/static|_next/image|favicon.ico).*)',
],
};Use Cases
- Protecting authenticated routes at the edge
- Role-based access control for admin pages
- Adding security headers to all responses
Tags
Related Snippets
Similar patterns you can reuse in the same workflow.
typescriptadvanced
Middleware Chain Pattern
Compose multiple middleware functions for auth, rate limiting, and geolocation in Next.js middleware.
Best for: Auth guard middleware
#nextjs#middleware
typescriptadvanced
Authentication Middleware with Session Check
Protect routes with middleware that validates session tokens and redirects unauthenticated users.
Best for: route protection
#nextjs#auth
typescriptadvanced
Rate Limiter for Edge Functions
Implement sliding window rate limiting in Next.js middleware using in-memory or KV store.
Best for: API protection
#nextjs#rate-limiting
typescriptintermediate
Authentication Middleware Guard
Next.js middleware that checks auth tokens on protected routes and redirects unauthenticated users to login.
Best for: Dashboard access control
#middleware#authentication