Implementasi Autentikasi JWT & Refresh Token dengan HttpOnly Secure Cookie

Mengapa LocalStorage Berbahaya untuk Token?

Menyimpan token JWT di window.localStorage memudahkan script pihak ketiga yang disusupkan lewat celah XSS (Cross-Site Scripting) untuk mencuri token dan membajak sesi user.

Solusi: HttpOnly Cookies

Dengan flag HttpOnly, JavaScript browser tidak memiliki akses membaca nilai cookie. Token hanya dikirimkan otomatis oleh browser pada header HTTP request ke domain yang sah.

Dual-Token Architecture

• Access Token: Berumur pendek (15 menit), digunakan untuk mengakses protected endpoint.
• Refresh Token: Berumur panjang (7 hari), disimpan dalam database dan dirotasi setiap kali digunakan untuk meminta Access Token baru.

import { cookies } from 'next/headers';

export async function setAuthCookies(accessToken: string, refreshToken: string) {
  const cookieStore = await cookies();

  // Access Token Cookie
  cookieStore.set('asdev_access_token', accessToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    maxAge: 15 * 60, // 15 menit
    path: '/',
  });

  // Refresh Token Cookie
  cookieStore.set('asdev_refresh_token', refreshToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict',
    maxAge: 7 * 24 * 60 * 60, // 7 hari
    path: '/api/v1/auth/refresh',
  });
}