Numbers
Time-Based OTP Preview Generator
The time-based OTP preview generator produces realistic 6-digit and 8-digit one-time password codes for design mockups, component testing, and documentation. Building a 2FA flow means you need convincing sample codes long before real TOTP infrastructure is wired up. These randomly formatted codes match the output of Google Authenticator, Authy, and Microsoft Authenticator exactly. Choose 6 digits for the RFC 6238 standard used by most consumer apps, or switch to 8 digits for high-security contexts like banking portals and enterprise VPNs. Generate up to a full batch at once to cover multiple UI states — fresh codes, near-expired codes, and leading-zero edge cases — all in one click.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Set the Digits selector to 6 for standard authenticator app codes or 8 for high-security system mockups.
- Enter the number of codes you need in the Count field, from a single sample up to a full batch for test data.
- Click Generate to produce the list of sample OTP codes in the output panel.
- Copy individual codes or the full list and paste them directly into your design tool, test fixture, or documentation.
Use Cases
- •Populating OTP input fields across multiple screen states in a Figma authentication flow
- •Testing leading-zero handling and auto-advance behavior in a React OTP input component
- •Filling 2FA screenshots for App Store and Google Play store listings
- •Providing sample codes in a developer portal documenting TOTP-protected API authentication
- •Seeding a demo environment with realistic 8-digit codes when real TOTP secrets are not configured
Tips
- →Generate a batch of 20+ codes and scan for ones starting with zero — use those first to test your input field's zero-padding handling.
- →When mocking an expired-code error screen, pick a code from an earlier generation run so it feels distinct from the 'current' code on screen.
- →For 8-digit mockups, group digits as '4838 2910' rather than a solid block — that mirrors how real high-security apps display them.
- →Pair generated codes with a visible 30-second countdown timer in your prototype to make authentication flows feel realistic during user testing.
- →If your design shows multiple failed attempts, use three different generated codes for the error states to avoid repeating the same number visually.
- →Switch between 6-digit and 8-digit outputs when documenting an API that supports both modes, so your examples reflect each configuration accurately.
FAQ
can I use these OTP codes to test my login form or 2FA component
Yes, for display and interaction testing. Paste the generated codes into your component to verify digit grouping, clipboard paste handling, and auto-advance between input boxes. For end-to-end tests that verify real authentication, you'll need a TOTP library like otplib or pyotp configured with a test secret — these codes are not cryptographically derived and will never pass actual 2FA verification.
difference between 6 digit and 8 digit OTP codes
Six-digit codes have 1,000,000 possible values and are the RFC 6238 default used by nearly every consumer app and website. Eight-digit codes expand that to 100,000,000 values, cutting brute-force risk significantly — which is why banking portals and government systems often require them. Check your product spec before choosing; if it doesn't explicitly call for 8 digits, 6 is the right default.
why do some OTP codes start with zero and how should my app handle them
TOTP codes are zero-padded to their full digit length, so a computed value of 42391 becomes 042391 on a 6-digit system. Your input field must store the code as a string, not an integer, or the leading zero is silently dropped and validation fails. Use this generator to produce codes that start with zero and run them through your input component to catch that edge case early.
What is TOTP and how does it work?
TOTP (time-based one-time password, RFC 6238) generates a short code by combining a shared secret with the current time in an HMAC, so the authenticator app and server independently compute the same code without communicating. The generator produces sample codes in the right shape for testing your UI; real TOTP requires the shared secret and time-step logic, which lives in your auth library.
Why do TOTP codes expire every 30 seconds?
The time is divided into fixed windows (usually 30 seconds), and the code is derived from the current window, so it changes each interval — limiting how long a stolen or shoulder-surfed code stays useful. The generator makes preview codes to test how your UI shows and accepts them; the real expiry behaviour comes from your TOTP implementation's time step.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.