A client-side TOTP code and QR generator. Enter or generate a base32 secret, tune the TOTP parameters, and get a live rotating code plus a QR code you can scan with any authenticator app.
Live: totpstudio.jose2kk.com
- Live 6/8-digit TOTP codes with a wall-clock countdown
- Random base32 secret generator
- Configurable algorithm (SHA-1 / SHA-256 / SHA-512), digits (6/8), and period (30s/60s)
- Scannable QR code with optional issuer and account labels
- Copyable
otpauth://URI - Compatibility warning when the chosen algorithm isn't supported by common authenticator apps
- Dark / light / system theme
- 100% client-side — the secret never leaves the browser, no storage, no network calls
- Next.js 16 with
output: 'export'(fully static build) - React 19.2, TypeScript 5
- Tailwind CSS v4 + shadcn/ui
- otplib for TOTP generation
- react-qr-code for QR rendering
- next-themes for theme management
npm install
npm run devOpen http://localhost:3000.
npm run buildProduces a static export in out/ that can be served from any static host.
Deployed to Vercel as a fully static site — no server routes, no API endpoints. Any static host (Vercel, Netlify, Cloudflare Pages, S3 + CloudFront, GitHub Pages) will work.
All TOTP logic runs in the browser. The secret is held in React state only — it is never persisted to localStorage, sessionStorage, cookies, or sent over the network.
Built by Jose Andres Morales · Repository