sign-in

Summary

Phone number in, six-digit code out. The first screen of the app.

Raw wireframe

• .context/designs/mobile/auth/sign-in.html

Why it is drawn this way

Phone-first, because it is the identifier friends already have for you. Invite matching depends on it: a contact in somebody's address book is a number, and nothing else the app could ask for would match.

No passwords anywhere in the product. An app opened twice a month plus a password equals a forgotten password, and a reset flow is a second identity system to build and get wrong.

The back control only renders when there is genuinely something behind this screen. On a cold start there is not, and a dead arrow in the corner of the first screen teaches the user the chrome lies.

The promise at the foot of this screen governs the rest of the product. We never read contacts without asking and never message anyone on the user's behalf — see we-never-message-anyone. Every outbound path in the app is built to keep it.

Navigation only happens once a code has actually been requested. Moving first would strand somebody on six empty boxes waiting for an SMS that nobody ever sent.

Its error state is not drawn. It is one rose line under the field, the same shape as verify's, and drawing three near-identical error screens teaches a reviewer to skip them. Recorded in routes.js under missing.

Related

• verify
• we-never-message-anyone
• splash

Sources

• src/app/(auth)/sign-in.tsx
• src/lib/phone.ts