Tujuan Pembelajaran

Mampu mengimplementasikan Authorization Code + PKCE dari scratch
Memahami state parameter untuk CSRF protection di OAuth flow
Mampu mengimplementasikan token refresh flow

Analogi

Diagram


      PKCE = Tiket + Stempel:

1. Kamu pesan tiket online → dapat kode booking (code_challenge)
2. Sampai venue, tunjukkan kartu identitas yang match (code_verifier)
3. Panitia verifikasi: kartu identitas match dengan kode booking? → kasih tiket masuk (access token)

Kalaupun kode booking bocor:
Pencuri tidak bisa masuk karena tidak punya kartu identitas yang match.
Inilah PKCE.

PKCE seperti sistem tiket + verifikasi identitas — kode booking saja tidak cukup, harus diverifikasi dengan identitas asli.

Penjelasan Konsep

Authorization Code + PKCE adalah standard modern untuk OAuth — aman untuk SPA, mobile, dan server-side apps.

Flow lengkap: (1) Generate code_verifier (random string, 43-128 chars) + code_challenge (SHA256 hash dari verifier, base64url encoded). (2) Redirect user ke authorization server dengan code_challenge. (3) User login dan authorize. (4) Authorization server redirect kembali dengan authorization code. (5) Client menukar code + code_verifier ke token endpoint. (6) Authorization server verifikasi bahwa SHA256(code_verifier) == code_challenge. (7) Return access_token + refresh_token.

State parameter: random string yang dikirim di authorization request dan diperiksa di callback. Mencegah CSRF — attacker tidak bisa membuat user login ke akun attacker.

Token refresh: Access token short-lived (15-60 menit). Saat expired, gunakan refresh token untuk dapat access token baru. Implementasi: interceptor di API client — kalau dapat 401, coba refresh token. Kalau gagal, redirect ke login.

Security: (1) JANGAN simpan access token di localStorage (XSS vulnerable). Gunakan httpOnly cookie atau BFF pattern. (2) Rotate refresh token setiap digunakan. (3) Batasi scope token seminimal mungkin.

Inti yang Perlu Dipahami

Bagian ini berfokus pada mampu mengimplementasikan Authorization Code + PKCE dari scratch., memahami state parameter untuk CSRF protection di OAuth flow., dan mampu mengimplementasikan token refresh flow. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Authorization Code Flow + PKCE, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

PKCE seperti sistem tiket + verifikasi identitas — kode booking saja tidak cukup, harus diverifikasi dengan identitas asli. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// Token refresh interceptor
async function apiCall(url: string, options: RequestInit) {
  let res = await fetch(url, {
    ...options,
    headers: { ...options.headers, Authorization: `Bearer ${accessToken}` },
  });
  
  if (res.status === 401) {
    // Token expired, coba refresh
    const newTokens = await fetch('/api/auth/refresh', {
      method: 'POST',
      body: JSON.stringify({ refreshToken }),
    }).then(r => r.json());
    
    if (newTokens.error) throw new Error('Session expired');
    
    // Update stored tokens & retry original request
    saveTokens(newTokens);
    return fetch(url, {
      ...options,
      headers: { ...options.headers, Authorization: `Bearer ${newTokens.accessToken}` },
    });
  }
  
  return res;
}

Prompt AI

Implementasi OAuth 2.0 PKCE flow untuk SPA (React) + backend (Hono). Include: login, callback, token refresh interceptor, dan session management. Minta AI review security-nya.

Pertanyaan Reflektif

Apakah aplikasi-mu handle token refresh dengan benar? Kalau user buka tab dan access token sudah expired, apakah aplikasi otomatis refresh atau user harus login ulang?