Tujuan Pembelajaran

Memahami perbedaan access token vs refresh token
Mampu mengimplementasikan auto-refresh dengan interceptor
Mengerti strategi session management yang aman

Analogi

Diagram


      Access Token = Tiket Masuk Bioskop:
- Berlaku 15 menit (expire)
- Pamerkan untuk setiap request

Refresh Token = Kartu Membership Bioskop:
- Berlaku 30 hari (long-lived)
- Gunakan untuk dapat tiket baru (access token baru)
- Kalau kartu membership hilang → harus daftar ulang (login)

Tiket nya sering expire = aman. Membership jarang expire = nyaman.

Access token seperti tiket — short-lived, dipakai setiap request. Refresh token seperti kartu membership — long-lived, untuk mendapatkan tiket baru. Dua-duanya harus aman.

Penjelasan Konsep

Session management di mobile lebih kompleks dari web karena: (1) App tidak punya cookies yang dikelola browser. (2) App bisa di-background/di-kill kapan saja. (3) Token harus survive app restart.

Access token: JWT short-lived (15-60 menit). Dikirim di Authorization header setiap request. Expire cepat untuk meminimalkan damage kalau bocor.

Refresh token: long-lived (7-90 hari). Disimpan di secure-store (TIDAK di AsyncStorage). Hanya digunakan untuk mendapatkan access token baru — tidak dikirim di setiap request.

Token refresh flow: (1) Request API → 401 Unauthorized (access token expire). (2) Interceptor tangkap 401 → request refresh token dari secure-store. (3) POST /auth/refresh dengan refresh token. (4) Server validasi refresh token → return access token baru. (5) Simpan access token baru di memory (bukan secure-store). (6) Retry original request dengan token baru. (7) Kalau refresh juga gagal → force logout.

Concurrent refresh problem: kalau banyak request 401 bersamaan → refresh token dipanggil berkali-kali. Solusi: queue request saat refresh in-progress, flush queue setelah refresh sukses.

Session persistence: user tidak seharusnya login setiap buka app. Strategi: (1) Simpan refresh token di secure-store. (2) Saat app start → cek refresh token → refresh access token di background. (3) Kalau sukses → user masuk tanpa login screen. (4) Kalau gagal → login screen.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan access token vs refresh token., mampu mengimplementasikan auto-refresh dengan interceptor., dan mengerti strategi session management yang aman. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Session Management & Token Refresh, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Access token seperti tiket — short-lived, dipakai setiap request. Refresh token seperti kartu membership — long-lived, untuk mendapatkan tiket baru. Dua-duanya harus aman. 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 tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. isRefreshing flag untuk cegah concurrent refresh. failedQueue untuk antri request yang gagal saat refresh. Setelah refresh sukses, retry semua request di queue.

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

tsx

let isRefreshing = false;
let failedQueue: Array<{ resolve: Function; reject: Function }> = [];

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    if (error.response?.status === 401 && !originalRequest._retry) {
      if (isRefreshing) return new Promise((resolve, reject) => { failedQueue.push({ resolve, reject }); });
      originalRequest._retry = true;
      isRefreshing = true;
      try {
        const newToken = await refreshAccessToken();
        failedQueue.forEach(({ resolve }) => resolve(newToken));
        failedQueue = [];
        originalRequest.headers.Authorization = `Bearer ${newToken}`;
        return api(originalRequest);
      } catch (err) {
        failedQueue.forEach(({ reject }) => reject(err));
        await logout();
      } finally { isRefreshing = false; }
    }
    return Promise.reject(error);
  }
);

Penjelasan Kode

isRefreshing flag untuk cegah concurrent refresh. failedQueue untuk antri request yang gagal saat refresh. Setelah refresh sukses, retry semua request di queue.

Prompt AI

Saya pakai JWT access token (15 menit) + refresh token (7 hari). Bagaimana cara optimal handle token refresh di React Native dengan: (a) concurrent request prevention, (b) background refresh sebelum expire, (c) multi-tab/device session management?

Pertanyaan Reflektif

Desain session management untuk aplikasi-mu. Berapa lama access token expire? Berapa lama refresh token expire? Apa trade-off antara keamanan dan kenyamanan?