Tujuan Pembelajaran

Memahami perbedaan secure-store vs AsyncStorage
Mampu menggunakan expo-secure-store untuk data sensitif
Mengerti kapan data HARUS di secure-store

Analogi

Diagram


      AsyncStorage = Dompet di Atas Meja:
- Semua orang bisa lihat (kalau device di-root)
- Tidak ada enkripsi

Secure-Store = Brankas:
- Terenkripsi dengan hardware key
- Hanya bisa dibuka oleh app yang menyimpannya
- Bahkan device backup tidak bisa baca (iOS Keychain)

Untuk token, kredensial, API key → SELALU secure-store.

Secure-store seperti brankas — terenkripsi hardware. AsyncStorage seperti dompet di meja — tidak terenkripsi. Data sensitif WAJIB di brankas.

Penjelasan Konsep

expo-secure-store menyimpan data sensitif dengan enkripsi hardware: iOS Keychain (hardware-encrypted) dan Android Keystore (hardware-backed). Berbeda dengan AsyncStorage yang plain text.

API: setItemAsync(key, value, options), getItemAsync(key, options), deleteItemAsync(key, options). Options: (1) requireAuthentication: true — item hanya bisa diakses setelah biometric auth. (2) keychainAccessible: kapan item bisa diakses (whenUnlocked, afterFirstUnlock, always).

Keychain accessibility (iOS): (1) WHEN_UNLOCKED — hanya saat device unlocked. Default. (2) AFTER_FIRST_UNLOCK — setelah unlock pertama setelah reboot. Untuk data yang perlu diakses di background. (3) WHEN_PASSCODE_SET_THIS_DEVICE_ONLY — paling aman.

What to store: (1) Auth token (JWT). (2) Refresh token. (3) API keys. (4) User PIN/password hash. (5) Encryption keys. What NOT to store: (1) Data besar (>1MB) — bukan file storage. (2) Temporary cache — pakai MMKV.

requireAuthentication pattern: simpan token dengan requireAuthentication: true → setiap kali baca token, device minta biometric. Perfect untuk aplikasi finance.

expo-secure-store vs react-native-keychain: secure-store lebih simpel, cukup untuk kebanyakan kasus. keychain lebih fleksibel (biometric-specific keys, multiple service levels).

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan secure-store vs AsyncStorage., mampu menggunakan expo-secure-store untuk data sensitif., dan mengerti kapan data HARUS di secure-store. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca expo-secure-store untuk Kredensial, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Secure-store seperti brankas — terenkripsi hardware. AsyncStorage seperti dompet di meja — tidak terenkripsi. Data sensitif WAJIB di brankas. 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. requireAuthentication: true — token baru bisa dibaca setelah biometric auth. WHEN_UNLOCKED: token hanya bisa diakses saat device unlocked (tidak bisa di background task).

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

import * as SecureStore from "expo-secure-store";

async function saveToken(token: string) {
  await SecureStore.setItemAsync("authToken", token, {
    requireAuthentication: true,
    keychainAccessible: SecureStore.WHEN_UNLOCKED,
  });
}

async function getToken() {
  return SecureStore.getItemAsync("authToken", { requireAuthentication: true });
}

Penjelasan Kode

requireAuthentication: true — token baru bisa dibaca setelah biometric auth. WHEN_UNLOCKED: token hanya bisa diakses saat device unlocked (tidak bisa di background task).

Prompt AI

Desain credential management module: simpan token di secure-store dengan biometric protection, refresh token otomatis sebelum expire, hapus semua kredensial saat user logout. Berikan kode TypeScript lengkap.

Pertanyaan Reflektif

Cek aplikasi di HP-mu — adakah yang menyimpan token dengan tidak aman? Apa konsekuensinya kalau token bocor?