Cara Marketer Indonesia Pasang Web OTP API di Next.js untuk Pangkas Friction Login SMS 2026

TL;DR: Web OTP API memungkinkan browser membaca kode OTP dari SMS secara otomatis lalu mengisi field login tanpa user salin-tempel. Di Next.js, implementasinya cukup tambahkan atribut autocomplete="one-time-code" di input plus panggilan navigator.credentials.get di client component, dan format SMS server pakai akhiran @domain #KODE. Per 2026, dukungan kuat di Chrome Android, sehingga marketer wajib sediakan fallback paste manual untuk Safari iOS.

Login via SMS OTP masih jadi default di banyak platform Indonesia, mulai dari e-commerce, fintech, hingga aplikasi member klinik. Masalahnya, alur normal selalu sama. User memasukkan nomor, menunggu SMS, pindah ke aplikasi pesan, salin kode, kembali ke browser, dan paste. Setiap perpindahan tab menambah kemungkinan user drop-off, terutama di koneksi 3G dan 4G yang lambat.

Dalam beberapa proyek client Vito Atmo, rata-rata waktu login OTP mobile berkisar 18 sampai 30 detik dari klik kirim sampai kode masuk. Web OTP API memangkas itu jadi di bawah 5 detik tanpa user perlu meninggalkan halaman. Artikel ini menjelaskan cara memasangnya di Next.js 15 dengan App Router, plus pola fallback yang aman untuk semua browser.

Konteks: Kenapa Login OTP SMS Bocor di Mobile

Friction login OTP tidak terlihat di dashboard analytics standar. Yang muncul biasanya hanya jumlah konversi, bukan berapa user yang abandon di tengah jalan saat menunggu SMS atau lupa kembali ke browser. Pengamatan di proyek client menunjukkan, sekitar 8 hingga 14 persen user gagal menyelesaikan login pertama kali, dengan penyebab terbesar adalah salah ketik kode dan tab browser terlanjur tertutup.

Web OTP API mengurangi kedua masalah itu sekaligus. Browser memvalidasi origin SMS, mengisi kode otomatis, lalu form bisa di-submit tanpa user menyentuh keyboard. Pendekatan ini cocok dipadukan dengan strategi progressive enhancement, di mana user di browser yang belum mendukung tetap bisa login dengan cara lama.

Framework: 4 Langkah Pasang di Next.js 15

Komponen yang perlu diubah cukup ringkas. Berikut ringkasannya:

Implementasi minimal di sisi client:

"use client";
import { useEffect, useRef } from "react";

export function OTPInput() {
  const ref = useRef<HTMLInputElement>(null);
  useEffect(() => {
    if (!("OTPCredential" in window)) return;
    const ac = new AbortController();
    navigator.credentials
      .get({ otp: { transport: ["sms"] }, signal: ac.signal } as any)
      .then((otp: any) => {
        if (otp && ref.current) ref.current.value = otp.code;
      })
      .catch(() => {});
    return () => ac.abort();
  }, []);
  return <input ref={ref} inputMode="numeric" autoComplete="one-time-code" />;
}

Di sisi SMS gateway, pastikan body SMS persis seperti:

Kode verifikasi Anda: 482910

@vitoatmo.com #482910

Baris terakhir wajib, dan domain harus persis cocok dengan origin halaman. Detail teknis dan edge case ada di dokumentasi resmi WICG Web OTP di web.dev.

Studi Kasus: Yuanita Sekar dan Aplikasi Klien

Saat membangun panel client Yuanita Sekar untuk sesi konsultasi personal branding, kami memilih login OTP SMS karena audiens dominan mobile dan tidak terbiasa dengan password manager. Setelah migrasi ke Web OTP API, rata-rata waktu dari klik "kirim OTP" sampai dashboard load turun dari 23 detik ke 6 detik. Tingkat penyelesaian login pertama naik dari sekitar 72 persen ke 89 persen dalam 30 hari pertama.

Pola yang sama kami terapkan di portal admin Atmo LMS untuk member baru. Karena member sering mendaftar dari smartphone Android entry-level, peningkatan terbesar terlihat di koneksi 3G dan 4G yang lambat. Di iOS, fallback ke autofill native sistem tetap bekerja tanpa perubahan kode tambahan, asal atribut autocomplete="one-time-code" sudah dipasang.

Pertanyaan Umum

Apakah Web OTP API menggantikan Passkey?

Tidak. Passkey jauh lebih aman dan tidak butuh SMS. Web OTP API adalah jembatan untuk bisnis yang masih wajib pakai SMS sebagai kanal autentikasi, sementara Passkey diadopsi bertahap.

Bagaimana dengan privasi nomor telepon?

Browser tidak meneruskan nomor ke web app. Hanya kode OTP yang diteruskan, dan hanya jika format SMS valid serta user mengizinkan.

Apakah aman dari SIM swap?

Web OTP API tidak menangani serangan SIM swap. Mitigasi tetap di sisi server, misalnya batasi percobaan dengan rate limiting dan deteksi anomali login dari device baru.

Browser apa yang dijamin mendukung?

Per 2026, dukungan paling matang di Chrome Android dan browser berbasis Chromium. Safari iOS pakai autofill native sistem dengan atribut yang sama, sehingga kompatibel selama input ditandai dengan benar.

Aplikasikan Sekarang

Sebelum push ke produksi, jalankan checklist ringkas: cek input punya autocomplete="one-time-code", cek format SMS server berakhir @domain #KODE, cek fallback paste manual masih jalan di Safari, dan cek timeout AbortController sesuai dengan masa berlaku OTP server. Setelah live, monitor metrik waktu login dan tingkat penyelesaian. Bila tidak ada perubahan signifikan dalam 14 hari, kemungkinan masalah ada di kanal SMS gateway, bukan di API.