TeachKit project

TeachKit / Design system

Documentation v2.0.0 · Redesigned app and marketing site

Design system contents

Patterns

Sign in with an email code

A recoverable challenge flow that keeps the intended destination.

On this page

Task sequence

  • Enter an email; registration also collects name and account intent.
  • Request a code and show the destination email.
  • Type or paste six digits, then submit explicitly.
  • Use resend after the cooldown or change the email.
  • Continue to the safely resolved callback after verification.

Data and persistence boundary

The local harness returns a fictional challenge and rejects the demonstration code. It sends no email and does not prove deliverability, server expiry enforcement, or OAuth behavior.

Failure and recovery

Wrong codes retain the challenge and show an alert. Rate limits can extend the resend delay; human-verification errors provide a recovery destination.

Source references

Source references
FileResponsibility
src/components/EmailCodeAuth.tsxAuth lifecycle
src/components/EmailCodeInput.tsxInput handling

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.

Auth Code · Component detail · Light · Desktop · Sent · 2096 × 2244 px
Auth Code · Component detail · Light · Desktop · Error · 2096 × 2512 px

Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0