Innovation Labs - TOPT Test

Shared-secret TOTP in browser and API

A compact Next.js demo using React, shadcn/ui styling, Web Crypto in the browser, and Node crypto on the server.

Shared Secret

SHA-1 · 6 digits · 5 min expiry

default
JFHE4T2WIFKEST2OJRAUEUZRGIZTINJW
Step 1

Generate TOTP

Codes generate automatically and refresh every 5 minutes.

Expires in 5:00
Browser crypto
------
generatingNot generated
5:00
left
API crypto
------
generatingNot generated
5:00
left
Step 2

Load iframe

The left side uses client-generated TOTPs. The right side uses server-generated TOTPs.

Client TOTP

Top iframe follows the live token. Bottom iframe uses the token from Jul 26, 2026, 07:11:09 AM UTC.

Client TOTP live iframe

Loads cloudfront.html with the current 5-minute token.

pending

https://totp-cdn.innovationlabs-nonprod.mml.cloud/cloudfront.html

Client TOTP page-load UTC iframe

Loads client.html with the snapshot token.

pending

https://totp-cdn.innovationlabs-nonprod.mml.cloud/client.html?createdAt=1785049869

Server TOTP

Top iframe follows the live token. Bottom iframe uses the token from Jul 26, 2026, 07:11:09 AM UTC.

Server TOTP live iframe

Loads cloudfront.html with the current 5-minute token.

pending

https://totp-cdn.innovationlabs-nonprod.mml.cloud/cloudfront.html

Server TOTP page-load UTC iframe

Loads client.html with the snapshot token.

pending

https://totp-cdn.innovationlabs-nonprod.mml.cloud/client.html?createdAt=1785049869