Securing your web applications from unauthorized users is very important. You can increase the security with One Time Password (OTP) authentication in addition to the login credentials. An OTP is sent to the user’s email when they want to log in. This is a form of multi-factor authentication (MFA).
\nIt is essential to learn how to apply Multi-Factor authentication in real-world applications, and this tutorial got you covered. This tutorial explains how to store users’ sessions in the Redis Store and send OTP using Nodemailer for authentication.
\nThis tutorial helps you understand:
\nTo follow this tutorial, make sure you have:
\nAs everything is in place, let’s jump right in.
\nIn this section, you will learn how to start an Express server.
\nMulti-Factor Auth, but you can decide to call it anything you want.Open the terminal in the project’s path and run the following code to install the dependencies needed to start the Express server.
\nnpm init --y\nnpm i express\nnpm i -D nodemonThe Express dependency will be used to set up the backend server and nodemon, installed as a devDependency, which will watch the file system and restart the server when a change is made.
\nNodemailer is a Node.js module that allows you to send emails using an email service or an SMTP server.
\nTo set up Nodemailer, you need to provide your email or SMTP service credentials.
\n\n\nGoogle mailing service (Gmail) will not support the use of third-party apps or devices like Nodemailer starting from May 30, 2022.
\n
For this tutorial, we will use Microsoft’s Outlook Maling Service to send emails.
\nAdd your phone number if you are prompted to do so.
\n\n\nThis step can be skipped.
\n
After setting up your Outlook account, the next step is to use your Outlook account’s credential to send emails through Nodemailer.
\nOpen your terminal and install the nodejs-nodemailer-outlook dependency.
This module only needs your Outlook account credentials and message to send emails.
\nNow, run the code below in your terminal to install the nodejs-nodemailer-outlook dependency:
npm i nodejs-nodemailer-outlookImport the nodejs-nodemailer-outlook module into server.js and add the configurations needed to send emails:
const express = require("express");\nconst app = express();\napp.use(express.json());//Enabling the body attribute.\nconst PORT = 5000;\n\napp.post("/auth", (req, res) => {//Post request to 'http://localhost:3000'\n const nodeoutlook = require("nodejs-nodemailer-outlook");//Importing the module\n nodeoutlook.sendEmail({\n auth: {//Outlook Account Credentials \n user: "<yourOutlookEmail@outlook.com>",//Email\n pass: "<yourOutlookPassword>",//Password\n },\n from: "<yourOutlookEmail@outlook.com>",\n to: req.body.email,//Getting the email\n subject: "OTP",\n text: req.body.message,//Getting the Message\n onError: (e) => res.status(500).json({ message: `an error occurred ${e}` }),\n onSuccess: (i) => res.status(200).json({ message: i }),\n });\n});\n\napp.listen(PORT, () => {\n console.log(`Server running on port ${PORT}`);\n});To test the application, use an API testing application like Postman and make a POST request to http://localhost:5000/auth, passing email and message to the body of the request.
You can generate this random number using: This tutorial uses the In the terminal, install the After installing the Add the OTP to the message sent to the user’s email. Make a POST request to Check the email address for which the OTP is sent. Now that the OTP part of the authentication is settled, let’s set up the next part of the authentication. This section covers what Redis is and how to use the Redis Store to cache data. Redis, also known as Remote Dictionary Server, is an open-source (BSD licensed), in-memory data structure store. Developers use it as a database, cache, and message broker. It is a fast, lightweight database that structures data in key-value pairs. Storing and retrieving cached data from Redis is faster than traditional databases as it retrieves and stores data in the main memory (the RAM). The data can be users’ sessions or responses to requests. The only downside is that data can be lost if the computer crashes. Setting up Redis locally for Linux and Mac computers is simply straightforward. Follow the official documentation for Linux and macOS For Windows, you need to install Windows Subsystem for Linux Version 2 (WSL 2) and a Linux Distro on your local machine. This tutorial uses Redis Cloud to set up the Redis database. Redis Cloud starts with Free a subscription fee that grants 30MB of storage. This is perfect for this simple application. Create a new Redis Cloud account if you don’t have one. Click on Configurations and copy your Public endpoint. This endpoint will be used to set up the Redis application. Still on the Configurations tab, copy your Default user password. Run Start up the server in your terminal and view the result. Now that Redis has been added to the application, let’s set up users’ sessions using Express Sessions. Install the The Import Attributes stored in a session without a database are removed after the server refreshes. With the help of Redis cache, attributes in a session can be retrieved fast and saved even when the server restarts. The user’s OTP should be saved in the session before sending it to the user’s email. Open your The following code stores the OTP in the session, redirects when the email has been sent, and verifies the OTP provided with the one stored in the session. Preventing unauthorized/unauthenticated users from accessing a specific route or a piece of important information is essential in various applications. In this section, you'll learn how to create a middleware that will authenticate the users accessing a specific route. In this tutorial, the protected route is Create a Create the The logout route will also be protected using the It’s time to put the backend code into actual functionality. This tutorial makes use of Embedded JavaScript Template (EJS) as the frontend of this application. Install the EJS Module Once the installation is complete, open your In this application, there are only three routes. The login, verify, and home routes. You need to render an Modify the Create a folder named When the server is rendering an ejs file, it checks in the views folder for the file. So, this name is not optional. Style these various routes as you like Add the following code to Open This is the route that is protected. The page can contain sensitive information that must not be accessible to unauthenticated users. Open This tutorial taught you how to set up Nodemailer, Redis Cloud, and Multi-Factor Authentication. With these, you've learned to secure your applications from unauthenticated users. Do you think you can use this to build complex and scalable applications? You can also set up MFA with LoginRadius instead of setting up everything manually with Redis. You can sign up for a free account here. Refer to this developer-friendly documentation to get started with your MFA setupdocs/guide/mfa/) for your web and mobile apps. Click here to access the sample code used in this tutorial on GitHub\n
\nMath.trunc(Math.random() * 1000000)nanoid module to generate random numbers.\n
\nnanoid module. This module will create a random set of characters as the OTP. Run the following command in your terminal:
\nnpm i nanoid@3.3.4 #Version compatible with Nodejsnanoid module, import it into server.js and use it to generate six random digits.
\nconst nanoid = require("nanoid");//Importing the naonid module\n\nconst OTP = nanoid.customAlphabet("1234567890", 6)();//Generating
\nconst express = require("express");\n\nconst nanoid = require("nanoid");\nconst app = express();\n\napp.use(express.json());\nconst PORT = 5000;\n\nconst OTP = nanoid.customAlphabet("1234567890", 6)();\n\napp.post("/auth", (req, res) => {\n const nodeoutlook = require("nodejs-nodemailer-outlook");\n\n nodeoutlook.sendEmail({\n auth: {//Outlook Account Credentials \n user: "<yourOutlookEmail@outlook.com>",//Email\n pass: "<yourOutlookPassword>",//Password\n },\n from: "<yourOutlookEmail@outlook.com>",\n to: req.body.email,//Getting the email\n subject: "OTP",\n text: `Your One Time Password is ${OTP}`,//Adding the OTP\n onError: (e) => res.status(500).json({ message: `an error occurred ${e}` }),\n onSuccess: (i) => res.status(200).json({ message: i }),\n });\n});\n\napp.listen(PORT, () => {\n console.log(`Server running on port ${PORT}`);\n});http://localhost:5000/auth, passing only the email address.Redis
\nWhat is Redis?
\nRedis Cache
\nSetting up Redis
\n\n
\nnpm i redis in your terminal. Import the redis dependency into server.js, and set up the redisClient using the Redis cloud endpoint.
\nconst redis = require("redis");\n\nconst redisConnect = async () => {//This function will be removed later in the tutorial\n try {\n const redisClient = redis.createClient({\n url: "redis://redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com:12345", //This is an incorrect end point, insert your Public endpoint\n port: 12345,//The PORT is the last five digits in the url\n username: "default",\n password: "1234567890ABCDEFGHIJKLMNOPQRSTUV",//Input your Default_user_password\n });\n await redisClient.connect();//Connecting to Redis Cloud\n await redisClient.set("Hello", "Hello from LoginRadius");//key=Hello, value=Hello from LoginRadius\n const Hello = await redisClient.get("Hello");//Getting the value using its key=Hello\n console.log(Hello);\n } catch (error) {\n if (//Running the function again when there is a network error\n error.message ===\n "getaddrinfo ENOTFOUND redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com:12345" ||\n error.message ===\n "getaddrinfo EAI_AGAIN redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com"\n ) {\n return redisConnect();\n }\n console.log(error.message);\n }\n};Sessions
\nSet Up Express Sessions
\n\n
\nexpress-session and connect-redis modules in your terminal.express-session module allows you to create a session in the client’s browser. And the connect-redis module enables you to set Redis as the session store. Run the following command in your terminal.
\nnpm i express-session connect-redisexpress-session and connect-redis into server.js and configure the session store.
\nconst express = require("express");\nconst app = express();\n\nconst redis = require("redis");\nconst session = require("express-session");//Importing express session\nconst RedisStore = require("connect-redis")(session);//Importing connect-redis and passing the session\nconst redisClient = redis.createClient({\n url: "redis://redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com:12345", //This is an incorrect end point, insert your Public endpoint\n port: 12345,//The PORT is the last five digits in the url\n username: "default",\n password: "1234567890ABCDEFGHIJKLMNOPQRSTUV",//Input your Default_user_password\n legacyMode: true, //Very important for Redis V4\n });\nredisClient\n .connect()\n .then(() => console.log("connected"))//Logs out connected on successful\n .catch((e) => console.log(e.message));//Logs out the error\n\napp.use(\n session({\n secret: "LoginRadius",//session secret key\n resave: false,\n saveUninitialized: false,\n store: new RedisStore({ client: redisClient }),//Setting the store\n })\n);\n\n//The Rest of the codeStoring OTPs
\nserver.js file and add the code as follows.
\napp.post("/auth", (req, res) => {\n let OTP = nanoid.customAlphabet("1234567890", 6)();//Changing the OTP\n req.session.OTP = OTP;//Storing the OTP in the \n const nodeoutlook = require("nodejs-nodemailer-outlook");\n nnodeoutlook.sendEmail({\n auth: {//Outlook Account Credentials \n user: "<yourOutlookEmail@outlook.com>",//Email\n pass: "<yourOutlookPassword>",//Password\n },\n from: "<yourOutlookEmail@outlook.com>",\n to: req.body.email,//Getting the email\n subject: "OTP",\n text: `Your One Time Password is ${OTP}`,\n onError: (e) => res.status(500).json({ message: `an error occurred ${e}, Please try again` }),\n onSuccess: (i) => res.redirect("/verify"),//Redirecting the user to verify the token\n });\n});\n\napp.get("/verify", (req, res) => {\n res.send("Welcome to the verify route");//Welcome Message\n console.log(req.session.OTP);//Logging out the OTP stored in the session.\n});\n\napp.post("/verify", (req, res) => {\n const { OTP } = req.body;//Getting the user provided OTP\n const OTPSession = req.session.OTP;//Getting the stored OTP\n if (OTPSession) {//Checking if the OTP exist in the session\n if (OTP === OTPSession) {//Verifying the similarity of the OTP\n req.session.isAuth = true;//Setting auth to true\n return res.status(200).json({ message: "OTP is correct" });\n }\n return res.status(401).json({ message: "Incorrect OTP" });\n }\n return res.status(404).json({ message: "OTP not found" });\n});Protecting Routes
\n\n
\n/home\n
\nGET route to /home in server.js and add the middleware auth
\napp.get("/home", auth , (req, res) => {\n res.send("You have Successfully been Authenticated");\n});auth middleware function and verify if the user is authenticated.
\nconst auth = (req, res, next) => {//auth middleware function\n\n if (req.session.isAuth) {//Checking if `isAuth` = true\n return next();\n }\n return res.redirect("/auth");//Redirecting the Login route\n};\n\napp.get("/auth", (req, res) => {//Login route\n res.send("Login");\n});\n\napp.get("/home", auth, (req, res) => {//The Home route\n res.send("You have Successfully been Authenticated");\n});Logout
\nauth middleware to prevent requests from users who are not signed in.
\napp.post("/logout", auth, (req, res) => {\n req.session.destroy();//Destroying the session\n res.redirect("/auth");\n});Set Up the Frontend
\nSetting up EJS
\n\n
\n
\nnpm i ejsserver.js and use ejs as the default view engine
\napp.set("view engine", "ejs")ejs file when accessing the routes.GET routes using the code as follows:
\napp.get("/auth", (req, res) => {\n res.render("login");//Rendering the login ejs file\n});\napp.get("/verify", (req, res) => {\n res.render("verify");Rendering the verify ejs file\n});\napp.get("/home", auth, (req, res) => {\n res.render("home");Rendering the home ejs file\n});views, and inside, create the various ejs files.\n
\n\n
\nLogin Route
\nlogin.ejs to set up the Login route.
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta http-equiv="X-UA-Compatible" content="IE=edge">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Login</title>\n</head>\n<body>\n <h1>Login Page</h1>\n <p>Please Sign in</p>\n <form>\n <input type="email" class="email"/><!-- Email input -->\n <input type="submit" value="submit" class="submit"/>\n </form>\n <script>\n const form = document.querySelector('form')//Getting the form\n const email = document.querySelector('.email')//Getting the email\n\n form.addEventListener('submit', async(e)=> {//Listening for a submit\n e.preventDefault()\n const data = { email: email.value }//Getting the email\n await fetch("/auth", {//Making a POST request to http://localhost:5000/auth\n method: "POST",\n headers: {\n "Content-Type": "application/json",\n },\n redirect: "follow",//Permiting redirects\n body: JSON.stringify(data),//Sending the email\n }).then(res => {\n if(res.redirected) location.href = res.url//Redirecting the user on success\n })\n .catch((e) => {\n email.value = ''\n console.log(e.message);//Logging out error\n });\n })\n </script>\n</body>\n</html>Verify Route
\nverify.ejs and set up the verify page as follows.
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta http-equiv="X-UA-Compatible" content="IE=edge">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Login</title>\n</head>\n<body>\n <h1>Verify Page</h1>\n <p class="message">Enter your OTP</p><!-- Message alert -->\n <form>\n <input type="number" class="OTP" /><!-- OTP input -->\n <input type="submit" value="submit" class="submit" />\n </form>\n\n <script>\n const form = document.querySelector('form')//Getting the form\n const OTP = document.querySelector('.OTP')//Getting the OTP\n const message = document.querySelector('.message')//Getting the message alert\n\n form.addEventListener('submit', async (e) => {//Listening for a submit\n e.preventDefault()\n const data = { OTP: OTP.value }//Getting the OTP\n await fetch("/verify", {//Making a POST request to http://localhost:5000/verify\n method: "POST",\n headers: {\n "Content-Type": "application/json",\n },\n redirect: "follow",//Permitting redirects\n body: JSON.stringify(data),//Sending the OTP\n }).then(async(res) => {\n if(!res.ok){//Checking for errors\n const data = await res.json()\n OTP.value = ''\n return message.textContent = data.message//Alerting the error\n }\n if (res.redirected) location.href = res.url//Redirecting the user on success\n }).catch((e) => {\n OTP.value = ''\n console.log(e.message)\n });\n })\n </script>\n</body>\n</html>Home Route
\nhome.ejs and configure the home route as follows.
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta http-equiv="X-UA-Compatible" content="IE=edge">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Login</title>\n</head>\n<body>\n <h1>Home Page</h1>\n <p>Hello authenticated user, This is a secret information for your eyes only😉</p>\n Want to be unauthenticated, <button>Sign Out</button><!-- Sign Out button -->\n <script>\n const button = document.querySelector('button')//Getting the sign out button\n button.addEventListener('click', async()=> {//Listening for a click\n await fetch('/logout', {//Making a POST request to http://localhost:5000/logout\n method: "POST",\n headers: {\n "Content-Type": "application/json",\n },\n redirect: "follow"//Permitting redirects\n }).then((res)=> {\n if (res.redirected) location.href = res.url //Redirecting the user on success\n }).catch(e=> {\n console.log(e.message)\n })\n })\n </script>\n</body>\n</html>Conclusion
\nMFA with LoginRadius
\nResources
\n