Numbers

Time-Based OTP Preview Generator

The time-based OTP generator creates realistic-looking 6-digit and 8-digit one-time password codes for design, testing, and documentation work. If you're building a two-factor authentication flow, you need convincing sample codes to populate your UI before any real TOTP infrastructure is wired up. These randomly generated codes match the format produced by apps like Google Authenticator, Microsoft Authenticator, and Authy, making them ideal for mockups and demos. TOTP codes follow a strict numeric format defined in RFC 6238. Six digits is the near-universal standard, but some high-security systems, such as banking portals and enterprise VPNs, use 8-digit codes for a larger code space. This generator lets you switch between both formats so your mockups reflect the exact spec your product targets. Designers and developers often underestimate how specific OTP field design needs to be. Grouping digits (e.g., '483 921' vs '483921'), input auto-advance behavior, and countdown timers all need realistic data to test against. Generating a batch of sample codes lets you fill multiple states at once, from a fresh code to one that looks nearly expired. These codes are not cryptographically derived from any secret key and carry no real authentication value. They exist purely to give your screens, docs, and test suites something accurate to work with. Generate as few as one or up to a full set to cover every state in your flow.

How to Use

  1. Set the Digits selector to 6 for standard authenticator app codes or 8 for high-security system mockups.
  2. Enter the number of codes you need in the Count field, from a single sample up to a full batch for test data.
  3. Click Generate to produce the list of sample OTP codes in the output panel.
  4. 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 in Figma or Sketch prototypes
  • •Filling authentication screen screenshots for app store listings
  • •Testing auto-advance and paste behavior in OTP input components
  • •Writing security onboarding guides that show example 2FA codes
  • •Staging demo environments where real TOTP secrets aren't configured
  • •Creating training videos that walk employees through 2FA enrollment
  • •Generating sample codes for error-state UI (expired or incorrect OTP)
  • •Documenting API authentication flows in developer portals

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

What is a time-based OTP and how does it work?

A time-based one-time password (TOTP) is a short numeric code generated by combining a shared secret key with the current Unix timestamp, typically refreshing every 30 seconds. Apps like Google Authenticator and Authy compute these locally without a network connection. The server runs the same algorithm and accepts codes within a small time window to account for clock drift.

Are the codes from this generator real and usable for login?

No. These are randomly generated numbers formatted to look like TOTP codes. They are not derived from any secret key or HMAC algorithm, so they will never pass real 2FA verification. Use them only for mockups, testing input fields, screenshots, and documentation where realistic-looking — but non-functional — codes are needed.

What is the difference between 6-digit and 8-digit OTP codes?

Six-digit codes (1,000,000 possible values) are the RFC 6238 standard and are used by most consumer apps and websites. Eight-digit codes (100,000,000 possible values) reduce brute-force risk and are preferred in high-security contexts like banking or government systems. Unless your product spec explicitly calls for 8 digits, default to 6.

How many OTP codes should I generate at once?

For UI mockups, generating 5 to 10 codes gives you enough variety to cover different visual states — short first digit, leading zero scenarios, and varied groupings. For test suites that need to fill multiple fields or simulate retries, generating 20 or more at once saves repeated trips back to the generator.

Why do real OTP codes sometimes start with a zero?

TOTP codes are zero-padded to their full length, so a computed value of 42391 becomes 042391 on a 6-digit system. Your OTP input field must handle leading zeros correctly — storing the value as a string, not an integer. Use codes from this generator that start with zero to test that edge case specifically.

Can I use these codes to test my OTP input component?

Yes, for display and interaction testing. You can paste generated codes into your component to verify digit grouping, auto-advance between input boxes, and paste-from-clipboard handling. For functional end-to-end tests that verify actual authentication, you'll need a real TOTP library like otplib or pyotp configured with a test secret.

What RFC standard governs TOTP codes?

TOTP is defined in RFC 6238, which extends the HMAC-based OTP standard in RFC 4226. It specifies the 30-second time step, SHA-1 as the default HMAC algorithm, and 6-digit truncation. Many implementations also support SHA-256, SHA-512, and 8-digit codes as extensions to the base spec.

How do authenticator apps like Google Authenticator generate codes without internet?

They use a shared secret (scanned as a QR code during setup) combined with the current time, divided into 30-second intervals. The HMAC-SHA1 of those inputs is truncated to produce the code. Because both the app and server use the same algorithm and secret, no network call is needed to verify the code at login.