VerifyOtpForm

Code

import { VerifyOtpForm } from "@fadymondy/nasaq/web";export function Verify() {  return (    <VerifyOtpForm      destination="[email protected]"      onSubmit={async ({ code }) => {        const ok = await api.verify(code);        if (!ok) return { error: "That code is not right." };      }}      onResend={() => api.resend()}    />  );}declare const api: { verify(c: string): Promise<boolean>; resend(): Promise<void> };

Auth · beta

Live examples and controls: VerifyOtpForm in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/verify-otp-form.json

A code entry screen body: a sentence naming where the code went (masked), six boxes, a submit button and a resend button with a countdown. It submits on the last digit or on paste; a wrong code clears the boxes and refocuses the first one.

When to useCopy Anchor Link

• Confirming an email or phone number after sign-up.
• Passwordless email or SMS codes.

When not to useCopy Anchor Link

• Authenticator app or recovery code at sign-in: use TwoFactorChallenge.
• Setting up two-factor: use a setup flow.

ImportCopy Anchor Link

import { VerifyOtpForm } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { VerifyOtpForm } from "@fadymondy/nasaq/web";

export function Verify() {
  return (
    <VerifyOtpForm
      destination="[email protected]"
      onSubmit={async ({ code }) => {
        const ok = await api.verify(code);
        if (!ok) return { error: "That code is not right." };
      }}
      onResend={() => api.resend()}
    />
  );
}

declare const api: { verify(c: string): Promise<boolean>; resend(): Promise<void> };

AnatomyCopy Anchor Link

VerifyOtpForm                    data-slot="verify-otp-form" (form, noValidate)
├─ description                   "We sent a 6-digit code to f***[email protected]"
├─ error summary                 role="alert"
├─ OtpInput                      autocomplete="one-time-code", dir="ltr"
├─ submit Button
├─ resend row                    "Resend in 0:27" then a button
└─ footer slot

APICopy Anchor Link

maskDestination(destination: string, channel?: "email" | "sms"): string: masks the middle of an address or number for display (f***[email protected], +966••••••67).

VerifyOtpForm: every form prop except onSubmit and children, plus:

ExamplesCopy Anchor Link

SMS with manual submit

import { VerifyOtpForm } from "@fadymondy/nasaq/web";

export function Sms() {
  return <VerifyOtpForm destination="+966501234567" channel="sms" length={4} autoSubmit={false} onSubmit={async () => {}} />;
}

AccessibilityCopy Anchor Link

• The form is noValidate and validates itself, so messages are yours to localise and read in one place. Every field has a visible <label>; an invalid field gets aria-invalid and its message is linked with aria-describedby.
• On a failed submit focus moves to the first invalid field. When the failure is for the whole form (error) the summary at the top of the form (role="alert") is focused instead, so it is announced.
• The submit button shows a spinner and is aria-busy while onSubmit runs; a second submit is ignored.
• The boxes are one role="group" with a name; each box is labelled "Digit 3 of 6" and has autocomplete="one-time-code", so iOS and Android offer the code from the message.
• After a wrong code the boxes clear and focus returns to the first, and the error is announced.

RTL & i18nCopy Anchor Link

• Built-in English and Arabic strings follow the Nasaq locale (useNasaq). Pass labels to change any of them or to add another language; keys you omit keep the built-in text.
• Layout uses logical properties, so it mirrors under dir="rtl" with no extra work.
• The boxes always run left to right (a code is a number), even in Arabic pages. The destination is isolated so it does not reorder.

Styling & tokensCopy Anchor Link

• Built from OtpInput, Button and Alert; tokens only.

Do / Don'tCopy Anchor Link

• Do let people paste the whole code.
• Do rate-limit attempts and resends on the server.
• Don't reveal the full address or number.
• Don't hide resend behind support.

RelatedCopy Anchor Link

• otp-input
• auth-layout
• register-form
• two-factor-challenge

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-auth-verify-otp-form--docs