1.1 Setting up Node.js<\/h3>\n
To set up Node.js<\/strong> on windows you will need to download the installer from this<\/a> link. Click on the installer (also include the NPM package manager) for your platform and run the installer to start with the Node.js setup wizard. Follow the wizard steps and click on Finish when it is done. If everything goes well you can navigate to the command prompt to verify if the installation was successful as shown in Fig. 1.<\/p>\n To set up the application, we will need to navigate to a path where our project will reside. For programming stuff, I am using Visual Studio Code<\/a> as my preferred IDE. You’re free to choose the IDE of your choice.<\/p>\n Let us write the different files which will be required for practical learning.<\/p>\n Navigate to the project directory and run package.json<\/em><\/span><\/p>\n To download the dependencies navigate to the directory path containing the file and use the In the root folder create a folder named index.ejs<\/em><\/span> In the root folder create a folder named index.ejs<\/em><\/span><\/p>\n In the root folder create a folder named index.ejs<\/em><\/span><\/p>\n In the root folder add the following content to the configuration file. The file will be responsible to configure the strategy using a username and password. The strategy will also require a callback that will accept the credentials and calls a passport-config.js<\/em><\/span><\/p>\n In the root folder add the following content to the index file. The file will be responsible to initialize the imports, routes, and specify the passport configuration to authenticate the requests. Remember to create a server.js<\/em><\/span><\/p>\n To run the application navigate to the project directory and enter the following command as shown in Fig. 2. If everything goes well the application will be started successfully on a port number read from the Once the application is started successfully navigate to the following url to show the login screen. You can click on the signup button for creating a new user and play around with the application after that. In this tutorial, I have also added some of the basic validations like user not found and invalid credentials.<\/p>\n Endpoint<\/em><\/span><\/p>\n That is all for this tutorial and I hope the article served you with whatever you were looking for. Happy Learning and do not forget to share!<\/p>\n In this tutorial, we learned about the passport module and how to create a simple login application with the help of passport-local dependency. You can download the source code and the postman collection from the Downloads<\/a> section.<\/p>\n This was a tutorial to implement local authentication using a passport module in a nodejs application.<\/p>\n![\"Passport](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2021\/09\/node-npm-installation-img1.jpg\")
<\/a>2. Local Authentication Using Passport in Node.js<\/h2>\n
2.1 Setting up the implementation<\/h3>\n
2.1.1 Setting up dependencies<\/h4>\n
npm init -y<\/code> to create a package.json<\/code> file. This file<\/a> holds the metadata relevant to the project and is used for managing the project dependencies, script, version, etc. Add the following code to the file wherein we will specify the required dependencies.<\/p>\n{\n \"name\": \"passport-app\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"server.js\",\n \"scripts\": {\n \"start\": \"nodemon server.js\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"bcrypt\": \"^5.0.1\",\n \"ejs\": \"^3.1.6\",\n \"express\": \"^4.17.1\",\n \"express-flash\": \"0.0.2\",\n \"express-session\": \"^1.17.2\",\n \"method-override\": \"^3.0.0\",\n \"passport\": \"^0.4.1\",\n \"passport-local\": \"^1.0.0\"\n },\n \"devDependencies\": {\n \"dotenv\": \"^10.0.0\",\n \"nodemon\": \"^2.0.12\"\n }\n}\n<\/pre>\nnpm install<\/code> command. If everything goes well the dependencies will be loaded inside the node_modules<\/code> folder and you are good to go with the further steps.<\/p>\n2.1.2 View \u2013 Creating welcome screen<\/h4>\n
views<\/code> and add the following content to the index.ejs<\/code>. This screen will be responsible to show the welcome page after successful authentication.<\/p>\n<h1>Hi <%= name %><\/h1>\n<form action=\"\/logout?_method=DELETE\" method=\"POST\">\n <button type=\"submit\">Sign Out<\/button>\n<\/form>\n<\/pre>\n
2.1.3 View \u2013 Creating login screen<\/h4>\n
views<\/code> and add the following content to the login.ejs<\/code>. This screen will be responsible for the login.<\/p>\n<h1>Login<\/h1>\n<% if (messages.error) { %> <%= messages.error %> <% } %>\n<form action=\"\/login\" method=\"POST\">\n <div>\n <label for=\"email\">Email<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required \/>\n <\/div>\n <div>\n <label for=\"password\">Password<\/label>\n <input type=\"password\" id=\"password\" name=\"password\" required \/>\n <\/div>\n <button type=\"submit\">Login<\/button>\n<\/form>\n<a href=\"\/register\">Sign up<\/a>\n<\/pre>\n2.1.4 View \u2013 Creating registration screen<\/h4>\n
views<\/code> and add the following content to the login.ejs<\/code>. This screen will be responsible for the registration of new users.<\/p>\n<h1>Register<\/h1>\n<form action=\"\/register\" method=\"POST\">\n <div>\n <label for=\"name\">Name<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required \/>\n <\/div>\n <div>\n <label for=\"email\">Email<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required \/>\n <\/div>\n <div>\n <label for=\"password\">Password<\/label>\n <input type=\"password\" id=\"password\" name=\"password\" required \/>\n <\/div>\n <button type=\"submit\">Register<\/button>\n<\/form>\n<a href=\"\/login\">Login<\/a>\n<\/pre>\n
2.1.5 Creating passport configuration<\/h4>\n
done(\u2026)<\/code> method to provide the user details.<\/p>\n\/\/ adding passport related configuration\n\nconst LocalStrategy = require(\"passport-local\").Strategy;\nconst bcrypt = require(\"bcrypt\");\n\nfunction initialize(passport, getUserByEmail, getUserById) {\n const authenticateUser = async (email, password, done) => {\n const user = getUserByEmail(email);\n if (user == null) {\n return done(null, false, { message: \"User not found\" });\n }\n\n try {\n if (await bcrypt.compare(password, user.password)) {\n return done(null, user);\n } else {\n return done(null, false, { message: \"Invalid credentials\" });\n }\n } catch (e) {\n return done(e);\n }\n };\n\n passport.use(new LocalStrategy({ usernameField: \"email\" }, authenticateUser));\n passport.serializeUser((user, done) => done(null, user.id));\n passport.deserializeUser((id, done) => {\n return done(null, getUserById(id));\n });\n}\n\nmodule.exports = initialize;\n<\/pre>\n2.1.6 Creating controller<\/h4>\n
.env<\/code> file at the same location and specify the sensitive information such as session-secret, application port number, etc.<\/p>\nif (process.env.NODE_ENV !== \"production\") {\n require(\"dotenv\").config();\n}\n\n\/\/ imports\nconst express = require(\"express\");\nconst app = express();\nconst bcrypt = require(\"bcrypt\");\nconst passport = require(\"passport\");\nconst flash = require(\"express-flash\");\nconst session = require(\"express-session\");\nconst methodOverride = require(\"method-override\");\n\n\/\/ todo - add external db support\nconst users = [];\n\n\/\/ configuring and initializing passport\nconst initializePassport = require(\".\/passport-config\");\ninitializePassport(\n passport,\n (email) => users.find((user) => user.email === email),\n (id) => users.find((user) => user.id === id)\n);\n\napp.set(\"view-engine\", \"ejs\");\napp.use(express.urlencoded({ extended: false }));\napp.use(flash());\napp.use(\n session({\n secret: process.env.SESSION_SECRET || \"8unto0n4oc7903zm\",\n resave: false,\n saveUninitialized: false,\n })\n);\napp.use(passport.initialize());\napp.use(passport.session());\napp.use(methodOverride(\"_method\"));\n\n\/\/ routes\n\n\/\/ welcome page\n\/\/ display greetings message for the user and logout button\napp.get(\"\/\", checkAuthenticated, (req, res) => {\n res.render(\"index.ejs\", { name: req.user.name });\n});\n\n\/\/ login page\napp.get(\"\/login\", checkNotAuthenticated, (req, res) => {\n res.render(\"login.ejs\");\n});\n\napp.post(\n \"\/login\",\n checkNotAuthenticated,\n passport.authenticate(\"local\", {\n successRedirect: \"\/\",\n failureRedirect: \"\/login\",\n failureFlash: true,\n })\n);\n\n\/\/ new user sign-up page\napp.get(\"\/register\", checkNotAuthenticated, (req, res) => {\n res.render(\"register.ejs\");\n});\n\napp.post(\"\/register\", checkNotAuthenticated, async (req, res) => {\n try {\n const hashedPassword = await bcrypt.hash(req.body.password, 10);\n users.push({\n id: \"_\" + Math.random().toString(36).slice(2),\n name: req.body.name,\n email: req.body.email,\n password: hashedPassword,\n });\n\n res.redirect(\"\/login\");\n } catch (e) {\n \/\/ console.log(e);\n res.redirect(\"\/redirect\");\n }\n\n \/\/ check if the user is successfully added to array\n \/\/ console.log(users);\n});\n\n\/\/ logout of the application\napp.delete(\"\/logout\", (req, res) => {\n req.logOut();\n res.redirect(\"\/login\");\n});\n\n\/\/ util methods\n\n\/\/ only authenticated user should enter index page\nfunction checkAuthenticated(req, res, next) {\n if (req.isAuthenticated()) {\n return next();\n } else {\n res.redirect(\"\/login\");\n }\n}\n\n\/\/ unauthenticated user should not enter index page\nfunction checkNotAuthenticated(req, res, next) {\n if (req.isAuthenticated()) {\n return res.redirect(\"\/\");\n }\n next();\n}\n\n\/\/ start server\nconst port = process.env.APPLICATION_PORT || 6001;\napp.listen(port, () => {\n console.log(\"Server listening at http:\/\/localhost:%s\", port);\n});\n<\/pre>\n3. Run the Application<\/h2>\n
.env<\/code> file or 6001<\/code>.<\/p>\n![\"Passport](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2021\/09\/passportlocal-run-step.jpg\")
<\/a>4. Demo<\/h2>\n
http:\/\/localhost:YOUR_PORT_NUMBER<\/pre>\n
5. Summary<\/h2>\n
<\/a>6. Download the Project<\/h2>\n