Auth trong Next.js: Middleware, Cookie và mấy thứ không ai nói cho bạn

1// middleware.ts
2import { NextResponse } from 'next/server'
3import type { NextRequest } from 'next/server'
4
5export function middleware(request: NextRequest) {
6  const { pathname } = request.nextUrl
7
8  const protectedPaths = ['/dashboard', '/admin', '/settings']
9  const isProtected = protectedPaths.some(p => pathname.startsWith(p))
10
11  if (isProtected) {
12    const token = request.cookies.get('session')
13    if (!token) {
14      return NextResponse.redirect(new URL('/login', request.url))
15    }
16  }
17
18  return NextResponse.next()
19}
20
21export const config = {
22  matcher: [
23    '/((?!_next/static|_next/image|favicon.ico|api/public).*)',
24  ],
25}

1// app/actions/auth.ts
2'use server'
3
4import { cookies } from 'next/headers'
5import { redirect } from 'next/navigation'
6import { SignJWT } from 'jose'
7
8export async function login(formData: FormData) {
9  const email = formData.get('email') as string
10  const password = formData.get('password') as string
11
12  // Verify credentials với database
13  const user = await verifyCredentials(email, password)
14  if (!user) {
15    return { error: 'Invalid credentials' }
16  }
17
18  // Tạo JWT
19  const token = await new SignJWT({ 
20    userId: user.id, 
21    role: user.role 
22  })
23    .setProtectedHeader({ alg: 'HS256' })
24    .setExpirationTime('7d')
25    .sign(new TextEncoder().encode(process.env.JWT_SECRET))
26
27  // Set httpOnly cookie
28  cookies().set('session', token, {
29    httpOnly: true,
30    secure: process.env.NODE_ENV === 'production',
31    sameSite: 'lax',
32    maxAge: 60 * 60 * 24 * 7, // 7 ngày
33    path: '/'
34  })
35
36  redirect('/dashboard')
37}
38
39export async function logout() {
40  cookies().delete('session')
41  redirect('/login')
42}

1// middleware.ts version đầy đủ hơn
2import { jwtVerify } from 'jose'
3
4async function verifyToken(token: string) {
5  try {
6    const { payload } = await jwtVerify(
7      token,
8      new TextEncoder().encode(process.env.JWT_SECRET)
9    )
10    return payload
11  } catch {
12    return null
13  }
14}
15
16export async function middleware(request: NextRequest) {
17  const { pathname } = request.nextUrl
18  const token = request.cookies.get('session')?.value
19
20  // Admin routes check thêm role
21  if (pathname.startsWith('/admin')) {
22    if (!token) return NextResponse.redirect(new URL('/login', request.url))
23
24    const payload = await verifyToken(token)
25    if (!payload || payload.role !== 'admin') {
26      return NextResponse.redirect(new URL('/403', request.url))
27    }
28  }
29
30  // Dashboard và các protected routes thông thường
31  if (pathname.startsWith('/dashboard')) {
32    if (!token) return NextResponse.redirect(new URL('/login', request.url))
33
34    const payload = await verifyToken(token)
35    if (!payload) {
36      // Token expired hoặc invalid clear cookie và redirect
37      const response = NextResponse.redirect(new URL('/login', request.url))
38      response.cookies.delete('session')
39      return response
40    }
41  }
42
43  return NextResponse.next()
44}

1// Trong JWT payload
2{
3  userId: 'user_123',
4  role: 'admin', // 'admin' | 'editor' | 'viewer'
5  permissions: ['read:posts', 'write:posts', 'delete:posts']
6}

1// app/dashboard/layout.tsx
2import { cookies } from 'next/headers'
3import { jwtVerify } from 'jose'
4
5async function getSession() {
6  const token = cookies().get('session')?.value
7  if (!token) return null
8
9  try {
10    const { payload } = await jwtVerify(
11      token,
12      new TextEncoder().encode(process.env.JWT_SECRET)
13    )
14    return payload
15  } catch {
16    return null
17  }
18}
19
20export default async function DashboardLayout({ children }) {
21  const session = await getSession()
22
23  return (
24    <div>
25      <nav>
26        {session?.role === 'admin' && (
27          <a href="/admin">Admin Panel</a>
28        )}
29      </nav>
30      {children}
31    </div>
32  )
33}

1// middleware.ts thêm rate limiting
2import { Ratelimit } from '@upstash/ratelimit'
3import { Redis } from '@upstash/redis'
4
5const ratelimit = new Ratelimit({
6  redis: Redis.fromEnv(),
7  limiter: Ratelimit.slidingWindow(5, '1 m'), // 5 requests/phút
8})
9
10// Trong middleware, apply cho /api/login
11if (pathname === '/api/login') {
12  const ip = request.ip ?? '127.0.0.1'
13  const { success } = await ratelimit.limit(ip)
14
15  if (!success) {
16    return new NextResponse('Too many requests', { status: 429 })
17  }
18}

1// next.config.js
2const securityHeaders = [
3  { key: 'X-Frame-Options', value: 'DENY' },
4  { key: 'X-Content-Type-Options', value: 'nosniff' },
5  {
6    key: 'Content-Security-Policy',
7    value: `default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';`
8  },
9]
10
11module.exports = {
12  async headers() {
13    return [{
14      source: '/(.*)',
15      headers: securityHeaders,
16    }]
17  },
18}