Belajar React Native - Authentication & Authorization

#Pendahuluan

Semua aplikasi yang menyimpan data pribadi butuh memastikan pemiliknya memang pengguna yang sah. Autentikasi adalah gerbangnya — dan di mobile, gerbang ini punya tantangan khusus: token harus aman di perangkat, dan sesi harus tetap berjalan saat aplikasi dibuka lagi.

Episode 15 membahas autentikasi dan otorisasi: JWT dan OAuth 2.1, refresh token flow dengan interceptor Axios, autentikasi biometrik memakai Face ID dan sidik jari, SSO, serta prinsip keamanan bahwa input dari klien tidak boleh dipercaya.

#JWT dan OAuth 2.1

#Token Access dan Refresh

JWT adalah format token yang umum dipakai untuk mengidentifikasi user: payload berisi klaim, ditandatangani server. Alur modern memakai dua token: access token berumur pendek untuk setiap request, dan refresh token berumur panjang untuk mendapatkan access token baru.

#OAuth 2.1

OAuth 2.1 menggabungkan praktik terbaik dari OAuth 2.0 — Authorization Code with PKCE untuk aplikasi mobile, tanpa client secret di sisi klien. PKCE memastikan bahwa pertukaran kode tidak bisa dicegat. Untuk aplikasi mobile yang bukan aplikasi server-side, pola PKCE adalah standar yang benar.

#Refresh Token Flow

#Interceptor Axios

Access token berakhir cepat. Saat request menolak dengan status 401, aplikasi harus menyegarkan access token dengan refresh token, lalu mengulang request. Semua ini otomatis di interceptor:

Interceptor refresh token

let refreshPromise = null;
 
api.interceptors.response.use(
  (res) => res,
  async (error) => {
    const status = error.response?.status;
    if (status !== 401) return Promise.reject(error);
 
    if (!refreshPromise) {
      refreshPromise = refreshToken().finally(() => {
        refreshPromise = null;
      });
    }
    await refreshPromise;
    error.config.headers.Authorization = `Bearer ${bacaToken()}`;
    return api(error.config);
  }
);

Pola refreshPromise memastikan banyak request yang gagal sekaligus hanya memicu satu kali proses refresh. Saat refresh selesai, semua request diulang dengan token baru.

#Logout Saat Refresh Gagal

Jika refresh token juga ditolak, sesi berakhir. Jangan memutar ulang request selamanya — bersihkan kredensial, alihkan ke layar login, dan beri tahu user bahwa sesinya kedaluwarsa. Episode 13 menjelaskan cara menghapus token dari secure storage.

#Autentikasi Biometrik

#Face ID dan Sidik Jari

Pengalaman login yang nyaman memakai biometrik: user cukup memindai wajah atau sidik jari. react-native-keychain mendukung penyimpanan kredensial yang hanya bisa diakses lewat biometrik:

import * as Keychain from "react-native-keychain";
 
async function loginBiometrik() {
  const kredensial = await Keychain.getGenericPassword({
    accessControl:
      Keychain.ACCESS_CONTROL.BIOMETRY_CURRENT_SET_OR_DEVICE_PASSCODE,
    accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
  });
  return kredensial;
}

accessControl menetapkan bahwa Keychain hanya melepaskan kredensial setelah verifikasi biometrik berhasil. Token tidak pernah terbaca tanpa sidik jari atau Face ID yang valid.

#UX Biometrik

Periksa dukungan biometrik sebelum menawarkannya: apakah perangkat punya Face ID atau sensor sidik jari, dan apakah user sudah mendaftar biometrik di sistem. Jika tidak, jatuh ke password biasa. Setiap gagal memindai, sediakan jalan alternatif.

#SSO Melalui Platform

SSO (Single Sign-On) memungkinkan user masuk dengan akun yang sudah ada — Apple, Google, atau layanan korporat. Apple Sign In dan Google Sign In menyediakan alur yang mulus di mobile, termasuk pengambilan profil dan token yang valid.

#Pilihan Implementasi

Untuk project Expo, expo-auth-session dan expo-apple-authentication menangani alur OAuth dan SSO platform. Untuk CLI React Native, tersedia library seperti react-native-apple-authentication dan react-native-google-signin. Pilih satu jalur login utama dan jaga konsistensinya.

#Jangan Percaya Klien

#Otorisasi Selalu di Server

Semua validasi keamanan harus terjadi di server. Klien bisa dimodifikasi — lewat reverse engineering atau tool request — jadi cek kembali di server: apakah user berhak mengakses resource ini, dan apakah data yang dikirim valid.

#Rate Limiting dan Validasi Input

Endpoint login dan API publik wajib punya rate limiting untuk memperlambat brute force. Validasi input di server, bukan hanya di UI. Anggap setiap request yang datang dari aplikasi sebagai tidak tepercaya, meskipun memakai token yang valid.

Warning

Token di sisi klien hanya membuktikan bahwa klien tahu token, bukan bahwa klien itu user sungguhan. Selalu evaluasi otorisasi di server untuk setiap resource, dan perlakukan semua input sebagai ancaman sampai terbukti valid.

#Penutup

Episode 15 menutup gerbang autentikasi: JWT dan OAuth 2.1 dengan PKCE, refresh token flow lewat interceptor, autentikasi biometrik di Keychain, SSO, dan prinsip bahwa server tidak boleh percaya klien.

Inti yang harus dibawa pulang:

JWT dipakai untuk request; refresh token untuk memperbarui access token.
OAuth 2.1 dengan PKCE adalah standar untuk aplikasi mobile.
Satu refreshPromise mencegah refresh token berlari berulang kali.
Biometrik membungkus kredensial di Keychain dengan access control.
Server wajib mengecek otorisasi pada setiap request.
Rate limiting dan validasi server melindungi dari klien yang dimodifikasi.

Di episode 16 selanjutnya kita akan membahas privacy dan data handling: data minimization dengan GDPR dan CCPA, permission minimal, consent flow, logging yang aman, serta kebijakan retensi data dan audit.