Building Authentication Service with TOTP (Time-Based OTP) Part 2. The Client

If you haven’t read the first part, I highly recommend to check first.

Series

• Building Authentication Service with TOTP (Time-Based OTP) Part 1. The Server
• Building Authentication Service with TOTP (Time-Based OTP) Part 2. The Client

Optional Requirement

• http server

Goal

In this part two of the series we are going to build a client using HTML and javascript (jQuery). The finished product will be 2 pages one for login and the other for registering.

In the register page, when the user successfully registers the page will show a QR code that will later be used to generate TOTP Token.

When the user wants to log in, they will have to provide a TOTP Token that’s generated through third-party application such as Google Authenticator or using a browser plugin such as this.

Example of authenticator for chrome plugin

The Client

Our project structure will look like this

├── index.html
├── index.js
├── qrcode.js
├── register.html
├── register.js
└── style.css

• index.html will be the login page
• index.js will contain a script for login
• qrcode.js is a library to generate qr code.
• register.html will contain the register page and show the QR for authenticator

The most important part is in register.js, after a user successfully registers, the page will show a QR code with a URL that complies with authenticator stardard

otpauth://TYPE/LABEL?PARAMETERS

example

otpauth://totp/UserName1:test@google.com?secret=JBSWY3DPEHPK3PXP&issuer=MyCompany

//register.js
 function showQr(response) {
        const username = response.username;
        const secretKey = response.secretKey;
        const totpUrl = `otpauth://totp/Example:${username}?secret=${secretKey}&issuer=Example`;
        new QRCode(document.getElementById("qrCode"), totpUrl);
    }

You can see the full code here

You can run both applications by running these commands

# starting the server - port :8081
./gradlew run

#starting the client - port :8080
http-server .

Try registering in localhost:8080/register.html

you will get a QR code

and use your authenticator of choice, I am using Authenticator App

Now when you log in you can input the code that you get from the authenticator.

Conclusion

TOTP only provides one extra layer to your authentication, it’s still best to keep in mind other aspects of security.

The benefit of using TOTP is relatively easy to set up and is widely used by large systems such as Git Hub.

Full code