Software Design

Multi-Factor Authentication via TOTP Step-by-Step

UML Sequence Diagrams · made in Skemio

Sequence diagram detailing TOTP setup and verification between authenticator app, client browser, backend server, and database.
Sequence diagram detailing TOTP setup and verification between authenticator app, client browser, backend server, and database.
Open it in SkemioMake your own

What it shows

  • Base32 shared secrets configure both authenticator apps and verify servers
  • HMAC-SHA1 computes hashes using current Unix time divided by 30-second windows
  • Allow +/- 1 step drift window to prevent clock skew validation failures

The takeaway

TOTP works offline because client and server independently compute HMACs from shared secrets and synchronized clocks.

More uml sequence diagrams