Studi Kasus Atmo LMS: Pasang Web OTP API di Next.js untuk Auto-Fill SMS OTP Login Murid, Pangkas Waktu Verifikasi dari 47 ke 6 Detik dan Naikkan Retensi Sesi 28 Persen di 2026

TL;DR: Atmo LMS punya 1.200 murid aktif dengan login mingguan via SMS OTP. Sebelum pasang Web OTP API, murid butuh rata-rata 47 detik dari terima SMS sampai berhasil submit OTP, dan 11 persen drop-off di langkah ini. Setelah implementasi Web OTP API dengan attribute autocomplete="one-time-code" plus origin-bound message, waktu turun ke 6 detik dan drop-off jadi 2 persen. Retensi sesi mingguan naik 28 persen di 60 hari pertama.

Login mobile dengan SMS OTP punya friction terselubung: user harus switch ke app SMS, copy kode, kembali ke browser, paste. Setiap detik tambahan di sini menambah peluang abandonment. Di Atmo LMS (platform learning kami untuk modul marketing), murid yang akses dari HP murah dengan RAM 2 sampai 3 GB sering kehilangan context browser saat switch app.

Diagnosis Awal: 47 Detik Bukan Angka Kecil

Tim Atmo LMS lakukan session recording 200 login attempt selama 2 minggu di Maret 2026. Breakdown waktu rata-rata:

11 persen murid abandon di tengah proses. Penyebab terbesar: tab browser ter-close saat switch ke app SMS karena RAM low-end. Mereka harus mulai dari awal.

Apa Itu Web OTP API

Web OTP API adalah browser API yang otomatis baca SMS OTP yang masuk dan langsung mengisi input field di form, tanpa user perlu switch app. Bekerja di Chrome Android dan beberapa Chromium-based browser, dengan fallback graceful ke manual input. Pelajari konteks teknis di Web OTP API documentation MDN.

Mirip Cookie Store API yang membuat operasi cookie lebih ergonomis, Web OTP membuat user experience OTP login mendekati zero-friction.

Implementasi di Next.js App Router

Dua hal yang harus pas: HTML attribute di input field dan format SMS dari backend.

Frontend (React component):

'use client'
import { useEffect, useRef } from 'react'

export function OTPInput({ onComplete }: { onComplete: (code: string) => void }) {
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if ('OTPCredential' in window) {
      const ac = new AbortController()
      navigator.credentials.get({
        otp: { transport: ['sms'] },
        signal: ac.signal,
      } as any).then((otp: any) => {
        if (otp?.code) {
          if (inputRef.current) inputRef.current.value = otp.code
          onComplete(otp.code)
        }
      }).catch(console.error)

      return () => ac.abort()
    }
  }, [onComplete])

  return (
    <input
      ref={inputRef}
      type="text"
      inputMode="numeric"
      autoComplete="one-time-code"
      maxLength={6}
      placeholder="Kode OTP"
    />
  )
}

Backend (format SMS yang dikirim):

Backend wajib kirim SMS dengan format khusus yang berisi origin domain dan kode:

Kode login Atmo LMS: 482910

@atmolms.com #482910

Baris terakhir adalah origin-bound format yang dibaca Web OTP API. Tanpa baris ini, API tidak akan auto-fill meski semua frontend sudah benar. Pelajari konsep OAuth dan Passkey Authentication untuk konteks lebih luas tentang auth modern.

Fallback yang Bersih

Web OTP API belum didukung Safari dan Firefox Mobile. Komponen di atas degrade dengan benar: input field tetap berfungsi normal dengan attribute autocomplete="one-time-code" yang membantu iOS keyboard menampilkan suggestion OTP dari notification bar. iOS native sebenarnya sudah punya feature mirip Web OTP, hanya saja triggered berbeda. Hasilnya: di iOS, suggestion bar muncul, di Chrome Android, auto-fill otomatis.

Test coverage: Chrome Android (auto-fill), Safari iOS (suggestion bar), Chrome iOS (manual paste), Firefox Mobile (manual paste).

Hasil Setelah 60 Hari

Peningkatan "sesi belajar selesai" lebih besar dari kenaikan WAL karena murid yang berhasil login lebih cepat juga lebih mood untuk lanjut belajar, bukan abandon di tengah modul. Kombinasi efek ini bikin engagement per learner naik signifikan.

Trade-off dan Limitasi

Web OTP API butuh HTTPS dan tidak bekerja di iframe. Untuk Atmo LMS yang single-domain dan sudah HTTPS, ini bukan masalah. Tapi kalau Anda jalankan auth di iframe (misal embed di platform lain), perlu approach berbeda seperti popup auth atau passkey.

Limitasi lain: format SMS dengan baris @origin.com #code membuat SMS sedikit lebih panjang, yang bisa pengaruhi biaya SMS provider. Untuk Atmo, biaya naik 4 persen tapi conversion impact bayar 10 kali lipat.

Pertanyaan Umum

Apakah Web OTP API bekerja di in-app browser seperti Instagram atau WhatsApp?

Sebagian besar in-app browser tidak support karena mereka pakai WebView terbatas. Untuk traffic dari sosmed, sediakan fallback ke "Buka di Chrome" CTA.

Bagaimana keamanan Web OTP API? Bisa di-intercept?

Web OTP API hanya membaca SMS dengan format origin-bound yang spesifik. Domain attacker tidak akan bisa baca SMS yang ditujukan ke domain Anda. Lebih aman daripada copy-paste manual yang rawan typo.

Apakah perlu ganti SMS provider?

Tidak. Provider apapun (Twilio, MessageBird, Vonage, atau lokal seperti Zenziva) bisa kirim format apapun. Tinggal sesuaikan template SMS.

Berapa cost implementasi total?

Implementasi murni teknis: 3 hari kerja developer plus 1 hari QA testing di multiple device. Kalau pakai contractor day-rate Rp 1,5 juta, total sekitar Rp 6 juta. Payback period: kurang dari 30 hari untuk produk dengan recurring engagement.

Bisakah dipakai untuk e-commerce checkout?

Bisa. Sama efektifnya untuk reduce friction di OTP verifikasi pembayaran. Bahkan lebih impactful karena conversion rate checkout sangat sensitif terhadap setiap detik delay.

Implementasi Bertahap Lebih Aman

Tidak perlu deploy Web OTP API ke 100 persen user sekaligus. Mulai dengan feature flag rollout 10 persen, monitor error rate di Sentry selama seminggu, lalu naikkan bertahap. Untuk Atmo LMS, kami pakai cohort-based rollout berdasarkan device family supaya bisa rollback kalau ada model HP spesifik yang bermasalah.