Authentication in Next.js (App Router): sessions, authorization, Proxy

'use server'
import { redirect } from 'next/navigation'
import { createSession, deleteSession } from '@/app/lib/session'
import { checkCredentials } from '@/app/lib/users'

export type LoginState = { error?: string } | undefined

export async function login(_state: LoginState, formData: FormData): Promise<LoginState> {
  const email = String(formData.get('email') ?? '')
  const password = String(formData.get('password') ?? '')
  const user = checkCredentials(email, password)
  // Một thông báo chung: không cho biết email có tồn tại hay không.
  if (!user) return { error: 'Email hoặc mật khẩu không đúng.' }
  await createSession(user.id, user.role)
  redirect('/dashboard')
}

export async function logout() {
  await deleteSession()
  redirect('/login')
}

'use client'
import { useActionState } from 'react'
import { login } from '@/app/actions/auth'

export default function LoginPage() {
  const [state, action, pending] = useActionState(login, undefined)
  return (
    <form action={action}>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      {state?.error && <p role="alert">{state.error}</p>}
      <button disabled={pending}>Đăng nhập</button>
    </form>
  )
}

import 'server-only'
import { scryptSync, timingSafeEqual } from 'node:crypto'
import type { Role } from '@/app/lib/session'

// Thay bằng bảng người dùng trong cơ sở dữ liệu. Mật khẩu chỉ lưu dạng băm (scrypt + salt riêng).
const USERS = [
  { id: '1', email: 'admin@example.com', role: 'admin' as Role, salt: 'a1', hash: scryptSync('mat-khau-thu', 'a1', 32).toString('hex') },
  { id: '2', email: 'user@example.com', role: 'user' as Role, salt: 'b2', hash: scryptSync('mat-khau-thu', 'b2', 32).toString('hex') },
]

export function checkCredentials(email: string, password: string) {
  const user = USERS.find((u) => u.email === email)
  if (!user) return null
  const ok = timingSafeEqual(scryptSync(password, user.salt, 32), Buffer.from(user.hash, 'hex'))
  return ok ? user : null
}

import 'server-only'
import { SignJWT, jwtVerify } from 'jose'
import { cookies } from 'next/headers'

export type Role = 'admin' | 'user'
export type SessionPayload = { userId: string; role: Role; expiresAt: Date }

const encodedKey = new TextEncoder().encode(process.env.SESSION_SECRET)

export async function encrypt(payload: SessionPayload) {
  return new SignJWT(payload)
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuedAt()
    .setExpirationTime('7d')
    .sign(encodedKey)
}

export async function decrypt(session: string | undefined = '') {
  try {
    const { payload } = await jwtVerify<SessionPayload>(session, encodedKey, { algorithms: ['HS256'] })
    return payload
  } catch {
    return null
  }
}

export async function createSession(userId: string, role: Role) {
  const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
  const session = await encrypt({ userId, role, expiresAt })
  const cookieStore = await cookies()
  cookieStore.set('session', session, {
    httpOnly: true,
    secure: true,
    expires: expiresAt,
    sameSite: 'lax',
    path: '/',
  })
}

export async function deleteSession() {
  const cookieStore = await cookies()
  cookieStore.delete('session')
}

import 'server-only'
import { cache } from 'react'
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { decrypt } from '@/app/lib/session'

// Đọc phiên, trả null khi không có: dùng cho Route Handler (trả 401) và Server Action.
export const getSession = cache(async () => {
  const session = await decrypt((await cookies()).get('session')?.value)
  return session?.userId ? { userId: session.userId, role: session.role } : null
})

// Dùng cho trang: không có phiên thì chuyển về /login.
export const verifySession = cache(async () => {
  const session = await getSession()
  if (!session) redirect('/login')
  return session
})

import { verifySession } from '@/app/lib/dal'

export default async function DashboardPage() {
  const session = await verifySession()
  return <h1>Xin chào, người dùng {session.userId} ({session.role})</h1>
}

import { getSession } from '@/app/lib/dal'

export async function GET() {
  const session = await getSession()
  if (!session) return new Response(null, { status: 401 })
  if (session.role !== 'admin') return new Response(null, { status: 403 })
  return Response.json({ ok: true })
}

import { NextRequest, NextResponse } from 'next/server'
import { decrypt } from '@/app/lib/session'

const protectedRoutes = ['/dashboard']
const publicRoutes = ['/login']

// Kiểm tra lạc quan: chỉ đọc cookie, không gọi cơ sở dữ liệu. Không thay cho kiểm tra trong DAL.
export default async function proxy(req: NextRequest) {
  const path = req.nextUrl.pathname
  const session = await decrypt(req.cookies.get('session')?.value)

  if (protectedRoutes.includes(path) && !session?.userId) {
    return NextResponse.redirect(new URL('/login', req.nextUrl))
  }
  if (publicRoutes.includes(path) && session?.userId) {
    return NextResponse.redirect(new URL('/dashboard', req.nextUrl))
  }
  return NextResponse.next()
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}