Basic Login System With Node.js

Souvik Paul

·

Follow

Published in

The Startup

·

·

Nov 10, 2020

5 min read

—

Objective of this article is to create a basic login system, whose back-end will be written in Node.js using Express framework and it will render HTML pages for registering users and allowing them to login. But we won’t be dealing with sessions in this article.

Typically, this type of project needs a database to store the credentials. But, we won’t use that as well, as this project is only to give an overview of login system. So, we’ll be using arrays to store the user credentials. Once, we shut down the server, all the credentials will be deleted.

Creating our project directory

First of all we’ll create our project directory with the name project. This directory will contain the following files and folders that we’ll create in coming steps.

We’ll open the terminal and navigate to this directory and run the command npm init, which will ask for certain information. After entering the information, package-lock.json and package.json files will be created. Then,we’ll install express , bcrypt and body-parser by using the following command.

npm install express bcrypt body-parser --save

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. With the help of express, APIs can be build very easily and quickly.

Bcrypt is a library that helps us to hash passwords.

Body-parser is required to handle HTTP POST request in Express.js. It extracts the entire body portion of an incoming request stream and exposes it on req.body.

With the above step, node_modules folder will be created.

Client-side development

Now, we’ll develop the client side. We’ll create a public folder in our project directory. Inside this folder, we’ll create index.html file. This is the file that will be rendered by our server whenever the user connects to our IP address. The code for this file is very simple which will allow our users to go to registration page and login page and it is given below.

The page will look like this –

Now, we’ll create another HTML file for user registration purpose with the name registration.html and its code and webpage look is given below.

Now, we’ll create the third HTML file with the name login.html, whose code and webpage look is as follows-

Server-side development

Now, we’ll start developing the back-end. For that, we’ll create a data.js file that will store the user credentials in an array.

We’ll write the code for our server application in a file named app.js and the code is give below.

In line 6 of the above code, const users = require('./data').userDB;will import the userDB array of data.js module into the variable users.

In line 20, the code segment app.post('/register',...); will first check if the entered email for new registration is already there in the memory or not. If it is not there, then only it will proceed for creating the new user and storing the credentials into the memory. It will also create a hash of the entered password before storing it.

In line 45, the code segment app.post('/login',...); will check if the entered email is present in the memory or not. If it is present, then it will check if the entered password matches the stored password or not. If yes, then it will allow the user to login.

Now, let’s talk about two cases, in which user won’t be allowed to login.

Case 1: If the entered email is present in the memory but the password entered is wrong, then our code will try to compare the password that is entered and the stored password. Finally, it will display — invalid email or password.

Case 2: If the entered email is not present in the database, then our program will take some extra time to compare a fake password with the entered password and then it will display — invalid email or password.

In both the above cases, the program will take same amount of time to display the message to the user. So, ultimately, we’re not letting the user know, which parameter is incorrect. This will also enhance the security of our datas.

Testing our application

So, we have developed our application. Now, it’s the time to test it. in the terminal, run node app.js. This will start our server.

We’ll open the browser and connect to http://localhost:3000,which will display the following page and after that, it is known what to do.

Summary

In this article, we have understood the basics of express framework, bcrypt and body-parser. Then, we have created HTML files for our front-end. Finally, we’ve created the server application that will allow users to register and login.

The entire project is also available in my GitHub repository.

References

https://expressjs.com/

Documentation on express framework

https://www.npmjs.com/package/body-parser

Documentation on body-parser

https://www.npmjs.com/package/bcrypt

Documentation on bcrypt