Phone verification
A two-step phone verification flow: country code and formatted number, then a 6-digit code with a resend countdown, wrong-code and lockout errors, and a verified state.
Preview
- Phone number
- Code
Live: any valid number, then code 424242
- Phone number (done)
- Code
Enter the code
Sent to +1 (415) 555-0123.
The code expires in 10 minutes.
Didn’t get it?Resend in 0:24
Code step, resend in 0:24
- Phone number (done)
- Code
Enter the code
Sent to +44 7700 900123.
That code didn’t match. 2 tries left.
Didn’t get it?
Wrong code, resend unlocked
- Phone number (done)
- Code (done)
Phone verified
+1 (415) 555-0123
Verified
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onSendCode | (e164: string) => void | Promise<void> | — | Sends a code; reject to show an error. |
| onVerify | (e164: string, code: string) => boolean | Promise<boolean> | — | Resolves true when the code is right. |
| onVerified | (e164: string) => void | — | Called after a successful verification. |
| defaultCountry | string | "US" | ISO code preselected in the phone field. |
| resendSeconds | number | 30 | Countdown before Resend unlocks. |
| maxAttempts | number | 3 | Wrong codes allowed before the input locks. |
| defaultStep | "phone" | "code" | "verified" | "phone" | Start mid-flow (previews). |
| defaultPhone / defaultCode / defaultError | string | — | Preview state for the number, code and error. |
| defaultSecondsLeft | number | resendSeconds | Starting countdown value. |
| clockRunning | boolean | true | Let the countdown tick; turn off for static previews. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.