To build Otp verification for 2-way authentication using Node.js and Express
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
localhost:3000
And we have to fill it
So when we click the submit button just see your browser you will see the message sent id along with the send otp
And then to your mail-box you will find same otp there also
You can see both the otp are same and new page will be shown to user
Here if I fill wrong otp then error message will be shown
After clicking over resend button new otp will be sent to the user
And after filling the correct otp success message will be shown
So that’s all with this….
Conclusion
So, in this blog we have learnt how to make 2-way authentication system by otp verification using nodemailer module in node.js and express
I hope you all enjoyed a lot!!!!!
For more information and code-review just see my github repository that has all the code for this functionality
Thankyou-)
Have a nice day and happy coding!!!!