session authentication with hashed password

App/models/database.js

@@ -0,0 +1,16 @@
+const { Sequelize,DataTypes } = require('sequelize');
+
+const sequelize = new Sequelize('test-db', 'sajeda', 'password', {
+   dialect: 'sqlite',
+  host: './users.sqlite',
+
+});
+
+ const db = {};
+
+ db.Sequelize = Sequelize;
+ db.sequelize = sequelize;
+
+db.users = require("./userModel.js")(sequelize, Sequelize);
+
+module.exports = db;

App/models/userModel.js

@@ -0,0 +1,35 @@
+module.exports = (sequelize, Sequelize) => {
+  const User = sequelize.define("user", {
+	 id: {
+            type: Sequelize.INTEGER,
+            autoIncrement: true,
+            primaryKey: true,
+        },
+    userName: {
+      type: Sequelize.STRING,
+      allowNull: false,
+      validate: {
+        len: [3, 50]
+      }
+
+    },
+    email: {
+      type: Sequelize.STRING,
+      allowNull: false,
+      unique: true,
+      validate: {
+        isEmail: true, 
+      }
+
+    },
+	password: {
+      type: Sequelize.STRING,
+
+    },
+	confirmPassword:{
+		type: Sequelize.STRING,
+	}
+  });
+
+  return User;
+};

index.js

@@ -1,32 +1,141 @@
-const express = require('express');
-const bodyParser = require('body-parser');
-
+const express = require("express");
+const bodyParser = require("body-parser");
+var cookieParser = require("cookie-parser");
+var session = require("express-session");
 const app = express();
+const db = require("./App/models/database");
+const bcrypt = require("bcrypt");
 
-app.use(express.static('public'));
-
+app.use(express.static("public"));
 app.use(bodyParser.urlencoded({ extended: true }));
+app.use(cookieParser());
+app.set("view engine", "ejs");
+
+const oneDay = 1000 * 60 * 60 * 24;
 
-app.set('view engine', 'ejs');
+app.use(
+  session({
+    key: "user_id",
+    secret: "your-secret-key",
+    resave: false,
+    cookie: {
+      maxAge: oneDay,
+    },
+    saveUninitialized: false,
+  })
+);
 
 const todos = [];
 
