TOTP-based Two-Factor Authentication implementation with Spring Security and Angular

Hello Devs 👋 ! . We will implement TOTP (Time-based One Time Password) in this story using Spring Security and Angular. We’ll generate QR codes recognizable by Google Authenticator and verify single sign-on with two-factor authentication.

· Prerequisites
· Overview
∘ What is TOTP?
∘ How does TOTP work?
∘ TOTP algorithm
· Let’s get to the code
∘ TOTP Flow
∘ Implementation
· Conclusion
· References

Prerequisites

This is the list of all the prerequisites:

• Spring Boot / WebFlux 3+
• Maven 3.6.3
• Java 21
• MongoDB instance (v6 or later) installed
• Basic knowledge of Angular and Typescript (Angular 18 or later)
• IntelliJ IDEA, Visual Studio Code, or another IDE

Overview

What is TOTP?

Time-based one-time password (TOTP) is a computer algorithm that generates a one-time password (OTP) using the current time as a source of uniqueness. As an extension of the HMAC-based one-time password algorithm (HOTP), it has been adopted as Internet Engineering Task Force (IETF) standard RFC6238. — https://en.wikipedia.org/wiki/Time-based_one-time_password

How does TOTP work?

• Shared Secret: Both the client (e.g., your phone or authentication app) and the server (e.g., the website or service) share a secret key. This key is used to generate the password.
• Time-based Algorithm: The TOTP algorithm uses the current time (usually in 30-second intervals) as a factor in generating the one-time password. It combines the shared secret and the current timestamp to generate a unique password.
• Dynamic Password: The generated password changes every 30 seconds (or another configured time interval). This means that even if someone intercepts the password, it will quickly become…