├── views
    ├── partials
    │   └── footer.ejs
    ├── success.ejs
    ├── template
    │   ├── index.html
    │   ├── profile.html
    │   ├── login.html
    │   └── signup.html
    ├── bare_templates
    │   ├── login.html
    │   └── register.html
    ├── index.ejs
    ├── profile.ejs
    ├── signup.ejs
    ├── login.ejs
    └── forgot-password.ejs
├── .gitignore
├── config
    ├── monkoKEY.js
    └── googleData.js
├── .gitattributes
├── screenshots
    ├── reset_password_added.png
    ├── change_password_option.png
    ├── alert_with_working_email_send.png
    └── error_flash_on_accessing_unauthenticated_routes.png
├── model
    ├── resetTokens.js
    └── user.js
├── package.json
├── controller
    ├── sendMail.js
    ├── passportLocal.js
    ├── googleAuth.js
    ├── routes.js
    └── accountRoutes.js
├── README.md
└── index.js


/views/partials/footer.ejs:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | node_modules


--------------------------------------------------------------------------------
/config/monkoKEY.js:
--------------------------------------------------------------------------------
1 | module.exports = "<ADD YOUR MONGO URI>";


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * linguist-vendored
2 | *.js linguist-vendored=false
3 | 


--------------------------------------------------------------------------------
/config/googleData.js:
--------------------------------------------------------------------------------
1 | module.exports.clientId = "<Add Your Client ID>";
2 | module.exports.clientSecret = "<Add Your Client Secret>";


--------------------------------------------------------------------------------
/screenshots/reset_password_added.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/desi-programmer/nodejs_authentication/HEAD/screenshots/reset_password_added.png


--------------------------------------------------------------------------------
/screenshots/change_password_option.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/desi-programmer/nodejs_authentication/HEAD/screenshots/change_password_option.png


--------------------------------------------------------------------------------
/screenshots/alert_with_working_email_send.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/desi-programmer/nodejs_authentication/HEAD/screenshots/alert_with_working_email_send.png


--------------------------------------------------------------------------------
/screenshots/error_flash_on_accessing_unauthenticated_routes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/desi-programmer/nodejs_authentication/HEAD/screenshots/error_flash_on_accessing_unauthenticated_routes.png


--------------------------------------------------------------------------------
/model/resetTokens.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose');
 2 | 
 3 | const resetTokens = new mongoose.Schema({
 4 |     token: {
 5 |         type: String,
 6 |         required: true,
 7 |     },
 8 |     email: {
 9 |         type: String,
10 |         required: true,
11 |     },
12 |     created: {
13 |         type: Date,
14 |         default: () => Date.now(),
15 |     },
16 |     // will automatically delete after 10 min
17 |     // can be a bit delay, because the bg thread runs every 60 sec
18 |     expire_at: { type: Date, default: Date.now, expires: 600 }
19 | });
20 | 
21 | module.exports = mongoose.model('resetTokens', resetTokens);


