Components
Email-code authentication
A six-digit sign-in flow with explicit resend and recovery states.
On this page
Purpose and composition
EmailCodeAuth handles sign-in and registration. EmailCodeInput provides six labeled digit inputs with paste and navigation support.
Anatomy
- Email and registration intent
- Code-sent confirmation
- Six digit fields
- Sign-in / resend / change-email controls
- Inline alert
Configuration and variants
| Input or variant | Contract |
|---|---|
| register | Enables name and account-intent collection before the challenge. |
| Code | Six numeric digits; text paste is normalized. |
| Resend | 60-second cooldown; rate-limit responses can extend it. |
| Redirect | Safe callback handling preserves the intended destination. |
States and feedback
Code-sent and rejected-code examples retain the email and recovery actions. The UI describes a ten-minute code lifetime. No email was delivered in these fixtures.
Interaction and responsive behavior
Paste a complete code into the first field; arrows and backspace move among fields. Entering six digits does not automatically submit.
Accessibility and known limits
The group has a legend and every digit a label. Error text uses role=alert. Preserve one-time-code autocomplete on the first input and numeric input mode.
Source references
| File | Responsibility |
|---|---|
| src/components/EmailCodeAuth.tsx | Challenge lifecycle |
| src/components/EmailCodeInput.tsx | Digit input behavior |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0