Skip to content
Ritesh FirodiyaGet in touch

Work / Aakalan / Wiki / Surfaces

verify

Surfacecanonicalverified 2026-09-23

SURFACE.MOBILE.AUTH.VERIFY

Summary

Six boxes, auto-submitting, with a live resend countdown.

Raw wireframe

  • .context/designs/mobile/auth/verify.html

Why it is drawn this way

Six digits submits automatically — there is no Verify button. Pressing one after typing the last digit is pure friction on a screen whose whole job is to get out of the way.

One hidden input sits behind the six boxes. That is what gives real keyboard behaviour and SMS autofill without six fields fighting over focus.

Resend is visible but disabled, with a live countdown, so nobody hunts for it. It used to only restart the timer: somebody whose first SMS never arrived tapped Resend, watched the countdown reset, and waited for a message that was never requested — a failure that looked like a slow network rather than a button that did nothing.

A rejected code clears the boxes so the next attempt starts from empty rather than making somebody delete six digits first. The BOXES go rose, not just the message: an error names the field it is about.

The OTP row is drawn as a link here because the sixth digit is the action — there is no button to attach the forward edge to.

The anti-phishing line is at the foot, not behind a link. It is the one sentence that matters to somebody being social-engineered, and a link nobody opens says nothing.

Copy

Aakalan will never ask for an OTP over a call or a message. If someone does, it isn't us.

Related

Sources

  • src/app/(auth)/verify.tsx

Every project of mine is written down like this.

Read the résumé