-app.get('/', (req, res) => {
-    res.render('pages/index', { todos });
+async function checkLoggedIn  (req, res, next) {
+    console.log('checkLoggedIn',req.body)
+  if (req.session.id && req.session.userId) {
+  const user = await db.users.findOne({
+      where: {
+        id: req.session.userId,
+      },
+      raw: true,
+    });
+  if(user){
+     next();
+  }
+  else{
+    res.redirect("/login");
+  }
+
+
+  } else {
+    res.redirect("/login");
+  }
+}
+
+app.get("/registration", (req, res) => {
+  res.render("pages/registration");
 });
 
-app.post('/', (req, res) => {
-    const { todo, deleteIndex } = req.body;
+app.post("/registration", async (req, res) => {
+  try {
+    const { userName, email, password, confirmPassword } = req.body;
+
+    if (password === confirmPassword) {
+     const hashedPassword = await bcrypt.hash(password, 10);
+      const user = {
+        userName: userName,
+        email: email,
+        password: hashedPassword,
+      };
+
+      await db.users.create(user);
+      res.status(200).redirect("/login");
+    }
+    else {
+        throw new Error('password and confirmPassword not matched.');
+    }
+  } catch (e) {
+    res.status(500);
+  }
 
-    if (deleteIndex !== undefined) {
-        todos.splice(deleteIndex, 1);
-    } else if (todo !== '') {
-        todos.push(todo);
+});
+
+app.get("/", checkLoggedIn, (req, res) => {
+  res.render("pages/index", { todos });
+});
+
+app.get("/login", (req, res) => {
+  res.render("pages/login");
+});
+
+app.post("/login", async (req, res) => {
+  const { email, password } = req.body;
+
+  try {
+    const isExistUser = await db.users.findOne({
+      where: {
+        email: email,
+      },
+      raw: true,
+    });
+
+    if (isExistUser) {
+      bcrypt.compare(password, isExistUser.password, function (err, result) {
+        if (result) {
+          res.status(200);
+          req.session.userId = isExistUser.id;
+          res.redirect("/");
+        } 
+        else {
+          res.status(404);
+        }
+      });
+    } else {
+      res.redirect("/login");
     }
+  } catch (err) {
+    res.redirect("/login");
+  }
+});
+
+app.post("/", (req, res) => {
+  const { todo, deleteIndex } = req.body;
 
-    res.redirect('/');
+  if (deleteIndex !== undefined) {
+    todos.splice(deleteIndex, 1);
+  } else if (todo !== "") {
+    todos.push(todo);
+  }
+
+  res.redirect("/");
 });
 
 app.listen(3000, () => {
-    console.log('Server listening on port 3000');
+  console.log("Server listening on port 3000");
 });
+
+db.sequelize
+  .sync({force:false})
+  .then(() => {
+    console.log("Synced db.");
+  })
+  .catch((err) => {
+    console.log("Failed to sync db: " + err.message);
+  });

package.json

@@ -6,9 +6,18 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "bcrypt": "^5.1.0",
     "body-parser": "^1.20.2",
+    "cookie-parser": "^1.4.6",
     "ejs": "^3.1.9",
     "express": "^4.18.2",
+    "express-session": "^1.17.3",
+    "nodemon": "^2.0.22",
+    "sequelize": "^6.31.0",
     "sqlite3": "^5.1.6"
+  },
+  "scripts": {
+    "start": "nodemon -w ./ -e js,ejs,json index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
 }

public/registerStyle.css

@@ -0,0 +1,64 @@
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    font-family: 'Jost', sans-serif;
+    background: linear-gradient(to bottom, #ffffff, #fbfbfb, #f6f6fd);
+}
+.register-form{
+    width: 30%;
+    background-color: rgba(255,255,255,0.13);
+    border: 2px solid rgba(255,255,255,0.1);
+    box-shadow: 0 0 30px rgb(8 7 16 / 19%);
+    padding: 50px 35px;
+
+}
+.heading{
+    text-align: center;
+}
+
+input{
+    width: 100%;
+    height: 20px;
+    background: #e0dede;
+    margin: 20px auto;
+    padding: 10px;
+    border: none;
+    outline: none;
+    border-radius: 5px;
+}
+button{
+    width: 60%;
+    height: 40px;
+    margin: 10px auto;
+    justify-content: center;
+    display: block;
+    color: #fff;
+    background: #406253;
+    font-size: 1em;
+    font-weight: bold;
+    margin-top: 20px;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    transition: .2s ease-in;
+    cursor: pointer;
+}
+button:hover{
+    background: #4e7664;
+}
+.new{
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0;
+}
+.signUp{
+    color: dodgerblue;
+    font-family: ui-rounded;
+    font-weight: 600;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+

views/pages/index.ejs

@@ -20,6 +20,7 @@
         </tr>
         </thead>
         <tbody>
+            <% console.log('eww',todos) %>
         <% for (let i = 0; i < todos.length; i++) { %>
             <tr>
                 <td><%= i + 1 %></td>

views/pages/login.ejs

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Registration</title>
+    <link rel="stylesheet"  href='/registerStyle.css'>
+</head>
+<body>
+
+<form action="/login" method="POST" class="register-form">
+    <h1 class="heading">LogIn</h1>
+
+    <label for="email"><b>Email</b></label>
+    <input type="text" placeholder="Enter Email" name="email" id="email" required>
+
+    <label for="password"><b>Password</b></label>
+    <input type="password" placeholder="Enter Password" name="password" id="password" required>
+
+    <hr>
+    <div class="new">
+        <span>New to the project</span>
+        <a  href="./registration" >
+            <span class="signUp">Sign Up</span>
+        </a>
+
+    </div>
+
+    <button type="submit" class="add-btn">Login</button>
+</form>
+</body>
+</html>

views/pages/registration.ejs

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Registration</title>
+    <link rel="stylesheet"  href='/registerStyle.css'>
+</head>
+<body>
+
+    <form action="/registration" method="POST" class="register-form">
+        <h1 class="heading">Registration</h1>
+        <label for="userName"><b>userName</b></label>
+        <input type="text" placeholder="Enter userName" name="userName" id="userName" required>
+
+        <label for="email"><b>Email</b></label>
+        <input type="text" placeholder="Enter Email" name="email" id="email" required>
+
+        <label for="password"><b>Password</b></label>
+        <input type="password" placeholder="Enter Password" name="password" id="password" required>
+
+        <label for="confirmPassword"><b>Confirm Password</b></label>
+        <input type="password" placeholder="Repeat Password" name="confirmPassword" id="confirmPassword" required>
+        <hr>
+        <div class="new">
+            <span>Already Have an Account</span>
+            <a  href="./login" >
+                <span class="signUp">Login</span>
+            </a>
+
+        </div>
+
+        <button type="submit" class="add-btn">Register</button>
+    </form>
+</body>
+</html>