Autentikasi Sisi Klien: Cookie vs localStorage.

Setelah pengguna berhasil login, aplikasi butuh cara menyimpan status login tersebut agar tidak perlu login ulang di setiap permintaan. Dua pendekatan paling umum untuk aplikasi React dan Express adalah menyimpan token lewat cookie atau lewat localStorage — keduanya punya trade-off keamanan yang berbeda.

Menyimpan Token di localStorage

// Setelah login berhasil
localStorage.setItem("token", data.token);

// Mengirim token di setiap request
fetch("/api/profil", {
  headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
});

localStorage mudah diakses dari JavaScript, tapi kelemahan utamanya justru di situ: skrip apapun yang berhasil disusupkan ke halaman (lewat celah XSS) juga bisa membaca token dari localStorage.

Menyimpan Token di Cookie httpOnly

// Express — mengatur cookie saat login berhasil
app.post("/login", (req, res) => {
  const token = buatToken(pengguna);

  res.cookie("token", token, {
    httpOnly: true,   // tidak bisa diakses lewat JavaScript
    secure: true,      // hanya dikirim lewat HTTPS
    sameSite: "strict", // mencegah cookie dikirim dari situs lain
  });

  res.json({ pesan: "Login berhasil" });
});

Cookie dengan flag httpOnly tidak bisa dibaca lewat document.cookie, sehingga jauh lebih aman dari serangan XSS dibanding localStorage.

Mengirim Cookie dari Frontend

fetch("/api/profil", {
  credentials: "include", // wajib agar cookie ikut terkirim ke server berbeda origin
});

Perbandingan Risiko Keamanan

localStorage rentan terhadap XSS (skrip jahat membaca token langsung), sementara cookie rentan terhadap CSRF (situs lain memicu permintaan memakai cookie pengguna tanpa sepengetahuannya) jika tidak dikonfigurasi dengan benar. Flag sameSite: "strict" atau "lax" pada cookie sudah cukup mengurangi risiko CSRF di kebanyakan kasus modern.

Middleware Verifikasi Token di Express

function verifikasiToken(req, res, next) {
  const token = req.cookies.token;

  if (!token) {
    return res.status(401).json({ pesan: "Belum login" });
  }

  try {
    req.pengguna = verifikasiJwt(token);
    next();
  } catch {
    res.status(401).json({ pesan: "Token tidak valid" });
  }
}

app.get("/api/profil", verifikasiToken, (req, res) => {
  res.json(req.pengguna);
});

Rekomendasi Praktis

Untuk kebanyakan aplikasi full-stack modern di mana frontend dan backend berada dalam kendali penuh tim yang sama, cookie httpOnly umumnya jadi pilihan yang lebih aman dibanding localStorage. localStorage lebih masuk akal untuk kasus tertentu seperti aplikasi yang berkomunikasi dengan banyak API pihak ketiga berbeda domain, dengan catatan risiko XSS harus ditangani serius lewat sanitasi input dan Content Security Policy.

Kesimpulan

Tidak ada metode penyimpanan token yang sempurna tanpa trade-off — cookie httpOnly unggul melawan XSS tapi butuh penanganan CSRF, sementara localStorage lebih sederhana diimplementasikan tapi lebih rentan bila aplikasi punya celah XSS yang belum tertangani. Memilih di antara keduanya sebaiknya didasarkan pada arsitektur aplikasi dan tingkat kontrol tim terhadap seluruh permukaan aplikasinya.