Autentikasi Token: Login Aman ala API Modern

Masalahnya: HTTP itu stateless

Di modul pertama kita belajar HTTP tidak ingat apa-apa. Jadi bagaimana server tahu bahwa request ke /api/profil datang dari Budi yang sudah login, bukan dari orang asing? Jawabannya: setiap request membawa token, semacam kartu identitas digital yang membuktikan "saya sudah login".

Alur login dengan token

Alurnya selalu mirip, apa pun framework backend-nya:

1. User mengirim username dan password lewat POST /api/login.
2. Server memverifikasi, lalu membuat token dan mengembalikannya.
3. Frontend menyimpan token itu.
4. Setiap request berikutnya menyertakan token di header Authorization: Bearer <token>.
5. Server memeriksa token di setiap request. Token kedaluwarsa? User dianggap logout.

Anatomi JWT

Token paling populer bernama JWT (JSON Web Token). Bentuknya tiga segmen yang dipisah titik:

• Segmen 1 (header): info algoritma penandatanganan.
• Segmen 2 (payload): data user, misalnya id dan nama. Ini cuma di-encode base64, bukan dienkripsi, jadi siapa pun bisa membacanya.
• Segmen 3 (signature): tanda tangan yang dibuat server dengan secret key. Inilah yang mencegah token dipalsukan.

Kamu bisa menempel token ke situs seperti jwt.io untuk melihat isinya, bagus untuk belajar.

Praktik di JavaScript

// 1. login dan simpan token
async function login(email, password) {
  const res = await fetch("https://api.example.com/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  });
  if (!res.ok) throw new Error("Login gagal");
  const data = await res.json();
  localStorage.setItem("token", data.token);
  return data.token;
}

// 2. pakai token di request berikutnya
async function ambilProfil() {
  const token = localStorage.getItem("token");
  const res = await fetch("https://api.example.com/profil", {
    headers: { "Authorization": "Bearer " + token },
  });
  if (res.status === 401) {
    // token kedaluwarsa: bersihkan dan arahkan ke login
    localStorage.removeItem("token");
    throw new Error("Sesi berakhir, silakan login lagi.");
  }
  return res.json();
}

Banyak API juga memberi refresh token: token berumur panjang yang dipakai untuk meminta access token baru tanpa memaksa user login ulang. Access token dibuat pendek (menitan sampai jam) agar kalau bocor, masa berlakunya singkat.

Catatan teknis: Menyimpan token di localStorage itu praktis tapi rentan XSS: kalau ada script jahat yang lolos ke halamanmu, ia bisa membaca token itu. Alternatif yang lebih aman adalah httpOnly cookie, yang tidak bisa diakses JavaScript sama sekali, tapi butuh konfigurasi backend (dan urusan CORS yang rapi). Aturan praktisnya: untuk project belajar, localStorage boleh; untuk aplikasi production dengan data sensitif, diskusikan httpOnly cookie dengan tim backend. Dan ingat: jangan pernah menaruh password atau data rahasia di payload JWT, karena isinya bisa dibaca siapa saja.