Generate TOTP codes right from your browser for Two-Factor Authentication (2FA). Compatible with authenticator applications like Google Authenticator, Authy and Microsoft Authenticator.
Demo,
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
- Web Crypto — Used to calculate the HMAC. Browser Support.
- Uint8Array — Used to store and process binary data according to RFC 6238 (TOTP) and RFC 4226 (HOTP). Browser Support.
- Async/Await — Easier to work with promises. Browser Support.
- 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,
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ć