Building Web Applications Using Node.js - Part Six

Before reading this article, I would recommend that you read my previous articles.

• Building Web Application Using Node.js - Part One
• Building Web Application Using Node.js - Part Two
• Building Web Application Using Node.js - Part Three
• Building Web Application Using Node.js - Part Four
• Building Web Application Using Node.js - Part Five
• Building Web Application Using Node.js - Part Six
• Building Web Applications Using Node.js - Part Seven

In my previous articles series, I explained the following:

• How to start working with Node.js Web application.
• How to initialize a Node.js project.
• About Package.JSON.
• Express Framework.
• How to use "npm start" command.
• Using HTML Templates.
• Bower.
• Templating Engine.
• Navigation.
• Routing.
• Rendering.
• Fetching data from MongoDB
• User Registration

Introduction

In this article, we will learn how to authenticate a user using Node.js. So, in this article, I will create a login page and we will authenticate the users using MongoDB when they login; and, once logged in successfully, we will redirect them to the profile page. So, we will do all this using passport.

 

What is passport? 

Passport is an authentication middleware for Node.js. Extremely flexible and modular, passport can be unobtrusively dropped into any express-based web application. A comprehensive set of strategies support authentication using a username and password, as well as social logins like Facebook, Google, Twitter, LinkedIn, etc. This is fairly standard in Node.js and Express, which is used by most of the people when dealing with login, using Node.js.

 

Let's start step by step.

 

In my last article (Building Web Application Using Node.js - part 5 ), I explained how to work with registration page. We created a registration page and registered ourselves. Same as with registration page, I am going to create a login page. Let's do this step by step.

 

Creating Login Form

Step 1

First of all, I am going to create a routing file with the name, "loginRoute.js" in "/src/routes" folder.



Step 2

Now, inside loginRoute.js file, I am going to write the following code.

var express=require('express');
var loginRouter=express.Router();
var l_router=function(navMenu){
    loginRouter.route("/")
        .get(function(req,res){
                res.render('login', {
                    title:'Login',
                    menu:navMenu,
                    message:''
                });
        });
        return loginRouter;
}
module.exports=l_router;

Step 3

After that, I am updating routes in app.js file, by writing the following code.

var loginRouter=require('./src/routes/loginRoute')(navMenu);

app.use('/login',loginRouter);

Step 4

Now, I am creating a View for Login page. For that, I am creating a file inside views folder, named as "login.ejs".

 

 

Step 5

For login.ejs, I am writing the following code.

 <!-- Page Heading -->
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Login</h1>
    </div>
</div>
<!-- /.row -->
<form class="form-horizontal" action="/login" method="post">
    <fieldset>
        <div class="form-group">
            <label class="col-md-1 control-label" for="Email">Email</label>
            <div class="col-md-4">
                <input id="Email" name="Email" type="email" placeholder="Email" class="form-control input-md" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-1 control-label" for="Password">Password</label>
            <div class="col-md-4">
                <input id="Password" name="Password" type="password" placeholder="Password" class="form-control input-md" required>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-4 col-md-offset-1">
                <input type="submit" id="Submit" class="btn btn-primary" value="Login" />
            </div>
        </div>
    </fieldset>
</form>
<h3><%=message%></h3>

Step 6

Now, if we start this project, then our output will be like in the below image.


As I have told you, we will use passport authentication, we have to use a couple of middlewares for simple authentication. 

 

Passport Middleware

If we are using simple passport authentication, we need a couple of pieces of middleware so that the passport can perform its process. For passport authentication, we will use the following functions.

• passport.initialize()
  This is used to initialize the passport. 
  
  
• passport.session()
  This function provides persistent login. As we are creating login page, so of course, our application should use persistent login session. This function sits on the top of the Express session, so we have to install express.session as well, for our web application. 

For doing that, we must be using the following middleware. 

• cookie-parser - used to populate request cookies. If authentication succeeds, a session will be established and maintained via a cookie set in the user's browser.
  
  
• express-session - used to store the user information and other information.
  
  
• passport - the main middleware if we are performing passport authentication.

How to use passport?

To understand how to use passport, you have to follow these steps.

Step 1

First of all, install cookie-parser, express-session, passport middleware, using the following commands.

 

Now, if you see your package.json file, you will get the dependencies for all, as shown in the following figure.

 

 

Step 2

Now, add the references of all the files in app.js. You can use the following code for that. 

var cookieParser=require('cookie-parser');
var passport=require('passport');
var session=require('express-session');

Step 3

