Developers implementing a 2nd authentication factor (2FA/MFA) into their software (and who are rightfully avoiding using emails or SMS messages) are probably implementing one of two well-known algorithms where the user retrieves a code from an app of their phone. If the one-time codes on the user's phone cycle on a regular interval, then that's using an algorithm known as Time-based One-Time Password (TOTP).

TOTP Manager is an all-in-one testing solution for developers implementing TOTP systems into their software. Websites like FreeOtp can be used to generate TOTP configurations, and apps like the Google Authenticator can be used to produce the codes from those configurations, but I'm not aware of a simple, well-known solution for doing both. Hence the creation of TOTP Manager - found at totp-online.tobythe.dev/!

TOTP Manager can be used to generate TOTP configurations of all shapes and sizes, as well as generate the codes to use in your software to log in. Note that it's not cryptographically secure, so you shouldn't be using it in production, but it does store your configurations in browser local storage, so they're there for you the next time you use it.

Support

While most of the TOTP apps that your users will be using only support SHA-1 hashing, 30 seconds time intervals, and 6-digit codes, TOTP Manager allows you to configure all the possibilities found in the TOTP IETF standard.

The supported hashing algorithms are:

• SHA-1
• SHA-224
• SHA-256
• SHA-384
• SHA-512

The supported time intervals (periods) are:

• 15 seconds
• 30 seconds
• 1 minute
• 2 minutes
• 5 minutes
• 10 minutes

TOTP Manager also supports code lengths between 6 and 10.

Time Ranges

It might not be very well known, but when a user inputs their TOTP code into a website, they usually don't need to use the current code specifically. Usually, software that implements TOTP authentication allows the user to input one of a range of codes to allow for clock-drift and the delay it takes for a user to use the code. This means if your code changes, it's still probably valid for using for around a minute or so - depending on the software's implementation.

For those developing TOTP into their app, TOTP Manager allows you to see a whole range of codes for a given configuration. By clicking on the context menu of a config and selecting "View code range", you can see five codes into the past and five codes into the future. This feature allows you to test the ranges your software supports and ensure that it's to your liking.

Apps

While TOTP Manager can be found and used at totp-online.tobythe.dev, it's also a Progressive Web App (PWA)! This means you can install it onto your computer or phone using the install button found in the browser; doing so will add it to your start menu, apps folder, or home screen.

For those with Android devices, you can also find TOTP Manager on the Google Play store, and those on Windows 10/11 can find it on the Microsoft Store!

Google Play: https://play.google.com/store/apps/details?id=uk.tobysmith.totp

Microsoft: https://www.microsoft.com/en-gb/p/totp-manager/9mtk984fzzrd

Tech Stack

TOTP Manager was built using Angular 12 and Sass with help from the PrimeNG UI component library. The website server-side renders using Express.js for fast initial paints and effective Search Engine Optimisation (SEO). The Android and Windows apps are versions of the PWA bundled up into the platforms respective .aap and .msix bundles. The Android bundles get automatically created in a CI/CD process using GitHub Actions and get automatically uploaded to the Android Play Developer Console for internal testing where they can be promoted to production. At this time, the same process cannot be achieved with the Microsoft Store due to how the bundles are created. I will add this as soon as the build process can allow for it!