--------------------------------------------------------------------------------
/model/user.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose');
 2 | 
 3 | const userSchema = new mongoose.Schema({
 4 |     username: {
 5 |         type: String,
 6 |         required: true,
 7 |     },
 8 |     email: {
 9 |         type: String,
10 |         required: true,
11 |     },
12 |     password: {
13 |         type: String,
14 |     },
15 | 
16 |     isVerified: {
17 |         type: Boolean,
18 |         default: false,
19 |     },
20 | 
21 |     googleId: {
22 |         type: String,
23 |     },
24 |     provider: {
25 |         type: String,
26 |         required: true,
27 |     }
28 | });
29 | 
30 | module.exports = mongoose.model('user', userSchema);


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "authentications",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "nodemon index",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "bcryptjs": "^2.4.3",
15 |     "connect-flash": "^0.1.1",
16 |     "cookie-parser": "^1.4.5",
17 |     "csurf": "^1.11.0",
18 |     "ejs": "^3.1.5",
19 |     "express": "^4.17.1",
20 |     "express-session": "^1.17.1",
21 |     "memorystore": "^1.6.4",
22 |     "mongoose": "^5.11.13",
23 |     "nodemailer": "^6.5.0",
24 |     "passport": "^0.4.1",
25 |     "passport-google-oauth20": "^2.0.0",
26 |     "passport-local": "^1.0.0"
27 |   },
28 |   "devDependencies": {
29 |     "nodemon": "^2.0.7"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/controller/sendMail.js:
--------------------------------------------------------------------------------
 1 | const nodemailer = require("nodemailer");
 2 | 
 3 | var smtpTransport = nodemailer.createTransport({
 4 |   service: "gmail",
 5 |   auth: {
 6 |     user: "<your email>",
 7 |     pass: "<password>",
 8 |   },
 9 | });
10 | 
11 | module.exports.sendResetEmail = async (email, token) => {
12 |    // change first part to your domain
13 |   var url = "http://localhost:8000/user/reset-password?token=" + token;
14 | 
15 |   await smtpTransport.sendMail({
16 |     from: "<your email>",
17 |     to: email,
18 |     subject: "RESET YOUR PASSWORD",
19 |     text: `Click on this link to reset your password ${url}`,
20 |     html: `<h3> Click on this link to reset your password : ${url} </h3>`,
21 |   });
22 | };
23 | 
24 | module.exports.sendVerifyEmail = async (email, token) => {
25 |   // change first part to your domain
26 |   var url = "http://localhost:8000/user/verifyemail?token=" + token;
27 | 
28 |   await smtpTransport.sendMail({
29 |     from: "<your email>",
30 |     to: email,
31 |     subject: "VERIFY Your EMAIL",
32 |     text: `Click on this link to verify ${url}`,
33 |     html: `<h3> Click on this link to verify your email : ${url} </h3>`,
34 |   });
35 | };
36 | 


--------------------------------------------------------------------------------
/controller/passportLocal.js:
--------------------------------------------------------------------------------
 1 | const user = require('../model/user');
 2 | const bcryptjs = require('bcryptjs');
 3 | var localStrategy = require('passport-local').Strategy;
 4 | 
 5 | module.exports = function (passport) {
 6 |     passport.use(new localStrategy({ usernameField: 'email' }, (email, password, done) => {
 7 |         user.findOne({ email: email }, (err, data) => {
 8 |             if (err) throw err;
 9 |             if (!data) {
10 |                 return done(null, false, { message: "User Doesn't Exist !" });
11 |             }
12 |             bcryptjs.compare(password, data.password, (err, match) => {
13 |                 if (err) {
14 |                     return done(null, false);
15 |                 }
16 |                 if (!match) {
17 |                     return done(null, false, { message: "Password Doesn't match !" });
18 |                 }
19 |                 if (match) {
20 |                     return done(null, data);
21 |                 }
22 |             })
23 |         })
24 |     }));
25 | 
26 |     passport.serializeUser(function (user, done) {
27 |         done(null, user.id);
28 |     });
29 | 
30 |     passport.deserializeUser(function (id, done) {
31 |         user.findById(id, function (err, user) {
32 |             done(err, user);
33 |         });
34 |     });
35 | 
36 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Node Passport Authentication
 2 | 
 3 | This repo contains code for Local email-passport authentication and Google Authentication.
 4 | 
 5 | ## Blog (Local Auth) : [Here](https://desiprogrammer.com/blogs/node-express-passport-email-authentication)
 6 | 
 7 | ## Blog (Google Auth) : [Here](https://desiprogrammer.com/blogs/nodejs-express-google-authentication)
 8 | 
 9 | ## Tutorial (Local Auth) : [Here](https://www.youtube.com/watch?v=-ZxXS9gsWX4)
10 | 
11 | ## Tutorial (Google Auth) : [Here](https://www.youtube.com/watch?v=d-IToO3gLrM)
12 | 
13 | ## 1. USAGE
14 | 
15 | ### Install All Packages
16 | 
17 | ```bash
18 | npm install express ejs mongoose bcryptjs connect-flash cookie-parser express-session csurf memorystore passport passport-local passport-google-oauth20 nodemailer
19 | ```
20 | 
21 | ### Install Nodemon For Development
22 | 
23 | ```bash
24 | npm install -D nodemon
25 | ```
26 | 
27 | ### Add mongoURI ,Google client ID and Secret, smtp config for sending emails 
28 | ### And Feel free to delete the screenshots directory
29 | 
30 | # Added Options
31 | 
32 | ![Image1](screenshots/error_flash_on_accessing_unauthenticated_routes.png)
33 | ![Image2](screenshots/reset_password_added.png)
34 | ![Image3](screenshots/change_password_option.png)
35 | ![Image4](screenshots/alert_with_working_email_send.png)
36 | 
37 | # Todo ( ✔ -> Done )
38 | 
39 | ✔ Add User Password rest
40 | ✔ Add Verify Account
41 | ✔ Add Email Sending Options
42 | ✔ Added Flash messages for errors
43 | 
44 | 
45 | 


--------------------------------------------------------------------------------
/views/success.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <link rel="stylesheet" type="text/css" href="https://bootswatch.com/4/united/bootstrap.min.css">
 9 |     <title>Success</title>
10 | </head>
11 | 
12 | <body>
13 |     <div class="container text-center">
14 |         <h3 class="p-4">Welcome <%= user.username %> </h3>
15 |         <h3 class="p-2">If You See This Page <br> Then You Have Logged In Successfully ! </h3>
16 |         <a class="btn btn-danger" href="/logout">Logout</a>
17 |         <div class="container p-3">
18 |             <form action="/addmsg" method="POST">
19 |                 <div class="form-group">
20 |                     <textarea class="form-control" name="msg" id="msg" cols="30" rows="3" maxlength="200"
21 |                         placeholder="Enter Some Message.. 200 characters..."></textarea>
22 |                 </div>
23 |                 <div class="form-group">
24 |                     <button class="btn btn-outline-success" type="submit">Add Message</button>
25 |                 </div>
26 |                 <div>
27 |                     <% user.messages.forEach(function(msg, index){ %>
28 |                     <h4><%= msg %></h4>
29 |                     <% }) %>
30 |                 </div>
31 |             </form>
32 |             <p>
33 |             </p>
34 |         </div>
35 |     </div>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const mongoose = require('mongoose');
 3 | const csrf = require('csurf');
 4 | const cookieParser = require('cookie-parser');
 5 | const expressSession = require('express-session');
 6 | const MemoryStore = require('memorystore')(expressSession)
 7 | const passport = require('passport');
 8 | const flash = require('connect-flash');
 9 | 
10 | const app = express();
11 | 
12 | app.set('view engine', 'ejs');
13 | app.set('views', __dirname + '/views',);
14 | 
15 | app.use(express.urlencoded({ extended: true }));
16 | 
17 | const mongoURI = require('./config/monkoKEY');
18 | mongoose.connect(mongoURI, { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false, useCreateIndex: true, },).then(() => console.log("Connected !"),);
19 | 
20 | app.use(cookieParser('random'));
21 | 
22 | app.use(expressSession({
23 |     secret: "random",
24 |     resave: true,
25 |     saveUninitialized: true,
26 |     // setting the max age to longer duration
27 |     maxAge: 24 * 60 * 60 * 1000,
28 |     store: new MemoryStore(),
29 | }));
30 | 
31 | app.use(csrf());
32 | app.use(passport.initialize());
33 | app.use(passport.session());
34 | 
35 | app.use(flash());
36 | 
37 | app.use(function (req, res, next) {
38 |     res.locals.success_messages = req.flash('success_messages');
39 |     res.locals.error_messages = req.flash('error_messages');
40 |     res.locals.error = req.flash('error');
41 |     next();
42 | });
43 | 
44 | app.use(require('./controller/routes.js'));
45 | 
46 | const PORT = process.env.PORT || 8000;
47 | 
48 | app.listen(PORT, () => console.log("Server Started At " + PORT));


--------------------------------------------------------------------------------
/controller/googleAuth.js:
--------------------------------------------------------------------------------
 1 | var GoogleStrategy = require('passport-google-oauth20').Strategy;
 2 | const user = require('../model/user');
 3 | const clientId = require('../config/googleData').clientId;
 4 | const clientSecreT = require('../config/googleData').clientSecret;
 5 | 
 6 | module.exports = function (passport) {
 7 |     passport.use(new GoogleStrategy({
 8 |         clientID: clientId,
 9 |         clientSecret: clientSecreT,
10 |         callbackURL: "http://localhost:8000/google/callback"
11 |     }, (accessToken, refreshToken, profile, done) => {
12 |         console.log(profile.emails[0].value);
13 | 
14 |         // find if a user exist with this email or not
15 |         user.findOne({ email: profile.emails[0].value }).then((data) => {
16 |             if (data) {
17 |                 // user exists
18 |                 // update data
19 |                 // I am skipping that part here, may Update Later
20 |                 return done(null, data);
21 |             } else {
22 |                 // create a user
23 |                 user({
24 |                     username: profile.displayName,
25 |                     email: profile.emails[0].value,
26 |                     googleId: profile.id,
27 |                     password: null,
28 |                     provider: 'google',
29 |                     isVerified: true,
30 |                 }).save(function (err, data) {
31 |                     return done(null, data);
32 |                 });
33 |             }
34 |         });
35 |     }
36 |     ));
37 |     passport.serializeUser(function (user, done) {
38 |         done(null, user.id);
39 |     });
40 | 
41 |     passport.deserializeUser(function (id, done) {
42 |         user.findById(id, function (err, user) {
43 |             done(err, user);
44 |         });
45 |     });
46 | 
47 | }


--------------------------------------------------------------------------------
/views/template/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Required meta tags -->
 5 |     <meta charset="utf-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="preconnect" href="https://fonts.gstatic.com">
 8 | <link href="https://fonts.googleapis.com/css2?family=Recursive:wght@500&display=swap" rel="stylesheet">
 9 |     <!-- Bootstrap CSS -->
10 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
11 | 
12 |     <title>Authentications</title>
13 |   </head>
14 |   <style>
15 |       body {
16 |         font-family: 'Recursive', sans-serif;
17 |         font-size: larger;
18 |       }
19 |   </style>
20 |   <body>
21 |    
22 |     <!-- navbar  -->
23 |     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
24 |         <div class="container-fluid">
25 |           <a class="navbar-brand" href="#">Authentications</a>
26 |           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
27 |             <span class="navbar-toggler-icon"></span>
28 |           </button>
29 |           <div class="collapse navbar-collapse" id="navbarNav">
30 |               
31 |             <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
32 |               <li class="nav-item">
33 |                 <a class="nav-link active" aria-current="page" href="#">Home</a>
34 |               </li>
35 |               <li class="nav-item">
36 |                 <a class="nav-link" href="#">Login</a>
37 |               </li>
38 |               <li class="nav-item">
39 |                 <a class="nav-link" href="#">Signup</a>
40 |               </li>
41 |             </ul>
42 |           </div>
43 |         </div>
44 |       </nav>
45 |     <!-- navbar end  -->
46 | 
47 |     <div class="container py-3">
48 |         <h1>Welcome To Desi Programmer</h1>
49 |         <h2>This is a Tutorial About Node Js Authentication and Authorization</h2>
50 |     </div>
51 | 
52 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
53 | 
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/views/bare_templates/login.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <link rel="stylesheet" type="text/css" href="https://bootswatch.com/4/united/bootstrap.min.css">
 9 |     <title>Authentications</title>
10 |     <style>
11 |         .customborder {
12 |             border-radius: 2%;
13 |             border: 2px solid #E95420;
14 |         }
15 |     </style>
16 | </head>
17 | 
18 | <body>
19 |     <div class="container">
20 |         <h3 class="text-center p-3">Login Here</h3>
21 |         <div style="margin: 0 auto;" class="col-12 col-md-6 col-lg-5 p-5 customborder">
22 |             <form action="/login" method="POST">
23 |                 <div class="form-group">
24 |                     <label for="username">Enter Your Email</label>
25 |                     <input type="email" class="form-control" name="email" id="username" autocomplete="off"
26 |                         placeholder="Email">
27 |                 </div>
28 |                 <div class="form-group">
29 |                     <label for="password">Enter Your Password</label>
30 |                     <input type="password" class="form-control" name="password" id="password" autocomplete="off"
31 |                         placeholder="Password">
32 |                 </div>
33 |                 <div class="form-group">
34 |                     <input type="submit" class="btn btn-block btn-outline-primary" value="Login">
35 |                 </div>
36 |                 <p>New Here ? <a class="card-link" href="/">Register Now</a> </p>
37 |             </form>
38 |         </div>
39 |     </div>
40 | 
41 |     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
42 |         integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
43 |         crossorigin="anonymous"></script>
44 |     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
45 |         integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
46 |         crossorigin="anonymous"></script>
47 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
48 |         integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
49 |         crossorigin="anonymous"></script>
50 | </body>
51 | 
52 | </html>
53 | 


--------------------------------------------------------------------------------
/views/index.ejs:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <!-- Required meta tags -->
 6 |   <meta charset="utf-8">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <!-- Font  -->
 9 |   <link rel="preconnect" href="https://fonts.gstatic.com">
10 |   <link href="https://fonts.googleapis.com/css2?family=Recursive:wght@500&display=swap" rel="stylesheet">
11 |   <!-- Bootstrap CSS -->
12 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
13 |     integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
14 | 
15 |   <title>Authentications</title>
16 | </head>
17 | <style>
18 |   body {
19 |     font-family: 'Recursive', sans-serif;
20 |     font-size: larger;
21 |   }
22 | </style>
23 | 
24 | <body>
25 | 
26 |   <!-- navbar  -->
27 |   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
28 |     <div class="container-fluid">
29 |       <a class="navbar-brand" href="#">Authentications</a>
30 |       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
31 |         aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
32 |         <span class="navbar-toggler-icon"></span>
33 |       </button>
34 |       <div class="collapse navbar-collapse" id="navbarNav">
35 |         <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
36 |           <li class="nav-item">
37 |             <a class="nav-link active" aria-current="page" href="#">Home</a>
38 |           </li>
39 |           <% if(logged){ %>
40 |             <li class="nav-item">
41 |               <a class="nav-link" href="/logout">Logout</a>
42 |             </li>
43 |             <% }else{ %>
44 |               <li class="nav-item">
45 |                 <a class="nav-link" href="/login">Login</a>
46 |               </li>
47 |               <li class="nav-item">
48 |                 <a class="nav-link" href="/signup">Signup</a>
49 |               </li>
50 |               <% } %>
51 |         </ul>
52 |       </div>
53 |     </div>
54 |   </nav>
55 |   <!-- navbar end  -->
56 | 
57 |   <div class="container py-3">
58 |     <h1>Welcome To Desi Programmer</h1>
59 |     <h2>This is a Tutorial About Node Js Authentication and Authorization</h2>
60 |   </div>
61 | 
62 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
63 |     integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
64 |     crossorigin="anonymous"></script>
65 | 
66 | </body>
67 | 
68 | </html>


--------------------------------------------------------------------------------
/views/template/profile.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <!-- Font  -->
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com">
10 | <link href="https://fonts.googleapis.com/css2?family=Recursive:wght@500&display=swap" rel="stylesheet">
11 | <!-- Bootstrap CDN  -->
12 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
13 |     <title>Authentications</title>
14 |     <style>
15 |        
16 |             body {
17 |               font-family: 'Recursive', sans-serif;
18 |         font-size: larger;
19 |       }
20 |       
21 |         .customborder {
22 |             border-radius: 2%;
23 |             border: 2px solid #E95420;
24 |         }
25 |     </style>
26 | </head>
27 | 
28 | <body>
29 | 
30 |     <!-- navbar  -->
31 |     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
32 |         <div class="container-fluid">
33 |           <a class="navbar-brand" href="#">Authentications</a>
34 |           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
35 |             <span class="navbar-toggler-icon"></span>
36 |           </button>
37 |           <div class="collapse navbar-collapse" id="navbarNav">
38 |               
39 |             <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
40 |               <li class="nav-item">
41 |                 <a class="nav-link" aria-current="page" href="#">Home</a>
42 |               </li>
43 |               <li class="nav-item">
44 |                 <a class="nav-link active" href="#">Login</a>
45 |               </li>
46 |               <li class="nav-item">
47 |                 <a class="nav-link" href="#">Signup</a>
48 |               </li>
49 |             </ul>
50 |           </div>
51 |         </div>
52 |       </nav>
53 |     <!-- navbar end  -->
54 | 
55 | 
56 |     <div class="container">
57 |         <h1 class="text-center p-3">Your Profile</h1>
58 |         
59 |         <div class="card" style="width: 28rem;">
60 |             <img src="https://images.pexels.com/photos/917494/pexels-photo-917494.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="card-img-top" alt="...">
61 |             <div class="card-body">
62 |               <h3 class="card-title">username</h3>
63 |               
64 |             </div>
65 |           </div>
66 |        
67 |     </div>
68 | 
69 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
70 | 
71 | </body>
72 | 
73 | </html>


--------------------------------------------------------------------------------
/views/bare_templates/register.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <link rel="stylesheet" type="text/css" href="https://bootswatch.com/4/united/bootstrap.min.css">
 9 |     <title>Authentications</title>
10 |     <style>
11 |         .customborder {
12 |             border-radius: 2%;
13 |             border: 2px solid #E95420;
14 |         }
15 |     </style>
16 | </head>
17 | 
18 | <body>
19 |     <div class="container">
20 |         <h3 class="text-center p-3">Register Yourself</h3>
21 |         <div style="margin: 0 auto;" class="col-12 col-md-6 col-lg-5 p-5 customborder">
22 |             <form action="/register" method="POST">
23 |                 <div class="form-group">
24 |                     <label for="email">Enter Your Email</label>
25 |                     <input type="email" class="form-control" name="email" id="email" autocomplete="off"
26 |                         placeholder="Email">
27 |                 </div>
28 |                 <div class="form-group">
29 |                     <label for="username">Choose A Username</label>
30 |                     <input type="text" class="form-control" name="username" id="username" autocomplete="off"
31 |                         placeholder="Username">
32 |                 </div>
33 |                 <div class="form-group">
34 |                     <label for="password">Choose A Password</label>
35 |                     <input type="password" class="form-control" name="password" id="password" autocomplete="off"
36 |                         placeholder="Password">
37 |                 </div>
38 |                 <div class="form-group">
39 |                     <label for="confirmpassword">Confirm Your Password</label>
40 |                     <input type="password" class="form-control" name="confirmpassword" id="confirmpassword"
41 |                         autocomplete="off" placeholder="Confirm Password">
42 |                 </div>
43 |                 <div class="form-group">
44 |                     <input type="submit" class="btn btn-block btn-outline-primary" value="Register">
45 |                 </div>
46 |                 <p>Already Registered ? <a class="card-link" href="/login">LOGIN Here</a> </p>
47 |             </form>
48 |         </div>
49 |     </div>
50 |     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
51 |         integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
52 |         crossorigin="anonymous"></script>
53 |     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
54 |         integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
55 |         crossorigin="anonymous"></script>
56 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
57 |         integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
58 |         crossorigin="anonymous"></script>
59 | </body>
60 | 
61 | </html>
62 | 


--------------------------------------------------------------------------------
/views/template/login.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <!-- Font  -->
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com">
10 | <link href="https://fonts.googleapis.com/css2?family=Recursive:wght@500&display=swap" rel="stylesheet">
11 | <!-- Bootstrap CDN  -->
12 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
13 |     <title>Authentications</title>
14 |     <style>
15 |        
16 |             body {
17 |               font-family: 'Recursive', sans-serif;
18 |         font-size: larger;
19 |       }
20 |       
21 |         .customborder {
22 |             border-radius: 2%;
23 |             border: 2px solid #E95420;
24 |         }
25 |     </style>
26 | </head>
27 | 
28 | <body>
29 | 
30 |     <!-- navbar  -->
31 |     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
32 |         <div class="container-fluid">
33 |           <a class="navbar-brand" href="#">Authentications</a>
34 |           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
35 |             <span class="navbar-toggler-icon"></span>
36 |           </button>
37 |           <div class="collapse navbar-collapse" id="navbarNav">
38 |               
39 |             <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
40 |               <li class="nav-item">
41 |                 <a class="nav-link" aria-current="page" href="#">Home</a>
42 |               </li>
43 |               <li class="nav-item">
44 |                 <a class="nav-link active" href="#">Login</a>
45 |               </li>
46 |               <li class="nav-item">
47 |                 <a class="nav-link" href="#">Signup</a>
48 |               </li>
49 |             </ul>
50 |           </div>
51 |         </div>
52 |       </nav>
53 |     <!-- navbar end  -->
54 | 
55 | 
56 |     <div class="container">
57 |         <h1 class="text-center p-3">Login Here</h1>
58 |         <div style="margin: 0 auto;" class="col-12 col-md-6 col-lg-5 p-5 customborder">
59 |             <form action="/login" method="POST">
60 |                 <div class="mb-3">
61 |                     <label for="username">Enter Your Email</label>
62 |                     <input type="email" class="form-control form-control-lg" name="email" id="username" autocomplete="off"
63 |                         placeholder="Email">
64 |                 </div>
65 |                 <div class="mb-3">
66 |                     <label for="password">Enter Your Password</label>
67 |                     <input type="password" class="form-control form-control-lg" name="password" id="password" autocomplete="off"
68 |                         placeholder="Password">
69 |                 </div>
70 |                 <div class="d-grid gap-3 mb-3">
71 |                     <input type="submit" class="btn btn-lg btn-block btn-outline-primary" value="Login">
72 |                     <a class="btn btn-lg btn-success" href="">Continue With Google</a>
73 |                 </div>
74 |                 <p>New Here ? <a class="card-link" href="/">Register Now</a> </p>
75 |             </form>
76 |         </div>
77 |     </div>
78 | 
79 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
80 | 
81 | </body>
82 | 
83 | </html>


--------------------------------------------------------------------------------
/controller/routes.js:
--------------------------------------------------------------------------------
  1 | const express = require('express');
  2 | const router = express.Router();
  3 | const user = require('../model/user');
  4 | const bcryptjs = require('bcryptjs');
  5 | const passport = require('passport');
  6 | require('./passportLocal')(passport);
  7 | require('./googleAuth')(passport);
  8 | const userRoutes = require('./accountRoutes');
  9 | 
 10 | function checkAuth(req, res, next) {
 11 |     if (req.isAuthenticated()) {
 12 |         res.set('Cache-Control', 'no-cache, private, no-store, must-revalidate, post-check=0, pre-check=0');
 13 |         next();
 14 |     } else {
 15 |         req.flash('error_messages', "Please Login to continue !");
 16 |         res.redirect('/login');
 17 |     }
 18 | }
 19 | 
 20 | router.get('/', (req, res) => {
 21 |     if (req.isAuthenticated()) {
 22 |         res.render("index", { logged: true });
 23 |     } else {
 24 |         res.render("index", { logged: false });
 25 |     }
 26 | });
 27 | 
 28 | router.get('/login', (req, res) => {
 29 |     res.render("login", { csrfToken: req.csrfToken() });
 30 | });
 31 | 
 32 | router.get('/signup', (req, res) => {
 33 |     res.render("signup", { csrfToken: req.csrfToken() });
 34 | });
 35 | 
 36 | router.post('/signup', (req, res) => {
 37 |     // get all the values 
 38 |     const { email, username, password, confirmpassword } = req.body;
 39 |     // check if the are empty 
 40 |     if (!email || !username || !password || !confirmpassword) {
 41 |         res.render("signup", { err: "All Fields Required !", csrfToken: req.csrfToken() });
 42 |     } else if (password != confirmpassword) {
 43 |         res.render("signup", { err: "Password Don't Match !", csrfToken: req.csrfToken() });
 44 |     } else {
 45 | 
 46 |         // validate email and username and password 
 47 |         // skipping validation
 48 |         // check if a user exists
 49 |         user.findOne({ $or: [{ email: email }, { username: username }] }, function (err, data) {
 50 |             if (err) throw err;
 51 |             if (data) {
 52 |                 res.render("signup", { err: "User Exists, Try Logging In !", csrfToken: req.csrfToken() });
 53 |             } else {
 54 |                 // generate a salt
 55 |                 bcryptjs.genSalt(12, (err, salt) => {
 56 |                     if (err) throw err;
 57 |                     // hash the password
 58 |                     bcryptjs.hash(password, salt, (err, hash) => {
 59 |                         if (err) throw err;
 60 |                         // save user in db
 61 |                         user({
 62 |                             username: username,
 63 |                             email: email,
 64 |                             password: hash,
 65 |                             googleId: null,
 66 |                             provider: 'email',
 67 |                         }).save((err, data) => {
 68 |                             if (err) throw err;
 69 |                             // login the user
 70 |                             // use req.login
 71 |                             // redirect , if you don't want to login
 72 |                             res.redirect('/login');
 73 |                         });
 74 |                     })
 75 |                 });
 76 |             }
 77 |         });
 78 |     }
 79 | });
 80 | 
 81 | router.post('/login', (req, res, next) => {
 82 |     passport.authenticate('local', {
 83 |         failureRedirect: '/login',
 84 |         successRedirect: '/profile',
 85 |         failureFlash: true,
 86 |     })(req, res, next);
 87 | });
 88 | 
 89 | router.get('/logout', (req, res) => {
 90 |     req.logout();
 91 |     req.session.destroy(function (err) {
 92 |         res.redirect('/');
 93 |     });
 94 | });
 95 | 
 96 | router.get('/google', passport.authenticate('google', { scope: ['profile', 'email',] }));
 97 | 
 98 | router.get('/google/callback', passport.authenticate('google', { failureRedirect: '/login' }), (req, res) => {
 99 |     res.redirect('/profile');
100 | });
101 | 
102 | router.get('/profile', checkAuth, (req, res) => {
103 |     // adding a new parameter for checking verification
104 |     res.render('profile', { username: req.user.username, verified : req.user.isVerified });
105 | 
106 | });
107 | 
108 | 
109 | router.use(userRoutes);
110 | 
111 | module.exports = router;


--------------------------------------------------------------------------------
/views/template/signup.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <!-- Font  -->
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com">
10 | <link href="https://fonts.googleapis.com/css2?family=Recursive:wght@500&display=swap" rel="stylesheet">
11 |     <!-- Bootstrap CDN  -->
12 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
13 |         integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
14 |     <title>Authentications</title>
15 |     <style>
16 |         body {
17 |             font-family: 'Recursive', sans-serif;
18 |             font-size: larger;
19 |         }
20 | 
21 |         .customborder {
22 |             border-radius: 2%;
23 |             border: 2px solid #E95420;
24 |         }
25 |     </style>
26 | </head>
27 | 
28 | <body>
29 | 
30 |     <!-- navbar  -->
31 |     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
32 |         <div class="container-fluid">
33 |             <a class="navbar-brand" href="#">Authentications</a>
34 |             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
35 |                 aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
36 |                 <span class="navbar-toggler-icon"></span>
37 |             </button>
38 |             <div class="collapse navbar-collapse" id="navbarNav">
39 | 
40 |                 <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
41 |                     <li class="nav-item">
42 |                         <a class="nav-link" aria-current="page" href="#">Home</a>
43 |                     </li>
44 |                     <li class="nav-item">
45 |                         <a class="nav-link" href="#">Login</a>
46 |                     </li>
47 |                     <li class="nav-item">
48 |                         <a class="nav-link active" href="#">Signup</a>
49 |                     </li>
50 |                 </ul>
51 |             </div>
52 |         </div>
53 |     </nav>
54 |     <!-- navbar end  -->
55 | 
56 | 
57 |     <div class="container">
58 |         <h1 class="text-center p-3">Register Yourself</h1>
59 |         <div style="margin: 0 auto;" class="col-12 col-md-6 col-lg-5 p-5 customborder">
60 |             <form action="/register" method="POST">
61 |                 <div class="mb-3">
62 |                     <label for="email">Enter Your Email</label>
63 |                     <input type="email" class="form-control form-control-lg" name="email" id="email" autocomplete="off"
64 |                         placeholder="Email">
65 |                 </div>
66 |                 <div class="mb-3">
67 |                     <label for="username">Choose A Username</label>
68 |                     <input type="text" class="form-control form-control-lg" name="username" id="username" autocomplete="off"
69 |                         placeholder="Username">
70 |                 </div>
71 |                 <div class="mb-3">
72 |                     <label for="password">Choose A Password</label>
73 |                     <input type="password" class="form-control form-control-lg" name="password" id="password" autocomplete="off"
74 |                         placeholder="Password">
75 |                 </div>
76 |                 <div class="mb-3">
77 |                     <label for="confirmpassword">Confirm Your Password</label>
78 |                     <input type="password" class="form-control form-control-lg" name="confirmpassword" id="confirmpassword"
79 |                         autocomplete="off" placeholder="Confirm Password">
80 |                 </div>
81 |                 <div class="d-grid gap-3 mb-3">
82 |                     <input type="submit" class="btn btn-lg btn-outline-primary" value="Register">
83 |                     <a class="btn btn-lg btn-success" href="">Continue With Google</a>
84 |                 </div>
85 |                 <p>Already Registered ? <a class="card-link" href="/login">LOGIN Here</a> </p>
86 |             </form>
87 |         </div>
88 |     </div>
89 | 
90 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
91 |         integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
92 |         crossorigin="anonymous"></script>
93 | 
94 | </body>
95 | 
96 | </html>


--------------------------------------------------------------------------------
/views/profile.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <!-- Font  -->
  9 |   <link rel="preconnect" href="https://fonts.gstatic.com">
 10 |   <link href="https://fonts.googleapis.com/css2?family=Recursive:wght@500&display=swap" rel="stylesheet">
 11 |   <!-- Bootstrap CDN  -->
 12 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
 13 |     integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 14 |   <title>Authentications</title>
 15 |   <style>
 16 |     body {
 17 |       font-family: 'Recursive', sans-serif;
 18 |       font-size: larger;
 19 |     }
 20 | 
 21 |     .customborder {
 22 |       border-radius: 2%;
 23 |       border: 2px solid #E95420;
 24 |     }
 25 |   </style>
 26 | </head>
 27 | 
 28 | <body>
 29 | 
 30 |   <!-- navbar  -->
 31 |   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 32 |     <div class="container-fluid">
 33 |       <a class="navbar-brand" href="#">Authentications</a>
 34 |       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
 35 |         aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 36 |         <span class="navbar-toggler-icon"></span>
 37 |       </button>
 38 |       <div class="collapse navbar-collapse" id="navbarNav">
 39 | 
 40 |         <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
 41 |           <li class="nav-item">
 42 |             <a class="nav-link" aria-current="page" href="#">Home</a>
 43 |           </li>
 44 |           <li class="nav-item">
 45 |             <a class="nav-link active" href="/logout">Logout</a>
 46 |           </li>
 47 |         </ul>
 48 |       </div>
 49 |     </div>
 50 |   </nav>
 51 |   <!-- navbar end  -->
 52 | 
 53 | 
 54 |   <div class="container">
 55 |     <!-- show a dialog if user is not verified  -->
 56 | 
 57 |     <% if(!verified){ %>
 58 |       <div class="alert alert-danger alert-dismissible fade show mt-3" role="alert">
 59 |         <strong>ATTENTION !</strong> Please verify your account to continue using our services.
 60 |         <a href="/user/send-verification-email">Re-send Verification Email</a>
 61 |         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 62 | 
 63 |       </div>
 64 |       <% } %>
 65 | 
 66 |         <% if(typeof emailsent !='undefined' ){ %>
 67 |           <% if(emailsent){ %>
 68 |             <div class="alert alert-success alert-dismissible fade show" role="alert">
 69 |               <strong>SUCCESS</strong> Verification Email Sent Sucessfully. Valid Only for 20 minutes.
 70 |               <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 71 | 
 72 |             </div>
 73 | 
 74 |             <% } %>
 75 |               <% } %>
 76 |                 <% if(typeof err !='undefined' ){ %>
 77 |                   <% if(err){ %>
 78 |                     <div class="alert alert-success alert-dismissible fade show" role="alert">
 79 |                       <strong>ERROR </strong>
 80 |                       <%= err %>.
 81 |                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 82 | 
 83 |                     </div>
 84 | 
 85 |                     <% } %>
 86 |                       <% } %>
 87 | 
 88 |                         <h1 class="text-center p-3">Your Profile</h1>
 89 | 
 90 |                         <div class="card" style="width: 28rem;">
 91 |                           <img
 92 |                             src="https://images.pexels.com/photos/917494/pexels-photo-917494.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
 93 |                             class="card-img-top" alt="...">
 94 |                           <div class="card-body">
 95 |                             <h3 class="card-title">
 96 |                               <%= username %>
 97 |                             </h3>
 98 | 
 99 |                           </div>
100 |                         </div>
101 | 
102 |   </div>
103 | 
104 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
105 |     integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
106 |     crossorigin="anonymous"></script>
107 | 
108 | </body>
109 | 
110 | </html>


--------------------------------------------------------------------------------
/views/signup.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <!-- Font  -->
  9 |     <link rel="preconnect" href="https://fonts.gstatic.com">
 10 |     <link href="https://fonts.googleapis.com/css2?family=Recursive:wght@500&display=swap" rel="stylesheet">
 11 |     <!-- Bootstrap CDN  -->
 12 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
 13 |         integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 14 |     <title>Authentications</title>
 15 |     <style>
 16 |         body {
 17 |             font-family: 'Recursive', sans-serif;
 18 |             font-size: larger;
 19 |         }
 20 | 
 21 |         .customborder {
 22 |             border-radius: 2%;
 23 |             border: 2px solid #E95420;
 24 |         }
 25 |     </style>
 26 | </head>
 27 | 
 28 | <body>
 29 | 
 30 |     <!-- navbar  -->
 31 |     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 32 |         <div class="container-fluid">
 33 |             <a class="navbar-brand" href="#">Authentications</a>
 34 |             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
 35 |                 aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 36 |                 <span class="navbar-toggler-icon"></span>
 37 |             </button>
 38 |             <div class="collapse navbar-collapse" id="navbarNav">
 39 | 
 40 |                 <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
 41 |                     <li class="nav-item">
 42 |                         <a class="nav-link" aria-current="page" href="#">Home</a>
 43 |                     </li>
 44 |                     <li class="nav-item">
 45 |                         <a class="nav-link" href="/login">Login</a>
 46 |                     </li>
 47 |                     <li class="nav-item">
 48 |                         <a class="nav-link active" href="">Signup</a>
 49 |                     </li>
 50 |                 </ul>
 51 |             </div>
 52 |         </div>
 53 |     </nav>
 54 |     <!-- navbar end  -->
 55 | 
 56 | 
 57 |     <div class="container">
 58 |         <h1 class="text-center p-3">Register Yourself</h1>
 59 |         <div style="margin: 0 auto;" class="col-12 col-md-6 col-lg-5 p-5 customborder">
 60 | 
 61 |             <% if(typeof err !='undefined' ){ %>
 62 |                 <div class="alert alert-danger alert-dismissible fade show" role="alert">
 63 |                     <strong> Error </strong>
 64 |                     <%= err %>.
 65 |                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 66 |                 </div>
 67 |                 <% } %>
 68 | 
 69 |                     <form action="/signup" method="POST">
 70 |                         <input type="hidden" name="_csrf" value="<%= csrfToken %>">
 71 |                         <div class="mb-3">
 72 |                             <label for="email">Enter Your Email</label>
 73 |                             <input type="email" class="form-control form-control-lg" name="email" id="email"
 74 |                                 autocomplete="off" placeholder="Email">
 75 |                         </div>
 76 |                         <div class="mb-3">
 77 |                             <label for="username">Choose A Username</label>
 78 |                             <input type="text" class="form-control form-control-lg" name="username" id="username"
 79 |                                 autocomplete="off" placeholder="Username">
 80 |                         </div>
 81 |                         <div class="mb-3">
 82 |                             <label for="password">Choose A Password</label>
 83 |                             <input type="password" class="form-control form-control-lg" name="password" id="password"
 84 |                                 autocomplete="off" placeholder="Password">
 85 |                         </div>
 86 |                         <div class="mb-3">
 87 |                             <label for="confirmpassword">Confirm Your Password</label>
 88 |                             <input type="password" class="form-control form-control-lg" name="confirmpassword"
 89 |                                 id="confirmpassword" autocomplete="off" placeholder="Confirm Password">
 90 |                         </div>
 91 |                         <div class="d-grid gap-3 mb-3">
 92 |                             <input type="submit" class="btn btn-lg btn-outline-primary" value="Register">
 93 |                             <a class="btn btn-lg btn-success" href="">Continue With Google</a>
 94 |                         </div>
 95 |                         <p>Already Registered ? <a class="card-link" href="/login">LOGIN Here</a> </p>
 96 |                     </form>
 97 |         </div>
 98 |     </div>
 99 | 
100 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
101 |         integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
102 |         crossorigin="anonymous"></script>
103 | 
104 | </body>
105 | 
106 | </html>


--------------------------------------------------------------------------------
/views/login.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <!-- Font  -->
  8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
  9 |     <link
 10 |       href="https://fonts.googleapis.com/css2?family=Recursive:wght@500&display=swap"
 11 |       rel="stylesheet"
 12 |     />
 13 |     <!-- Bootstrap CDN  -->
 14 |     <link
 15 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
 16 |       rel="stylesheet"
 17 |       integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
 18 |       crossorigin="anonymous"
 19 |     />
 20 |     <title>Authentications</title>
 21 |     <style>
 22 |       body {
 23 |         font-family: "Recursive", sans-serif;
 24 |         font-size: larger;
 25 |       }
 26 | 
 27 |       .customborder {
 28 |         border-radius: 2%;
 29 |         border: 2px solid #e95420;
 30 |       }
 31 |     </style>
 32 |   </head>
 33 | 
 34 |   <body>
 35 |     <!-- navbar  -->
 36 |     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 37 |       <div class="container-fluid">
 38 |         <a class="navbar-brand" href="#">Authentications</a>
 39 |         <button
 40 |           class="navbar-toggler"
 41 |           type="button"
 42 |           data-bs-toggle="collapse"
 43 |           data-bs-target="#navbarNav"
 44 |           aria-controls="navbarNav"
 45 |           aria-expanded="false"
 46 |           aria-label="Toggle navigation"
 47 |         >
 48 |           <span class="navbar-toggler-icon"></span>
 49 |         </button>
 50 |         <div class="collapse navbar-collapse" id="navbarNav">
 51 |           <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
 52 |             <li class="nav-item">
 53 |               <a class="nav-link" aria-current="page" href="#">Home</a>
 54 |             </li>
 55 |             <li class="nav-item">
 56 |               <a class="nav-link active" href="">Login</a>
 57 |             </li>
 58 |             <li class="nav-item">
 59 |               <a class="nav-link" href="/signup">Signup</a>
 60 |             </li>
 61 |           </ul>
 62 |         </div>
 63 |       </div>
 64 |     </nav>
 65 |     <!-- navbar end  -->
 66 | 
 67 |     <div class="container">
 68 |       <h1 class="text-center p-3">Login Here</h1>
 69 |       <div
 70 |         style="margin: 0 auto"
 71 |         class="col-12 col-md-6 col-lg-5 p-5 customborder"
 72 |       >
 73 |         <% if( error !="" ){ %>
 74 |         <div
 75 |           class="alert alert-danger alert-dismissible fade show"
 76 |           role="alert"
 77 |         >
 78 |           <strong> Error </strong>
 79 |           <%= error %>.
 80 |           <button
 81 |             type="button"
 82 |             class="btn-close"
 83 |             data-bs-dismiss="alert"
 84 |             aria-label="Close"
 85 |           ></button>
 86 |         </div>
 87 |         <% } %>
 88 | 
 89 |         <!-- if someone tried to access a protected route  -->
 90 |         <!-- this flash message will show them to login first  -->
 91 | 
 92 |         <% if( error_messages !="" ){ %>
 93 |           <div class="alert alert-danger alert-dismissible fade show" role="alert">
 94 |               <strong> Error </strong>
 95 |               <%= error_messages %>.
 96 |                   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 97 |           </div>
 98 |           <% } %>
 99 | 
100 |         <form action="/login" , method="POST">
101 |           <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
102 |           <div class="mb-3">
103 |             <label for="username">Enter Your Email</label>
104 |             <input
105 |               type="email"
106 |               class="form-control form-control-lg"
107 |               name="email"
108 |               id="username"
109 |               autocomplete="off"
110 |               placeholder="Email"
111 |             />
112 |           </div>
113 |           <div class="mb-3">
114 |             <label for="password">Enter Your Password</label>
115 |             <input
116 |               type="password"
117 |               class="form-control form-control-lg"
118 |               name="password"
119 |               id="password"
120 |               autocomplete="off"
121 |               placeholder="Password"
122 |             />
123 |           </div>
124 |           <div class="d-grid gap-3 mb-3">
125 |             <input
126 |               type="submit"
127 |               class="btn btn-lg btn-block btn-outline-primary"
128 |               value="Login"
129 |             />
130 |             <a class="btn btn-lg btn-success" href="/google"
131 |               >Continue With Google</a
132 |             >
133 |           </div>
134 |           <p>New Here ? <a class="card-link" href="/signup">Register Now</a></p>
135 |           <!-- added a new button for redirecting to forgot password page  -->
136 |           <p>
137 |             <a class="card-link" href="/user/forgot-password"
138 |               >Forgot Password</a
139 |             >
140 |           </p>
141 |         </form>
142 |       </div>
143 |     </div>
144 | 
145 |     <script
146 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
147 |       integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
148 |       crossorigin="anonymous"
149 |     ></script>
150 |   </body>
151 | </html>
152 | 


--------------------------------------------------------------------------------
/views/forgot-password.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <!-- Font  -->
  8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
  9 |     <link
 10 |       href="https://fonts.googleapis.com/css2?family=Recursive:wght@500&display=swap"
 11 |       rel="stylesheet"
 12 |     />
 13 |     <!-- Bootstrap CDN  -->
 14 |     <link
 15 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
 16 |       rel="stylesheet"
 17 |       integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
 18 |       crossorigin="anonymous"
 19 |     />
 20 |     <title>Authentications</title>
 21 |     <style>
 22 |       body {
 23 |         font-family: "Recursive", sans-serif;
 24 |         font-size: larger;
 25 |       }
 26 | 
 27 |       .customborder {
 28 |         border-radius: 2%;
 29 |         border: 2px solid #e95420;
 30 |       }
 31 |     </style>
 32 |   </head>
 33 | 
 34 |   <body>
 35 |     <!-- navbar  -->
 36 |     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 37 |       <div class="container-fluid">
 38 |         <a class="navbar-brand" href="#">Authentications</a>
 39 |         <button
 40 |           class="navbar-toggler"
 41 |           type="button"
 42 |           data-bs-toggle="collapse"
 43 |           data-bs-target="#navbarNav"
 44 |           aria-controls="navbarNav"
 45 |           aria-expanded="false"
 46 |           aria-label="Toggle navigation"
 47 |         >
 48 |           <span class="navbar-toggler-icon"></span>
 49 |         </button>
 50 |         <div class="collapse navbar-collapse" id="navbarNav">
 51 |           <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
 52 |             <li class="nav-item">
 53 |               <a class="nav-link" aria-current="page" href="#">Home</a>
 54 |             </li>
 55 |             <li class="nav-item">
 56 |               <a class="nav-link active" href="">Login</a>
 57 |             </li>
 58 |             <li class="nav-item">
 59 |               <a class="nav-link" href="/signup">Signup</a>
 60 |             </li>
 61 |           </ul>
 62 |         </div>
 63 |       </div>
 64 |     </nav>
 65 |     <!-- navbar end  -->
 66 | 
 67 |     <div class="container">
 68 |       <h1 class="text-center p-3">Reset Your Password</h1>
 69 |       <div
 70 |         style="margin: 0 auto"
 71 |         class="col-12 col-md-6 col-lg-5 p-5 customborder"
 72 |       >
 73 |         <% if(typeof reset !='undefined' ){ %> <% if( reset){ %> <% if(typeof
 74 |         err !='undefined' ){ %> <% if( err !="" ){ %>
 75 |         <div
 76 |           class="alert alert-danger alert-dismissible fade show"
 77 |           role="alert"
 78 |         >
 79 |           <strong> Error </strong>
 80 |           <%= err %>.
 81 |           <button
 82 |             type="button"
 83 |             class="btn-close"
 84 |             data-bs-dismiss="alert"
 85 |             aria-label="Close"
 86 |           ></button>
 87 |         </div>
 88 |         <% } %> <% } %>
 89 | 
 90 |         <!-- // render the form to reset password  -->
 91 |         <form action="/user/reset-password" , method="POST">
 92 |           <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
 93 |           <div class="mb-3">
 94 |             <label for="password">Enter New Password</label>
 95 |             <input
 96 |               type="password"
 97 |               class="form-control form-control-lg"
 98 |               name="password"
 99 |               id="password"
100 |               autocomplete="off"
101 |               placeholder="Password"
102 |             />
103 |           </div>
104 |           <div class="mb-3">
105 |             <label for="password">Confirm New Password</label>
106 |             <input
107 |               type="password"
108 |               class="form-control form-control-lg"
109 |               name="password2"
110 |               id="password"
111 |               autocomplete="off"
112 |               placeholder="Password Again"
113 |             />
114 |           </div>
115 |           <input type="hidden" name="email" value="<%= email %>" />
116 |           <div class="d-grid gap-3 mb-3">
117 |             <input
118 |               type="submit"
119 |               class="btn btn-lg btn-block btn-outline-success"
120 |               value="Reset Password"
121 |             />
122 |           </div>
123 |         </form>
124 | 
125 |         <% }else{ %> <% } %> <% }else{ %>
126 | 
127 |         <!-- // render the form to send reset link -->
128 |         <% if(typeof msg !='undefined' ){ %> <% if( msg !="" ){ %>
129 |         <div
130 |           class="alert alert-<%= type %> alert-dismissible fade show"
131 |           role="alert"
132 |         >
133 |           <strong> Error </strong>
134 |           <%= msg %>.
135 |           <button
136 |             type="button"
137 |             class="btn-close"
138 |             data-bs-dismiss="alert"
139 |             aria-label="Close"
140 |           ></button>
141 |         </div>
142 |         <% } %> <% } %>
143 | 
144 |         <form action="/user/forgot-password" , method="POST">
145 |           <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
146 |           <div class="mb-3">
147 |             <label for="email">Enter Your Email</label>
148 |             <input
149 |               type="email"
150 |               class="form-control form-control-lg"
151 |               name="email"
152 |               id="email"
153 |               autocomplete="off"
154 |               placeholder="Email"
155 |             />
156 |           </div>
157 | 
158 |           <div class="d-grid gap-3 mb-3">
159 |             <input
160 |               type="submit"
161 |               class="btn btn-lg btn-block btn-outline-success"
162 |               value="Send Reset Link"
163 |             />
164 |           </div>
165 |         </form>
166 |         <% } %>
167 |       </div>
168 |     </div>
169 | 
170 |     <script
171 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
172 |       integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
173 |       crossorigin="anonymous"
174 |     ></script>
175 |   </body>
176 | </html>
177 | 


--------------------------------------------------------------------------------
/controller/accountRoutes.js:
--------------------------------------------------------------------------------
  1 | const express = require('express');
  2 | const router = express.Router();
  3 | const crypto = require('crypto');
  4 | const resetToken = require('../model/resetTokens');
  5 | const user = require('../model/user');
  6 | const mailer = require('./sendMail');
  7 | const bcryptjs = require('bcryptjs');
  8 | 
  9 | function checkAuth(req, res, next) {
 10 |     if (req.isAuthenticated()) {
 11 |         res.set('Cache-Control', 'no-cache, private, no-store, must-revalidate, post-check=0, pre-check=0');
 12 |         next();
 13 |     } else {
 14 |         req.flash('error_messages', "Please Login to continue !");
 15 |         res.redirect('/login');
 16 |     }
 17 | }
 18 | 
 19 | // adding the checkAuth middleware to make sure that 
 20 | // only authenticated users can send emails
 21 | router.get('/user/send-verification-email', checkAuth, async (req, res) => {
 22 |     // check if user is google or already verified
 23 |     if (req.user.isVerified || req.user.provider == 'google') {
 24 |         // already verified or google user
 25 |         // since we won't show any such option in the UI 
 26 |         // most probably this is being called by mistake or can be an attack
 27 |         // simply redirect to profile 
 28 |         res.redirect('/profile');
 29 |     } else {
 30 |         // generate a token 
 31 |         var token = crypto.randomBytes(32).toString('hex');
 32 |         // add that to database
 33 |         await resetToken({ token: token, email: req.user.email }).save();
 34 |         // send an email for verification
 35 |         mailer.sendVerifyEmail(req.user.email, token);
 36 |         res.render('profile', { username: req.user.username, verified: req.user.isVerified, emailsent: true });
 37 |     }
 38 | });
 39 | 
 40 | 
 41 | router.get('/user/verifyemail', async (req, res) => {
 42 |     // grab the token
 43 |     const token = req.query.token;
 44 |     // check if token exists 
 45 |     // or just send an error
 46 |     if (token) {
 47 |         var check = await resetToken.findOne({ token: token });
 48 |         if (check) {
 49 |             // token verified
 50 |             // set the property of verified to true for the user
 51 |             var userData = await user.findOne({ email: check.email });
 52 |             userData.isVerified = true;
 53 |             await userData.save();
 54 |             // delete the token now itself
 55 |             await resetToken.findOneAndDelete({ token: token });
 56 |             res.redirect('/profile');
 57 |         } else {
 58 |             res.render('profile', { username: req.user.username, verified: req.user.isVerified, err: "Invalid token or Token has expired, Try again." });
 59 |         }
 60 |     } else {
 61 |         // doesnt have a token
 62 |         // I will simply redirect to profile 
 63 |         res.redirect('/profile');
 64 |     }
 65 | });
 66 | 
 67 | router.get('/user/forgot-password', async (req, res) => {
 68 |     // render reset password page 
 69 |     // not checking if user is authenticated 
 70 |     // so that you can use as an option to change password too
 71 |     res.render('forgot-password.ejs', { csrfToken: req.csrfToken() });
 72 | 
 73 | });
 74 | 
 75 | router.post('/user/forgot-password', async (req, res) => {
 76 |     const { email } = req.body;
 77 |     // not checking if the field is empty or not 
 78 |     // check if a user existss with this email
 79 |     var userData = await user.findOne({ email: email });
 80 |     console.log(userData);
 81 |     if (userData) {
 82 |         if (userData.provider == 'google') {
 83 |             // type is for bootstrap alert types
 84 |             res.render('forgot-password.ejs', { csrfToken: req.csrfToken(), msg: "User exists with Google account. Try resetting your google account password or logging using it.", type: 'danger' });
 85 |         } else {
 86 |             // user exists and is not with google
 87 |             // generate token
 88 |             var token = crypto.randomBytes(32).toString('hex');
 89 |             // add that to database
 90 |             await resetToken({ token: token, email: email }).save();
 91 |             // send an email for verification
 92 |             mailer.sendResetEmail(email, token);
 93 | 
 94 |             res.render('forgot-password.ejs', { csrfToken: req.csrfToken(), msg: "Reset email sent. Check your email for more info.", type: 'success' });
 95 |         }
 96 |     } else {
 97 |         res.render('forgot-password.ejs', { csrfToken: req.csrfToken(), msg: "No user Exists with this email.", type: 'danger' });
 98 | 
 99 |     }
100 | });
101 | 
102 | router.get('/user/reset-password', async (req, res) => {
103 |     // do as in user verify , first check for a valid token 
104 |     // and if the token is valid send the forgot password page to show the option to change password 
105 | 
106 |     const token = req.query.token;
107 |     if (token) {
108 |         var check = await resetToken.findOne({ token: token });
109 |         if (check) {
110 |             // token verified
111 |             // send forgot-password page with reset to true
112 |             // this will render the form to reset password
113 |             // sending token too to grab email later
114 |             res.render('forgot-password.ejs', { csrfToken: req.csrfToken(), reset: true, email: check.email });
115 |         } else {
116 |             res.render('forgot-password.ejs', { csrfToken: req.csrfToken(), msg: "Token Tampered or Expired.", type: 'danger' });
117 |         }
118 |     } else {
119 |         // doesnt have a token
120 |         // I will simply redirect to profile 
121 |         res.redirect('/login');
122 |     }
123 | 
124 | });
125 | 
126 | 
127 | router.post('/user/reset-password', async (req, res) => {
128 |     // get passwords
129 |     const { password, password2, email } = req.body;
130 |     console.log(password);
131 |     console.log(password2);
132 |     if (!password || !password2 || (password2 != password)) {
133 |         res.render('forgot-password.ejs', { csrfToken: req.csrfToken(), reset: true, err: "Passwords Don't Match !", email: email });
134 |     } else {
135 |         // encrypt the password
136 |         var salt = await bcryptjs.genSalt(12);
137 |         if (salt) {
138 |             var hash = await bcryptjs.hash(password, salt);
139 |             await user.findOneAndUpdate({ email: email }, { $set: { password: hash } });
140 |             res.redirect('/login');
141 |         } else {
142 |             res.render('forgot-password.ejs', { csrfToken: req.csrfToken(), reset: true, err: "Unexpected Error Try Again", email: email });
143 | 
144 |         }
145 |     }
146 | });
147 | 
148 | 
149 | module.exports = router;


--------------------------------------------------------------------------------