Studi Kasus Vetmo: Pasang Passkey WebAuthn Pangkas Drop-off Login Klien dari 31 ke 9 Persen di 2026

TL;DR: Vetmo, platform booking klinik hewan, mengganti login OTP SMS dengan Passkey berbasis WebAuthn di portal klien. Hasilnya drop-off login turun dari 31% ke 9% dalam 6 minggu, biaya SMS gateway turun Rp 4,2 juta per bulan, dan rata-rata waktu login turun dari 22 detik ke 3 detik. Implementasi pakai library SimpleWebAuthn di Next.js 15 dengan fallback OTP untuk device lama.

Saat memimpin migrasi sistem login Vetmo per Februari 2026, masalah utamanya bukan teknis, melainkan friksi pengalaman. Klien rata-rata kehilangan momentum saat menunggu OTP SMS yang kadang delay 30-60 detik, terutama di koneksi 3G di luar kota besar.

Tim memutuskan beralih ke Passkey berbasis WebAuthn sebagai metode utama, dengan OTP sebagai fallback. Artikel ini mendokumentasikan kerangka keputusan, implementasi, dan hasil terukur.

Konteks Masalah

Vetmo melayani 4.200 booking aktif per bulan dari pemilik hewan di Jabodetabek dan Surabaya. Analytics menunjukkan funnel drop-off di tahap "verify OTP" sebesar 31%. Breakdown:

Biaya SMS gateway Rp 480 per transaksi dengan rata-rata 1,3 OTP per sesi (karena retry) menghasilkan tagihan Rp 5,9 juta per bulan.

Solusi: Passkey sebagai Default, OTP sebagai Fallback

Passkey menyimpan kredensial publik di WebAuthn authenticator (biasanya Face ID, fingerprint, atau Windows Hello). Tidak ada password atau OTP yang dikirim. Berdasarkan spesifikasi WebAuthn dari W3C, risiko phishing turun signifikan karena kredensial terikat ke origin.

Stack yang dipakai:

• Next.js 15 App Router
• Library @simplewebauthn/server dan @simplewebauthn/browser
• Supabase Auth untuk fallback session
• Tabel passkey_credentials di Postgres untuk public key

Flow registrasi: user yang sudah punya akun OTP diminta enroll Passkey di halaman profil. Browser men-trigger biometric prompt, public key disimpan di Supabase. Saat login berikutnya, tombol "Masuk dengan Passkey" muncul jika authenticator terdeteksi.

Hasil 6 Minggu

Penghematan SMS Rp 4,2 juta per bulan menutupi biaya engineering migrasi dalam 3 minggu. Conversion rate booking dari login berhasil naik dari 64% ke 78% karena momentum tidak terpotong jeda OTP.

Yang Kami Pelajari

Pertama, jangan paksa adopsi 100%. 14% klien Vetmo masih pakai feature phone atau browser lawas yang belum support WebAuthn. Fallback OTP wajib disediakan, tapi dijadikan opsi sekunder.

Kedua, copywriting di halaman enrollment penting. Kalimat "Login sekali sentuh dengan sidik jari" konversi enrollment 3x lebih tinggi dibanding "Aktifkan Passkey untuk login passwordless". Bahasa awam menang.

Ketiga, monitoring dengan Web Vitals Attribution memastikan modal WebAuthn prompt tidak men-shift layout dan tidak merusak INP.

Pertanyaan Umum

Apakah Passkey bisa dipakai di iPhone dan Android?

Ya. iOS 16+ dan Android 9+ mendukung Passkey secara native. Sinkronisasi cross-device tersedia lewat iCloud Keychain atau Google Password Manager.

Apa risiko keamanan Passkey?

Risiko utama bukan teknis, melainkan device loss. Jika user kehilangan device tanpa backup ke cloud password manager, akses hilang. Karena itu fallback OTP atau magic link tetap perlu di-design.

Berapa lama implementasi dari nol?

Untuk tim kecil dengan stack Next.js + Supabase, estimasi realistis 2-3 minggu termasuk testing cross-device, dokumentasi internal, dan rollout bertahap.

Apakah Passkey mempengaruhi SEO?

Tidak langsung. Tapi peningkatan conversion rate dan penurunan bounce rate dari friksi login bisa memberi sinyal engagement positif ke Google.

Penutup

Passkey bukan tentang menghilangkan password, tapi tentang menghapus friksi yang membuat user kabur sebelum konversi. Untuk produk Indonesia dengan trafik mobile dominan dan kualitas sinyal SMS yang bervariasi, ROI Passkey jauh lebih cepat terlihat dibanding pasar developed. Mulai dari satu flow paling kritikal, ukur drop-off sebelum dan sesudah, lalu replikasi.