Masuk Cepat dengan Sidik Jari & Sensor Wajah
Pengguna bisa langsung masuk ke aplikasi hanya dengan menempelkan sidik jari atau pindai wajah di ponsel dan laptop, tanpa perlu repot mengetik email maupun mengingat kata sandi.
Pengguna bisa langsung masuk ke aplikasi hanya dengan menempelkan sidik jari atau pindai wajah di ponsel dan laptop, tanpa perlu repot mengetik email maupun mengingat kata sandi.
Tantangan & Kebutuhan Pengguna
Aplikasi pencatat keuangan harian menuntut keseimbangan antara keamanan tinggi dan kecepatan akses. Mengandalkan password dan kode OTP email setiap kali membuka aplikasi di ponsel menciptakan friksi bagi pengguna yang ingin segera mencatat transaksi, sementara implementasi WebAuthn konvensional yang masih mewajibkan input alamat email terlebih dahulu belum benar-benar memberikan pengalaman login satu sentuhan.
Keamanan terbaik adalah yang paling minim friksi: satu pemindaian biometrik perangkat menggantikan ketikan email, password, sekaligus waktu tunggu OTP.
Solusi & Cara Kerja
Fitur ini mengimplementasikan WebAuthn dengan konfigurasi Discoverable Credentials (`residentKey: 'required'` dan `authenticatorAttachment: 'platform'`). Saat pengguna menekan tombol 'Masuk dengan Passkey', endpoint inisialisasi mengirimkan `allowCredentials` kosong dan menyimpan challenge kriptografi di dalam cookie `httpOnly` berumur pendek (300 detik). Browser langsung memunculkan pemindai biometrik perangkat (Touch ID, Face ID, Windows Hello, atau Android Biometrics). Setelah pengguna memverifikasi identitasnya, endpoint verifikasi akhir mencari pemilik akun langsung dari `assertion.id`, memvalidasi tanda tangan kriptografi dengan kunci publik di database, memperbarui nilai `counter`, dan menerbitkan sesi JWT penuh.
Detail & Hal yang Diperhatikan
- Proteksi Replay & Cloning Attack: Setiap kali autentikasi berhasil, nilai `newCounter` dari authenticator disimpan kembali ke database untuk memastikan kredensial yang dikloning akan ditolak pada percobaan berikutnya.
- Normalisasi Binary ke Base64: Kunci publik (`Uint8Array`) dari `@simplewebauthn/server` dikodekan ke format string `base64` saat disimpan ke MySQL dan direkonstruksi menjadi `Buffer` saat proses verifikasi.
- Onboarding Proaktif: Halaman pemilihan kantong tabungan secara otomatis mengecek status kepemilikan passkey pengguna dan menampilkan modal aktivasi Passkey jika perangkat belum terdaftar.
Pastikan variabel lingkungan NEXT_PUBLIC_DOMAIN (RP_ID) dan NEXT_PUBLIC_ORIGIN sesuai dengan domain produksi berprotokol HTTPS karena WebAuthn API di browser menolak berjalan pada domain yang tidak cocok atau koneksi tidak terenkripsi (kecuali localhost).