Creating a Robust OTP Manager Web App with Web Technology

Background

OTP stands for "One-Time Password." It is a security feature commonly used in two-factor authentication (2FA) systems to enhance the security of online accounts and transactions. OTPs are temporary codes or passwords that are valid for a single use or a short period of time, typically 30 to 60 seconds.

What is this?

I recently wrote an application to manage OTP. This is a basic web application developed using Remix.js and React. This app offers Azure AD Single Sign-On (SSO) login functionality and enables you to oversee Multi-Factor Authentication (MFA) Time-Based One-Time Password (TOPT) tokens from various providers.

Why I am doing this?

Numerous apps offer the capability to sync and manage your OTPs. However, many of them suffer from common issues, including limited cross-platform support (restricted to Windows, Mac, Android, or iOS), deficiencies like the absence of search and sorting features, inconsistent user experiences across various platforms, reliance on the vendor for ongoing support, vulnerability due to their large size making them attractive targets for hackers, and more.

The source code for this project can be found at my personal OTP repo.

Tech stack

• Remix JS / Node JS.

• MUI.

• Instascan for QR Code scanner.

• otplib for OTP code generation.

• qrcodejs for generating QR Code from OTP Auth URL.

• Data is currently persisted using file. Encryption will come at a later dates.

• Azure AD for OAuth / authentication.

Things I learn

The format for OTP Auth

The OTP Auth format is typically represented by a specific URL format beginning with "otpauth://totp." Within this URL, there is a query string featuring a key named "secret," which contains the secret information alongside any other parameters required for OTP token generation. Below is an example illustrating these parameters.

How to generate OTP code?

In Node.js, you have the option to utilize the "otplib" library for generating OTP Auth tokens. The process essentially involves parsing the URL starting with "otpauth" and extracting the "secret" query string. This extracted secret is then employed to generate the authentication code. Below is a code example illustrating this procedure.

Generate QR Code for import into applications

In today's world, the majority of devices come equipped with built-in cameras, making it much simpler to create a QR code that can be scanned and imported into other applications like Twilio Authy or Google Authenticator.

To generate a QR code image from the OTP Auth URL, you can depend on the "qrcode" library, which produces a data URL for displaying the QR Code associated with the OTP Auth URL. Below is the sample code:

Parsing and Scanning QR Code

A prevalent method for QR Code import involves using the phone's camera to capture the QR code and potentially extract the OTP Auth URL. Implementing this in HTML and JavaScript can be challenging. Fortunately, there is a library named "instascan" available for parsing QR Codes and retrieving the OTP Auth URL from an image.

A few things to note is that, Camera API requires the web app to be served using HTTPS if the domain is not localhost. A camera is not a mandatory peripheral, and in the case of smartphones, users may have multiple cameras. Therefore, it is crucial to address scenarios where users do not have a camera or have multiple cameras. In such cases, you should offer a method for them to select the desired camera.

The code primarily involves working with two types of objects: a scanner and the camera. You'll need to link the scanner to a video tag, which will display the live feed from your camera. Below is a sample code illustrating how to utilize Instascan for this purpose.

Summary

It's truly fascinating to witness the capabilities of web browsers today. With access to features like the camera and microphone, a world of possibilities for immersive applications opens up through web technology. Many have already begun leveraging the camera API for real-time communication and video conferences. However, there remains immense untapped potential in using the camera as an input device for purposes beyond streaming and video conferencing.

I believe that in the future, we will see even more inventive uses of the camera API that go beyond traditional video conferencing applications.

My journey with this open-source project has been a valuable learning experience, constantly unveiling the endless possibilities of what the web can achieve. Let's continue to explore and innovate in this ever-evolving realm.