Time-based one-time passwords (TOTP) are a common security feature in Identity Providers (IdP). There are use cases beyond IdP, mine was "Understanding what it takes").

TOTP interaction

You have two phases: enrollment and use. During enrollment a secret is generated and (typically) presented as QR Code. A user points one of the many Authenticator apps to it and gets a numeric code that changes once a minute.

When you use it, you pick the current number and paste it into the provided field. The backend validates the correctness with some time leeway.

What it is not

Typically when enrolling you also get recovery codes, sometimes called scratch codes. They are NOT part of TOTP and implementation is site specific and not standardized. An implementer might choose to check your recovery codes when your TOTP fails or provide a separate interaction using those.

The initial confirmation, is actually the first instance of "use" and one could have a successful enrollment without it. This is depending on the implementation.

It isn't foolproof. An attacker could trick you into typing your TOTP code into a spoofed form or just hijack your session (cookie). That's why responsible web apps run a tight security with CSP and TLS (and once browser support is better Permission Policy)

Setting up a sample application

We need a landing page and its supporting files (css, js, png) served statically and 3 routes:

• request
• save
• verify