Now, to use all middleware, you have to tell the application that we will use these things. Before telling the application about it, I am just creating a separate file for this passport information. So, I am creating one folder named "configuration" inside "src" directory and then, I am creating a file named passport.js

 

 

Step 4

Now, write the following code in passport.js

var passport=require('passport');

module.exports=function(app){
     app.use(passport.initialize());
     app.use(passport.session());
}

Step 5

As we know, in a web application, the username and password (means credentials) is used to authenticate a user, which will only be transmitted when a user requests login. If authentication succeeds, then a session is established and that is maintained via a cookie set in the user's browser.  

 

But, each subsequent request doesn't contain credentials, rather, it contains the unique cookie that identifies the session. In order to support login sessions, Passport serializes and de-serializes user instances to and from the session.

 

So, I am writing the following code in passport.js file for serialization and deserializion of user instance.

var passport=require('passport');

module.exports=function(app){
    app.use(passport.initialize());
    app.use(passport.session());

    passport.serializeUser(function(user, done) {
        done(null, user);
    });

    passport.deserializeUser(function(user, done) {
        done(null, user);
    });
}

Step 6

Now, in app.js file, I am writing the following code to tell our application that we are going to use this passport.js and sessions and cookie parser.

app.use(cookieParser());
app.use(session({secret:'c-sharpcorner'}));
require('./src/configuration/passport')(app);

Step 7

Now, to login using passport, we have to use the passport strategy.

What is passport strategy?

The passport strategy is just a way to authenticate a user. It may be via username and password or it may be via social profile login like login with Facebook, Google, Twitter, LinkedIn, GitHub etc.

 

In this article, we are just using passport-local which authenticates using username and password. So, first of all, I am going to install passport-local using the following command.

 

 

Using passport-local

To configure passport-local, use the following steps.

Step 1

First, I am again creating separate files for local-passport because in my upcoming article, I will show you how to login using Facebook, Google, Twitter and all social media sites. I am just creating a file "local.strategy.js" inside "src/configuration/strategies" folder. Folder structure is shown in the following figure.

 

 

Step 2

Now, in passport.js, just give reference for local strategy.

 

 

Step 3

Now, to implement local-passport strategy, write the following code in local.strategy.js file.

var passport = require('passport'),
    LocalStrategy = require('passport-local').Strategy;
var mongodb=require('mongodb').MongoClient;
module.exports=function(){
    passport.use(new LocalStrategy({
        usernameField:'Email',
        passwordField:'Password'
    },
    function(username, password, done) {
        var url='mongodb://localhost:27017/NodeDemoWebApp';
        mongodb.connect(url,function(err,db){
            if(err){done(null,false, {message:'Invalid Credentials'});}
            var collection=db.collection('Users');
            collection.findOne({Email:username},function(err,results){
                if(results.Password==password){
                    var user=results;
                    done(null,user);
                }
                else{
                    done(null,false, {message:'Invalid Credentials'});
                }
            });
        });
    }));
};

In the above code, I am exporting a function which takes one object usernameField and passwordField, the names of which will be the name attribute of our control, like you will see in the login.ejs file we have taken. 

<input id="Email" name="Email" type="email" placeholder="Email" class="form-control input-md" required>

<input id="Password" name="Password" type="password" placeholder="Password" class="form-control input-md" required>

After that, I am getting all users via email and checking password. If password is done, then I am setting user as a result. Otherwise, I am setting null as a result.

 

For reading more about passport, use the following document. You will get more ideas from here- Passport Documentation

 

Step 4

Now, we will implement loginRoute.js.

var express=require('express');
var passport=require('passport');
var loginRouter=express.Router();
var l_router=function(navMenu){
    loginRouter.route("/")
        .post(passport.authenticate('local',{
            failureRedirect:'/login'
        }),function(req,res){
                res.redirect('/articles')
            }
        )
        .get(function(req,res){
                res.render('login', {
                    title:'Login',
                    menu:navMenu,
                    message:''
                });
        });
        return loginRouter;
}
module.exports=l_router;

This time, when request will come, it will be sent back to the passport, using passport.authenticate method. If login is failed, then it will be redirected to the login page again, else it will be redirected to the articles page.

 

Now, run this project.

Output


After successful login, it will be redirected to the articles page.

 

Conclusion

In this article, we learned about,

• Passport
• Session
• Cookie-Parser
• Passport local strategy
• Authentication using mongodb

What is next?

In this article, we just saw how to authenticate a user. In my next article, you will learn how to authorize a user. So, user will access a page if logged in; otherwise, they will be redirected to the login page.

<<Previous Article                                                                                                                               Next Article>>