Login and registration in NodeJS, Express with MongoDB. In this tutorial, we are performing the login and registration using the MERN stack. MongoDB as a database express js as a server tool and node js as a javascript framework.
The sessions will be created and managed using the express-session library. And to secure the user’s password we will use the Passport library.
Folder Structure:-
Libraries used
- Express
- Ejs
- Body-parser
- Express-session
- Mongoose
- Passport
- Passport-local
- Passport-local-mongoose
Login and registration in NodeJS with MongoDB
Step 1: Make Folder for the project and Setting up a server port
- Create a folder named ‘AUTHENTICATION’
- Open the terminal and cd into the AUTHENTICATION folder and hit command
PS D:\work\Codebun\Authentication>npm init
- Install libraries using npm install library names
PS D:\work\Codebun\Authentication>npm install express
Create a file as app.js and require Express and ejs library.
Package JSON file
{
"name": "authentication",
"version": "1.0.0",
"description": "User Login",
"main": "app.js",
"scripts": {
"start": "nodemon app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Hrushikesh",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"ejs": "^3.1.3",
"express": "^4.17.1",
"express-session": "^1.17.1",
"mongoose": "^5.9.18",
"passport": "^0.4.1",
"passport-local": "^1.0.0",
"passport-local-mongoose": "^6.0.1"
}
}
App.js
const express = require('express'),
app = express(),
//Listen On Server
app.listen(process.env.PORT ||3000,function (err) {
if(err){
console.log(err);
}else {
console.log("Server Started At Port 3000"); }});
Step 2: Setting up Pages using EJS
- SetUp home page add links to login, register, and logout
- The setting form on Login and Register
- Setting up a user profile page.
Home Page
<h1> Home Page</h1> <p><ul> <li><a href="/login">Login</a></li> <li><a href="/register">Register</a></li> <li><a href="/logout">Logout</a></li> </ul></p>
Login Page
<h1>
Login Page
</h1>
<form action="/login" method="POST">
<label for="username">UserName</label>
<input type="text" placeholder="username" id="xyz" name="username">
<label for="password">Password</label>
<input type="password" id="password" name="password">
<button>Login</button>
</form>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/register">SignUp</a></li>
</ul>
Registration Page
<h1>
SignUp Page
</h1>
<form action="/register" method="POST">
<label for="username">UserName</label>
<input type="text" id="username" name="username">
<label for="password">Password</label>
<input type="password" id="password" name="password">
<label for="phone">Mobile No:-</label>
<input type="text" name="phone" id="phone">
<label for="telephone">TelePhone No:-</label>
<input type="text" name="telephone" id="telephone">
<button>Submit</button>
</form>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/login">login</a></li>
</ul>
User profile
<h1>
User Profile
</h1>
<p>
After Login the user will reach here.
</p>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/logout">Logout</a></li>
</ul>
Step 3: Setting Up GET routes
- Set Up the view engine to ejs.
- Set the GET function to set up get routes for Home page, log in, Signup and User profile.
app.set("view engine","ejs");
//=======================
// R O U T E S
//=======================
app.get("/", (req,res) =>{
res.render("home");
})
app.get("/userprofile" ,(req,res) =>{
res.render("userprofile");
})
//Auth Routes
app.get("/login",(req,res)=>{
res.render("login");
});
app.get("/register",(req,res)=>{
res.render("register");
});
Step 4: Setting Up Database and express session
- Getting the mongoose Library
PS D:\work\Codebun\Authentication>npm install mongoose
- Getting the express libraries
PS D:\work\Codebun\Authentication>npm install express-session
- Connecting to the DATABASE.
- Make a file name user.js in Models directory and import mongoose.
- setup user Schema like user name, password, mobile number, and telephone number.
- export the schema using module.exports
const mongoose = require("mongoose");
//In app.js
mongoose.connect("mongodb://localhost/auth_demo");
app.use(require("express-session")({
secret:"Any normal Word",//decode or encode session
resave: false,
saveUninitialized:false
}));
UserSchema
const mongoose = require("mongoose");
const passportLocalMongoose = require("passport-local-mongoose");
const UserSchema = new mongoose.Schema({
username:String,
password:String,
phone:Number,
telephone:Number
}) ;
UserSchema.plugin(passportLocalMongoose);
module.exports = mongoose.model("User",UserSchema);
Step 5: Setting Up Passport and Strategy For signup
- Importing remaining Libraries and Schema
- Importing All passport related Routes
- Initialize passport to use LocalStrategy
- Creating Post routes for Login, Logout and Register
- Creating MiddleWare
const express = require('express'),
app = express(),
mongoose = require("mongoose"),
passport = require("passport"),
bodyParser = require("body-parser"),
LocalStrategy = require("passport-local"),
passportLocalMongoose = require("passport-local-mongoose"),
User = require("./models/user");
//Connecting database
mongoose.connect("mongodb://localhost/auth_demo");
app.use(require("express-session")({
secret:"Any normal Word", //decode or encode session
resave: false,
saveUninitialized:false
}));
passport.serializeUser(User.serializeUser()); //session encoding
passport.deserializeUser(User.deserializeUser()); //session decoding
passport.use(new LocalStrategy(User.authenticate()));
app.set("view engine","ejs");
app.use(bodyParser.urlencoded(
{ extended:true }
))
app.use(passport.initialize());
app.use(passport.session());
//=======================
// R O U T E S
//=======================
app.get("/", (req,res) =>{
res.render("home");
})
app.get("/userprofile",isLoggedIn ,(req,res) =>{
res.render("userprofile");
})
//Auth Routes
app.get("/login",(req,res)=>{
res.render("login");
});
app.post("/login",passport.authenticate("local",{
successRedirect:"/userprofile",
failureRedirect:"/login"
}),function (req, res){
});
app.get("/register",(req,res)=>{
res.render("register");
});
app.post("/register",(req,res)=>{
User.register(new User({username: req.body.username,phone:req.body.phone,telephone: req.body.telephone}),req.body.password,function(err,user){
if(err){
console.log(err);
res.render("register");
}
passport.authenticate("local")(req,res,function(){
res.redirect("/login");
})
})
})
app.get("/logout",(req,res)=>{
req.logout();
res.redirect("/");
});
function isLoggedIn(req,res,next) {
if(req.isAuthenticated()){
return next();
}
res.redirect("/login");
}
//Listen On Server
app.listen(process.env.PORT ||3000,function (err) {
if(err){
console.log(err);
}else {
console.log("Server Started At Port 3000");
}
});
DEMO
How to convert JSON data in HTML table
It is this type of data that is usually packaged today in game Poki projects in order to increase the effectiveness of the implementation and storage of information at a subconscious level.
