🔐 Build & Run Your Own TOTP Generator in Under 5 Minutes — with Amazon Q Developer

#devchallenge #awschallenge #ai #webdev

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: Crushing the Command Line

Context

We all know that Multi-Factor Authentication (MFA) is essential for securing our accounts. But let’s be honest—how many times have you felt frustrated opening your phone, launching the authenticator app, and copying the OTP code every time you're logging in somewhere on your work computer or laptop?

Worse, what if your phone is de*d, lost, or simply not nearby? You’re locked out.

That’s why I built this project: a TOTP (Time-based One-Time Password) generator tool available as both a command-line interface and a lightweight frontend.

It lets you instantly generate TOTP codes from a saved secret—no phone required.

What I Built

I built a TOTP (Time-based One-Time Password) generator tool that runs on both the command line and a simple frontend web interface. This tool solves the problem of securely generating one-time passwords commonly used in 2FA (Two-Factor Authentication) systems.

⚙️ CLI tool: Instantly generates TOTP codes from a shared secret via terminal. It supports auto-copying the generated code using the clipboard.

🌐 Frontend demo: A minimal web interface that visualizes the TOTP flow and shows the code updating every 30 seconds.

This tool is lightweight and designed for developers who frequently work with authentication flows, or for testing their 2FA setup during app development.

Demo

🌍︎ Live page: https://longphanquangminh.github.io/totp-generator-project/web

After asking Amazon Q Developer to build the application and generate an initial flow diagram, I took the time to deepen my understanding of how TOTP works. I then created my own visual explanation to solidify and share that understanding (with a demo secret key, so it's just fine like that):

📊 My custom TOTP flow diagram (made with Excalidraw): Link

🔑 Extracting a TOTP Secret Key from a GitHub QR Code
This screenshot shows how I used my CLI tool to scan a QR code (e.g., from GitHub's 2FA setup) and retrieve the base32 secret key.

When scanning a QR code with my Samsung phone (just once), you can extract the secret key from the QR's value, which typically follows this format: otpauth://[OTP_type]/[issuer]:[user_identity]?secret=[secret_key]&issuer=[issuer]

For example, if the value is: otpauth://totp/GitHub:longphanquangminh?secret=ggg&issuer=GitHub => Then the secret_key would be ggg

🖥️📱 Matching OTPs on Both CLI and Web UI
To demonstrate accuracy, I used the same TOTP secret in both the CLI and web tool. As shown below, both generated the same OTP codes, just like a real authenticator app would:

Code Repository

🔗 GitHub Repo: https://github.com/longphanquangminh/totp-generator-project

/cli – Node.js terminal utility with clipboard integration.
/web – Frontend TOTP display tool with diagram and styling.

How I Used Amazon Q Developer

Amazon Q Developer played a huge role in helping me build and polish this tool quickly. Here’s how I used it:

🧠 Idea to Execution — Powered by Amazon Q

Logged into Amazon Q Developer via q login from my terminal.
Opened Q Chat via q chat to brainstorm implementation details and flow.
Prompted Q: How do I implement a TOTP generator CLI tool in Node.js that auto-copies the result to clipboard? → Q provided sample code using otplib and clipboardy. But in this case, after doing some research, I decided to use otpauth instead of otplib because it's newer and offers more flexible customization of the algorithm and time settings.
Used Q to help draw a simple diagram explaining the TOTP flow (time + secret → HMAC → OTP).
Asked Q to help improve the CLI experience (formatting, error handling, feedback, timer).
Switched to the frontend: I asked Q to style the TOTP web page, make it responsive, and implement the 30-second countdown bar.
Completed both tools in a much shorter time than building from scratch.

🚀 With the help of Amazon Q, I built both the CLI tool and the frontend app in literally under 5 minutes.

💡 Tips for Using Amazon Q Developer

Be clear and specific in your prompts.
Ask for architecture and visual explanations too—not just code.
Iterate with Q! Ask it to improve or adapt to your stack.

Disclaimer

This tool was built for educational purposes and as a submission for the Amazon Q Developer “Quack The Code” Challenge. Please use it responsibly. Personally, I believe if you're using a work or company-issued computer — especially as a software engineer — it's acceptable to store TOTP secrets locally for convenience, as long as your device is secured. Relying solely on a phone with many apps also carries potential risks.

👨‍💻 Built by longphanquangminh and Amazon Q Developer