Setup 2FA using TOTP in your app

You must have seen many apps/websites — while setting up 2FA you may have asked to install an authenticator app on your mobile which will provide you token to authenticate. Let’s see how you can apply the same in your app.

What is TOTP?

A time-based One-time Password (TOTP) is a computer algorithm that generates a one time password(OTP) that uses the current time as a source of uniqueness.

So many apps are available on the Play Store or Apple App Store which you can use to authenticate. We will be using Google Authenticator.

How does the TOTP Auth flow work?

1. Enable 2-Factor Authentication in the application
2. Use Authenticator App to set it up
3. Save verified user secret into the database — in the TwoFactorSecret column (You can name it whatever you want to) associated with the user who verified
4. Add a check when user login — after entering username/email or password, if 2-Factor auth is enabled then ask the user to share the latest token from the authenticator app, else — flow will work as it is.

If the user has activated 2-factor authentication, the app will not allow them to access it until they enter the proper code from the authenticator app.

Enabling 2-Factor Auth using TOTP in the Application

When the user will ask to enable 2F on their account, the application will provide a secret and convert it into a QR code and display it on the screen.

To do this — we will use two npm packages
1. speakeasy — https://www.npmjs.com/package/speakeasy
2. qrcode — https://www.npmjs.com/package/qrcode

First, call speakeasy to create a secret using the following:

let secret = speakeasy.generateSecret({
 name: `${NAME_OF_APP} (${req.user.userName})`,
 });

Then, create QRcode — this will return an image which you can assign into image tag src.

QRCode.toDataURL(secret.otpauth_url, function(err, data_url) {
console.log(data_url);
});

Also, give a textbox where users will input a code issued by the authenticator app after scanning the QR code and submitting it.

On submit — it will verify secret and code provided if it’s verified, then it will further proceed to make the settings related changes into the database like Enable isTwoFactor flag to true and save secret.

Handle 2-Factor Auth at the time of login

In order to sign in to the application, the user enters username/email and password the request will go and check into the database if the information is correct, further, it will check if 2FA is enabled for the user — if yes then it will return 2FA is required and the secret.

It will open a new screen for the user with the textbox to enter the code. and when the user will submit it — it will verify the secret and code again.

let verified = speakeasy.totp.verify({
secret: secret,
encoding: 'ascii',
token: token,
});
if(verified){
  return {verified: true, token: getToken()}
}
else{
  return {verified: false, message: '2FA verification failed!'}
}

If users will verify — they would be able to login sucessfully.

I’ll an example and a video on the same soon. Let me know if you have any questions.

Please do follow us for more updates.

Feel free to connect with me on Twitter and LinkedIn 💖
TechVraksh (Twitter and LinkedIn)