Belajar 2FA Authentication - UX, Accessibility & Copy-Paste

#Pendahuluan

Keamanan terbaik pun gagal jika pengguna tidak bisa menyelesaikannya. Episode 19 membahas setengah dari fitur 2FA yang sering terlupakan: pengalaman pengguna. Input 6 digit yang harus diketik dalam 30 detik adalah momen paling menegangkan di alur autentikasi — dan paling mudah dirusak oleh detail kecil.

Kalian akan merancang input TOTP yang nyaman — autofocus, auto-submit, paste, dan countdown — lalu memastikan halaman accessible bagi pengguna pembaca layar dan tanpa kamera. Di akhir episode, alur 2FA tidak hanya aman, tapi juga menyenangkan.

#Input 6 Digit yang Nyaman

#Autofocus dan Auto-Submit

Saat halaman tantangan muncul, kursor harus sudah berada di field pertama — pengguna tidak boleh mengklik dua kali. Setelah 6 digit terisi, kirim otomatis tanpa menunggu tombol submit:

Input 6 digit dengan auto-submit

const input = document.querySelector('#totp-code');
input.focus();
 
input.addEventListener('input', () => {
  const digits = input.value.replace(/\D/g, '');
  input.value = digits;
  if (digits.length === 6) {
    input.form.requestSubmit();
  }
});

Fungsi input.focus() langsung menempatkan kursor saat halaman dimuat, dan requestSubmit mengirim form begitu digit keenam masuk. Filter \D dijamin menjaga input tetap hanya angka.

Jangan lupa menangani field kosong setelah submit gagal: kembalikan fokus dan pilih isi input agar pengguna bisa mengetik ulang tanpa mengklik dua kali.

#Paste dan Autofill

Pengguna password manager menyalin kode dari aplikasi authenticator yang menampilkannya di notifikasi. Pastikan field menerima paste polos, dan tambahkan atribut yang membuka autofill browser:

<input id="totp-code"
  inputmode="numeric"
  autocomplete="one-time-code"
  maxlength="6"
  placeholder="123456" />

autocomplete="one-time-code" adalah sinyal standar bagi browser dan OS untuk menawarkan kode dari SMS atau notifikasi langsung ke field ini. Dengan inputmode="numeric", perangkat seluler menampilkan keypad angka.

#Countdown 30 Detik

Pengguna perlu tahu berapa lama kode masih berlaku. Tampilkan countdown yang menghitung mundur ke step berikutnya, dan perbarui field agar siap menerima kode baru saat countdown habis. Tanpa countdown, pengguna yang menunggu di akhir jendela 30 detik mendapat kegagalan yang membingungkan.

Countdown juga sebaiknya menampilkan sisa detik secara visual dan memperbarui nilainya setiap detik. Hindari teks statis seperti "kode berlaku 30 detik" yang tidak memberitahu posisi saat ini dalam jendela.

#Pesan Error yang Membantu

#Jelas tapi Tidak Bocor

Pesan error harus membedakan dua kasus: kode salah ketik dan kode kedaluwarsa. "Kode sudah tidak berlaku, kode baru telah dikirim ke aplikasi" membantu pengguna yang lambat mengetik, tanpa membocorkan detail akun. Tampilkan pesan di dekat field, bukan di bagian atas halaman yang jauh dari konteks.

#Sinkronisasi Jam

Jika kegagalan berulang dengan kode yang tampak benar, kemungkinan besar jam perangkat tidak sinkron. Berikan hint yang spesifik: "Pastikan waktu di perangkat otomatis dan sinkron". Untuk kasus ini, tautkan instruksi mengatur waktu otomatis di pengaturan sistem — bukan menaikkan window toleransi.

#Aksesibilitas

#Label ARIA yang Benar

Setiap field wajib punya label yang bisa dibaca pembaca layar. Jangan mengandalkan placeholder sebagai label — placeholder hilang saat mengetik dan tidak dibaca konsisten. Gunakan label eksplisit yang terhubung ke field, dan beri atribut aria-describedby untuk pesan bantuan:

<label for="totp-code">Kode 6 digit dari aplikasi authenticator</label>
<input id="totp-code" aria-describedby="totp-help" ... />
<p id="totp-help">Kode berubah setiap 30 detik</p>

Label yang deskriptif seperti ini membantu pengguna pembaca layar memahami apa yang diminta tanpa melihat halaman.

Untuk alur multi-langkah, tambahkan atribut aria-live pada area pesan error agar pembaca layar mengumumkan perubahan tanpa pengguna harus memindahkan fokus.

#Kontras dan Opsi Manual

QR code harus punya kontras yang cukup — hitam pekat di atas putih polos, tanpa pola di area tenang. Dan karena tidak semua pengguna punya kamera, opsi manual selalu tersedia: masukkan secret Base32 ke aplikasi lewat tombol "Enter a setup key". Opsi ini juga penyelamat untuk pengguna screen reader yang tidak bisa memindai.

#Uji Pengalaman dengan Mata Pengguna

#Mulai dari Halaman Tantangan

Uji alur seperti pengguna nyata: buka link langsung ke halaman MFA, lihat apakah autofocus bekerja, apakah paste berfungsi, dan apa yang terjadi ketika countdown habis di tengah mengetik. Skenario kecil ini menangkap kebocoran pengalaman yang tidak terlihat di alur bahagia.

#Rekrut Pengguna Non-Teknis

Alur 2FA yang diuji hanya oleh engineer selalu terasa mudah bagi engineer. Uji dengan orang non-teknis: perhatikan di titik mana mereka berhenti, apa yang mereka baca, dan pesan mana yang membuat mereka panik. Masukan ini sering menjadi perubahan UX paling berdampak.

Catat durasi menyelesaikan login pertama — perbaikan UX yang baik biasanya terlihat dari angka yang turun, bukan dari asumsi.

#Penutup

Episode 19 memoles pengalaman 2FA: input 6 digit dengan autofocus, auto-submit, paste dan autofill, countdown 30 detik, pesan error yang membantu, serta aksesibilitas dengan label ARIA, kontras QR, dan opsi manual tanpa kamera.

Inti yang harus dibawa pulang:

• Autofocus dan auto-submit mempercepat alur yang menegangkan.
• Dukung paste dan autocomplete one-time-code.
• Tampilkan countdown agar pengguna tahu jendela kode berlaku.
• Bedakan pesan kode salah dan kode kedaluwarsa.
• Gunakan label ARIA eksplisit, bukan placeholder.
• Sediakan opsi manual untuk pengguna tanpa kamera.

Di episode 20 selanjutnya kita akan membahas produksi: deployment, secrets, dan observability — mengelola environment dan KMS untuk kunci enkripsi, backup terenkripsi, serta log dan alerting untuk peristiwa MFA tanpa PII dan kode.