Auth Otp

Overview

Auth OTP is a pre-built one-time password entry template for multi-factor authentication (MFA) and passwordless login flows. It provides a grouped set of digit inputs that accept a verification code sent via email or SMS. Part of the Authentication Pattern suite.

When to use

• Multi-factor authentication — second step after password verification
• Passwordless magic-code login — single-use code sent to email or SMS
• Phone verification during sign-up — confirm phone number ownership
• Account recovery verification — confirm identity before password reset
• Transaction verification — confirm high-value actions with a code

When not to use

• Do not use for password-only auth — use Auth Signin for credential login.
• Do not use for TOTP authenticator apps — this template handles SMS/email codes, not time-based codes.
• Do not use if users need to type letters — OTP is numeric-only. Use Input for alphanumeric codes.
• Do not use as the only auth method for sensitive apps — OTP alone is phishable. Pair with a hardware key or biometric for high-security environments.

Basic HTML example

React example

{`import { AuthOtp } from '@byteion/react';

export default function OtpPage() {
  return (
    <AuthOtp
      length={6}
      onSubmit={(code) => verifyCode(code)}
      onResend={() => requestNewCode()}
    />
  );
}`}

Vue example

{`<script setup lang="ts">
import { AuthOtp } from '@byteion/vue';

function onSubmit(code: string) { /* verifyCode(code) */ }
function onResend() { /* requestNewCode() */ }
</script>

<template>
  <AuthOtp :length="6" @submit="onSubmit" @resend="onResend" />
</template>`}

Props / API

Anatomy

OTP behavior

• Auto-advance — typing a digit moves focus to the next slot automatically
• Backspace navigation — pressing Backspace on an empty slot moves to the previous slot
• Paste support — pasting a complete code fills all slots at once
• Auto-submit — the verify button auto-enables when all digits are filled
• OS code autofill — autocomplete="one-time-code" on the first slot enables SMS code autofill on iOS and Android
• Resend cooldown — the resend button shows a countdown timer and is disabled during cooldown
• Numeric keyboard — inputmode="numeric" triggers the numeric keypad on mobile devices

Security notes

• Short code expiry — OTP codes should expire within 5-10 minutes
• Rate limit verification attempts — lock out after 5 failed attempts per session
• Rate limit resend requests — maximum 3 resends per phone/email per hour
• Single-use codes — invalidate the code after successful verification or after first use
• Never log the code — OTP codes are sensitive credentials
• Use HTTPS — all verification requests must be over HTTPS
• Consider risk-based MFA — skip OTP for trusted devices and low-risk actions

Accessibility

• Each digit slot has an aria-label (e.g. "Digit 1", "Digit 2") — not reliant on visual position alone
• Error message uses role="alert"
• Verify button responds to Enter key
• Backspace and arrow key navigation works with keyboard-only usage
• Paste from SMS/email apps is supported
• Focus ring is visible in all themes
• Loading state disables all digit inputs and the verify button

Developer tips

Common mistakes

• Using type="number" instead of inputmode="numeric" — type="number" adds unwanted spinner controls
• Missing aria-label on digit slots — screen readers cannot identify which slot is which
• No paste support — users have to type each digit individually
• No auto-advance — users have to manually tab between slots
• Not handling expired codes with a clear error message
• Allowing unlimited verification attempts — vulnerable to brute-force
• Using a single input field instead of grouped slots — harder to read and verify visually

Production checklist

• Test empty code, partial code, wrong code, expired code
• Test paste behaviour from SMS/email apps
• Test backspace and arrow key navigation
• Test resend cooldown timer and button state
• Test loading state during verification
• Test mobile numeric keyboard shows via inputmode="numeric"
• Test OS-level one-time-code autofill via autocomplete="one-time-code"
• Test dark mode and branded themes
• For Laravel apps: render verification errors from session or API response, keep CSRF and rate limiting enabled
• For React/Vue SPAs: coordinate with router, auth store, resend cooldown state, verification endpoint, and session creation

Related components and pages

• Auth Signin — sign-in page template (OTP follows credential verification)
• Auth Signup — registration form
• Auth Forgot Password — password recovery flow
• Auth Reset Password — set new password
• Input — base form field
• Button — verify action
• Card — form surface container
• Alert — error messages
• Authentication Pattern — full auth pattern guide

Why this exists

Byteion includes Auth Otp so teams can ship this pattern with consistent markup, tokens, accessibility expectations, and framework parity.

API Reference

Customization

Auth Otp customization should happen through Byteion tokens, semantic CSS variables, and documented utility classes. Avoid hardcoded one-off colors, spacing, or focus styles.

Production usage

Auth Otp is production-ready when examples are wired to real state, validation, loading, empty, and error paths. Test the HTML example plus React and Vue adapters separately if your app supports multiple frameworks.

Related components

• Auth Signin - sign-in page template (OTP follows credential verification)
• Auth Signup - registration form
• Auth Forgot Password - password recovery flow
• Auth Reset Password - set new password
• Input - base form field
• Button - verify action
• Card - form surface container
• Alert - error messages

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

Remote / AJAX