Generate TOTP codes right from your browser for Two-Factor Authentication (2FA). Compatible with authenticator applications like Google Authenticator, Authy and Microsoft Authenticator.

Demo,

• Netlify: totp.maverickgeek.xyz
• CloudFlare: totp-generator-web.pages.dev

The application only uses the JavaScript APIs provided by the browser. It consists of only a single HTML file, which allows it to work offline by running it from disk. The design allows it to work without installation and in environments like Tails.

Assumption: Possible to input the TOTP key into the web application's input field. (e.g, Copy/Paste or Manual typing using a hardware/virtual keyboard based on the threat model).

The default settings are compatible with Google Authenticator,

• HMAC Algorithm: SHA-1
• Period: 30 seconds
• Digits: 6

Use the “Advanced Options” menu to change the above values.

The application supports secret keys in the following formats,

• Base32 (case-insensitive) — e.g, XY7MXDNK5ZEKJT4Y or xy7mxdnk5zekjt4y
• Base32 with spaces (case-insensitive) — e.g, g5od kqdo hqkd 4kup qr2d txc2 2cfh wylh

1. Web Crypto — Used to calculate the HMAC. Browser Support.
2. Uint8Array — Used to store and process binary data according to RFC 6238 (TOTP) and RFC 4226 (HOTP). Browser Support.
3. Async/Await — Easier to work with promises. Browser Support.
4. Custom Elements — Build the UI out of components without a JavaScript framework. Browser Support.

• ESLint — JavaScript linter
• Prettier — Code formatting
• Live Server — Auto-reload on changes to site/index.html
• Visual Studio Code — Code editor with ESLint and Prettier extensions

Content Security Policy whitelists assets (e.g, JavaScript, CSS) by their SHA-256 hash. A minimal build tool (watch.js) updates the CSP hashes. A meta tag is the preferred method of policy configuration as Netlify and CloudFlare host the site.

Use the following command to start the build tool which watches for changes to src/index.html,

$ npm run watch

Use the following command to start live-server,

$ npm run start

Get started working on this repository from your browser using Gitpod. Click on the button below to create a GitPod environment,

• GitHub: github.com/k3karthic/totp-generator-web
• Codeberg: codeberg.org/k3karthic/totp-generator-web

Development happens on the devel branch and merged with main for a release. A GitHub build hook pushes a new version for every update of the main branch using the contents of the dist folder.

Use the following command to update the dist folder. The command removes CSP configurations which are only required for development.

$ npm run build

References used during development,

• bellstrand/totp-generator — Reference TOTP implementation
• RFC 6238 (TOTP)
• RFC 4226 (HOTP)
• Background Pattern — Background pattern by Tomislava Babić