2FA in NestJS Application & ReactJS using Google Authenticator

I recently had to implement a two factor authentication on a project for my company and it was a whole new thing for me. Sure I had already used 2fa before but I had never implemented it.

What is 2fa ? Well we all know that passwords aren't really secure enough to avoid security breaches so...

2FA is an extra layer of security used to make sure that people trying to gain access to an online account are who they say they are. First, a user will enter their username and a password. Then, instead of immediately gaining access, they will be required to provide another piece of information.

In this case, I was asked to use the google authenticator app to generate a 2fa code that would be used to authenticate the user after the login step.

Two factor authentication#

Here's the login flow for 2fa authentication:

1. The user logs in with his email and password
2. If the 2fa is not enabled, he can enable it using the turn-on route. This will generate a QrCode that the user will scan with the google authenticator app.
3. The use then uses the random code the app has generated to authenticate

Creating the 2fa system#

First we have to create a unique secret for every user that turns on 2fa, but we'll also need a special otp authentication url that we'll be using later to create a QrCode. The otplib package is a good match, so let's install it.

yarn add otplib

We should also update the user entity.

Then we create a method to generate the secret, backupCode and otpAuthUrl in the authentication service and return them. The TWO_FA_APP_NAME is the name that will appear in the google authenticator app.

We have to update the user with the secret and backupCode that has just been generated. Once again, this should all be in a database.

Now, we can generate the QrCode that will be used to add our application to the google authenticator app.

yarn add qrcode

Let's add the generate method in the authentication service.

Now we need to offer the possiblity for the user to turn on the 2fa. So let's add another property to the user interface.

Add the switch method in the users service

Add the method that will verify the authentication code with the user's secret

Testing#

So first we'll do a POST request to log in with the user and password:

This will return the following:

Then, we need to get the QrCode to add our app to the google authenticator app

This will return a base64 data url which in turn will happen to be a QrCode

If you scan this with the Google Authenticator App it should add your app:

And then you should be able to call the authenticate route with the current code from the google authenticator app