DEV Community

Cover image for Securing Your App: TOTP Authentication with Spring Boot and Angular — Part One — Overview & Project Setup

Posted on • Updated on • Originally published at Medium

Securing Your App: TOTP Authentication with Spring Boot and Angular — Part One — Overview & Project Setup

What is TOTP?

TOTP stands for Time-based One-Time Passwords and is a common form of two-factor authentication (2FA). Unique numeric passwords are generated with a standardized algorithm that uses the current time as an input. The time-based passwords are available offline and provide user-friendly, increased account security when used as a second factor.

TOTP is also known as app-based authentication, software tokens, or soft tokens. Authentication apps like Microsoft Authenticator and Google Authenticator support the TOTP standard.

When TOTP?

Imagine a secure system that combines something you know (like a password) with something you have (a device generating a one-time password). That’s where TOTP comes in.

How does TOTP work?

When the user registers into our application system will generate a secret key and that will be stored in DB. The system will generate a QR code that combines the Algorithm, number of digits, and period that will be used by the server to generate the TOTP.

How TOTP QR code generated and user registration
Upon login, the user will provide the credentials and validate. As a next step, they will be prompted for OTP. This will be generated by the authenticator application, this will be validated by the server using the time bucket the OTP is entered.

TOTP validation


We will implement the Backend server in Spring Boot and Mongo DB as a Persistence layer. Angular 14 is our Front end which will connect to the backend over rest endpoints. We will be using “dev.samstevens.totp” to generate and verify TOTP.

Arch High-level

End-Point Implementation Overview:

register endpoint will accept the registration details including the username and password as payload. It will check for user existence, if the user already exists then respond with a UserAlreadyExist exception, else Generate the Secret key, encode the password received, and persist the user details. Further, generate the QR code and add it to the response.

/register workflow

This endpoint accepts username and TOTP as payload. It will fetch the secret key with the username provided and pass it to the verify method of the “dev.samstevens.totp” code verifier. If the code is valid then it will generate the JWT and respond. Else it will respond as an Invalid Token.

/verifyTotp workflow

This endpoint will get the username and password as payload and validate with the AuthProvider. If the credentials are valid and the user opted for MFA then respond with MFA Required. Else generate the JWT.

/login workflow

Project Setup:

Create a Spring Boot Project with the following dependencies,

Enter fullscreen mode Exit fullscreen mode


name: mfa-server
host: localhost
port: 27017
database: mfa-server

Create a websecurity configuration class for all endpoints. Also, create a bean if BCryptPasswordEncoder.

public class AppSecurityConfig {

    public PasswordEncoder passwordEncoder(){
        return new BCryptPasswordEncoder();

    public SecurityFilterChain defaultFilterChain(HttpSecurity httpSecurity) throws Exception {
        return httpSecurity
                .cors(cors-> cors.disable())
                .csrf(csrf-> csrf.disable())
                .sessionManagement(session-> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                .authorizeHttpRequests(auth-> auth
Enter fullscreen mode Exit fullscreen mode

Create a User Entity. This stores the user details, credentials, and roles.

`@Document(collection = "users")
public class User {
    private String id;
    private String username;
    private String password;
    boolean mfaEnabled;
    private String secretKey;
    private String firstName;
    private String lastName;
    private boolean active;
    private Set<Role> roles = new HashSet<>();

Enter fullscreen mode Exit fullscreen mode

Create UserRepository.

public interface UserRepository extends MongoRepository<User, Long> {
    Optional<User> findByUsername(String username);

Create a Service that Helps us Register and Verify Totp

`public interface UserService {
    MfaTokenData registerUser(User user) throws UserAlreadyExistException, QrGenerationException;
    boolean verifyTotp(final String code,String username);
Enter fullscreen mode Exit fullscreen mode

Create a Controller exposing the endpoints for /register, /login, and /verifyTotp.

We will look into the Implementation in our next blog.

Angular Project Setup

Create an angular project and include Bootstrap.

`"styles": [
"node_modules/bootstrap/scss/bootstrap.scss" ,
"scripts": [
Enter fullscreen mode Exit fullscreen mode

Create a client service that connects with the backend over the rest endpoints.

  providedIn: 'root'
export class AuthClientService {

  constructor(private http: HttpClient) { }

  public login(payload: string): Observable<MfaVerificationResponse> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      environment.apiUrl + '/login', payload, httpOptions

  public verifyTotp(payload: MfaVerificationRequest): Observable<MfaVerificationResponse> {
      environment.apiUrl + '/verifyTotp', payload

  public register(
    payload: string
  ): Observable<string> {
      environment.apiUrl + '/register',payload,
      { responseType: 'text' }
Enter fullscreen mode Exit fullscreen mode

Create a Login, Register components as per your wish, and connect them with the client. You can refer to my implementation from below GitHub.


Application developed using Angular 14 and Bootstrap.

Components involved.

  • Login
  • Register
  • TOTP
  • Home Module

Check out the complete code implementation here

Top comments (0)