Login form using Node.js and MongoDB

Follow these simple steps to learn how to create a login form using Node.js and MongoDB. Login form allows users to login to the website after they have created their account using the signup form.
Installation of modules:

$ npm install ejs

Embedded javaScript lets you generate HTML markup with plain JavaScript.

$ npm install express --save

Express is a module framework for Node that you can use for applications.

$ npm install mongoose

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB.

$ npm install body-parser --save

Body-parser allows express to read the body and then parse that into a JSON object that we can understand.

npm install express-session --save

Express.js uses a cookie to store a session id.

npm install passport passport-local --save
npm install passport-local-mongoose --save

• Passport is authentication middleware for Node. js. Extremely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application. A comprehensive set of strategies support authentication using a username and password, Facebook, Twitter, and more.

Filename: app.js

javascript

var express = require("express"),
    mongoose = require("mongoose"),
    passport = require("passport"),
    bodyParser = require("body-parser"),
    LocalStrategy = require("passport-local"),
    passportLocalMongoose =
        require("passport-local-mongoose"),
    User = require("./models/user");

mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', false);
mongoose.set('useCreateIndex', true);
mongoose.set('useUnifiedTopology', true);
mongoose.connect("mongodb://localhost/auth_demo_app");

var app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({ extended: true }));

app.use(require("express-session")({
    secret: "Rusty is a dog",
    resave: false,
    saveUninitialized: false
}));

app.use(passport.initialize());
app.use(passport.session());

passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

//=====================
// ROUTES
//=====================

// Showing home page
app.get("/", function (req, res) {
    res.render("home");
});

// Showing secret page
app.get("/secret", isLoggedIn, function (req, res) {
    res.render("secret");
});

// Showing register form
app.get("/register", function (req, res) {
    res.render("register");
});

// Handling user signup
app.post("/register", function (req, res) {
    var username = req.body.username
    var password = req.body.password
    User.register(new User({ username: username }),
            password, function (err, user) {
        if (err) {
            console.log(err);
            return res.render("register");
        }

        passport.authenticate("local")(
            req, res, function () {
            res.render("secret");
        });
    });
});

//Showing login form
app.get("/login", function (req, res) {
    res.render("login");
});

//Handling user login
app.post("/login", passport.authenticate("local", {
    successRedirect: "/secret",
    failureRedirect: "/login"
}), function (req, res) {
});

//Handling user logout
app.get("/logout", function (req, res) {
    req.logout();
    res.redirect("/");
});

function isLoggedIn(req, res, next) {
    if (req.isAuthenticated()) return next();
    res.redirect("/login");
}

var port = process.env.PORT || 3000;
app.listen(port, function () {
    console.log("Server Has Started!");
});

Filename: home.ejs

html

<h1>This is home page</h1>

<li><a href="/register">Sign up!!</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>

Filename: login.ejs

html

<h1>login</h1>

<form action="/login" method="POST">
    <input type="text" name="username"
        placeholder="username">
    <input type="password" name="password"
        placeholder="password">
    <button>login</button>
</form>

<h1>This is home page</h1>

<li><a href="/register">Sign up!!</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>

Filename: register.ejs

html

<h1> Sign up form </h1>

<form action="/register" method="POST">
    <input type="text" name="username"
        placeholder="username">
    <input type="password" name="password"
        placeholder="password">
    <button>Submit</button>
</form>

<h1>This is home page</h1>

<li><a href="/register">Sign up!!</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>

Filename: secret.ejs

html

<h1>This is secrect page</h1>

<img src="https://encrypted-tbn0.gstatic.com/
images?q=tbn%3AANd9GcQ5PdxXFw4u3BRG4166i7Nbk
x0VyGGNt0hWc3loNeD7GIL4nbbo&usqp=CAU">

<h1>This is home page</h1>

<li><a href="/register">Sign up!!</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>

Steps to run the program:

• The project structure will look like this:

• And the content of views directory will look like this:

• Rest files will be the created after you run npm init for initialising .json file.
• Run index.js file using below command:

nodemon app.js

• OR If you don’t have nodemon installed you can run:

node app.js

• Now go to your browser and type the following URL:

http://localhost:3000/

• First you will need to signup then only you can login into the app. 
  

• Now you have successfully signup, Now this is login form as shown below:

• This login form will take you to the Secret page as shown below:

So this is how you can create login form using Node.js and MongoDB.