To build Otp verification for 2-way authentication using Node.js and Express

7 min readJul 16, 2020

Hello guys, so here we are going to make otp(one-time-password) verification for 2-way authentication using nodemailer module in node.js and express. One way authentication means authenticating the registering user on the basis of primary key, in most of the cases we take email as our primary key and search in our database that particular email exists or not, if it exists then we used to show error to the user stating “email exists”.

If email doesn’t exists then we register the user but their is one problem which is user can enter invalid email address too as we are not checking for the validity of email address, in our small projects it not cause a big problem but when we are working on a commercial project, this thing matters a lot, so to solve this project npm has given us a very useful package called nodemailer.

Here in this blog,we will build the same using nodemailer npm package.

So, to begin with we need node.js installed on your system along with any of your preferable editor like Vscode or sublime or any other.

So first of all let’s check our node version by writing the below command into your command prompt.

node -v

So, let’s initialize our node.js by passing the below command into the terminal of our working directory

npm init -y

On passing this your app will be initialized with package.json file, so let’s install all the dependencies and packages needed for the development of this project.

npm install express body-parser nodemailer express-handlebars nodemon

Here each packages work is describe as follow:

express : Allows you to define routes of your application based on HTTP methods and URLs.
body-parser : It is used to handle HTTP post requests and extract the entire body portion of an incoming request stream and exposes it on req.body.
nodemailer : Npm package used to send email from your provided email address to provided email address
express-handlebars : It is one of the most used templating engines for web applications, here I am using this you can use any like ejs, jade etc.
nodemon : It’s my favorite and it led to automatically restarting of our node application when any changes occur in our app.

So after installing all these dependencies our package.json file will have the name of all these dependencies.

Now let’s define our app directory i.e. the name of all the folders and files within them, our main file would be app.js you can change it to index.js also no issue that will contain the app listening info.

Here, app.js is our main app file, views folder will contains our templates, contact.handlebars consist main form that we will be using for filling out the user details and otp.handlebars will contain otp form used for verifying form and public folder will contain css files for styling of the app. Here we are using .handlebars extension as express-handlebars is our templating engine.

So let’s start coding in our app.js file and start a basic server.

The app is listening at port 3000, for starting the server just pass the below command in your app terminal

nodemon app.js

Now you don’t have to restart your server again and again to incorporate the changes done by you into the app that’s why it’s my favorite.

Now app is working so before heading forward for developing the routes for sending otp, let’s first construct our static and templating files, so first we will code the contact.handlebars which will only contain a basic html form which is to be filled by the user.

Just paste the below code in your contact.handlebars, their is nothing

Here, we have basic form containing basic fields like email, name and contact info.

Let’s do some styling of this form in style.css, so paste the below code into style.css

Now our styling is done, now complete the final static file named otp.handlebars, it consist a one field form having same styling and alignment as that of contact.handlebars, it takes only one parameter called otp, if it’s correct then user is successsfully registered otherwise error message will be shown:

Here we have 2 buttons submit and resend otp, If user has filled incorrect otp then error message will be shown up in {{msg}} in place of msg, so he can click over resend button to get a new otp. Now we have completed work of all the static files, so let’s do main coding in app.js file.

First of all we have to define a global variable email as we have to use email 2 times one in first sending then after resending otp again and again as we are not asking for email again and again.

So, first defined a global variable and transporter function for nodemailer:

Here in transporter function, it contain info about the host and port no. of your email services, I am using gmail, you have to write your email address as well as your password for letting nodemailer to send otp from your email account.

One thing keep in mind that you have to allow permission for non-secure apps in your gmail setting for letting nodemailer to use your gmail account.

Now our first route is of directing user the main page i.e. contact.handlebars

It simply render contact.handlebars page to the localhost:3000/

Now let’s generate our otp and we will make it global as we have to use many times in different routes.

Now, let’s define our send route that we will be called when user submit the contact form, in this we will just use the transporter function defined above and send the otp to the email filled by the user

Here, we will render the otp.handlebars to the user by sending the otp to his email address.

Now, next route is for resend otp, it will be gonna same like this with some minute changes

Here we are sending email to the user email that is stored in global variable email, after sending the email otp page will be rendered again with the message that otp has been sent.

Now, if user got the otp and he filled into the form and press submit, then what will happen we will define in next route which is verify

Here, if otp is correct then we will send this message to the user on new window that you have successfully registered but if it’s wrong then error message will be shown on the same page.

By now our app is complete, you can add this functionality in you app, now I am adding full app.js

So let’s test our app in the browser by running the app.

when we will open below url in our browser, our form will be shown up