The user authentication is one of the most important tasks, we need to use authentication in most of our project. Passport is a robust piece of Node.js authentication middleware that helps us to authenticate and access control our Express apps. The Passport middleware allows developers
to offer various authentication methods using a mechanism called strategies, which allows you to
implement a complex authentication layer while keeping your code clean and simple.
The Passport middleware or passport.js allow us to define different strategy. Passport uses strategies to utilize both local authentication and OAuth authentication providers, such as Facebook, Twitter, and Google. Using Passport strategies,
you’ll be able to seamlessly offer different authentication options to your users while maintaining a
unified User model.
What are we learning?
- Integrating passport Js in our apps.
- Using both local and OAuth authentication strategy.
- Understand the serialization to maintains the session.
- Integrating Password the Bcrypt
USING PASSPORT’S LOCAL STRATEGY
First, we will learn the passport-local strategy and will learn OAuth authentication later.
Step 1: Installing our project, as we have a lot of dependencies and is better to type all dependency once in the package.JSON and install all together.
npm init Type all the dependency directly in the package.JSON and use npm install. Add the following code in package.JSON and add the line number 8 code also.
Step 2: We will create login register functionality first, we will make the user interface through bootstrap later. Inside the views/register.handlebars add the following code for login, registration form. When we fail to login successful, then express validator will display an error message and on successful login, we will display success message at the console.
Step 3: We have to add code for routes to /register of registration and apply the express validator in routes/index.js as
Step 4: Creating user model, in root folder add models/user.js and add the following code in user.js, Here we are exporting new model name called User and we are adding hash or encryption of Bcrypt to our password with the salt of 10 characters.
Step 5: In the index.js in routes, we will adding two new code
1. Add let User = require(‘../models/user’); at line number 3 of routes/index.js
2. Replace the code of console.log(success) of route.post(‘/register’, to new code for the creating new user, add route code for login page and once the successful new user is created then we will redirect to /login page.
Step 5: Inside the views, folder adds a new file login.handlebars with code LOGIN for testing only, when successful adding of new user will redirect to login page. Add new user test as a new user on localhost:3000/register. Check local MongoDB database for a new user as we didn’t create any mongo database, it will create automatically. Check local MongoDB database for a new user as we didn’t create any mongo database, it will create automatically. Check in local mongo shell >show dbs , > use passportapp >> show collection >> db.users.find().pretty()
We can see new user information on the local database.
Replace with new code as
Step 6: We will add the code for express messages middleware in views/layouts/main.handlerbars to display any message like when login didn’t work. As we have two type of errors message, one with highlight is from express messages middleware and other without the highlighted is the from the express validator for form.
Step 7: Inside the routes/index.js we will replace the code of process register for a new user to the new code and all other code are same.
Step 8: We are able to create a new user or register for new user from above step, now we are adding login form and applying the local strategy. Add the following code for login in views/login.handlebars
In views/register.handlebars we replace all one code from
We have to add code for the login post and local strategy, inside routes/index.js. We will add the following code at two place
- At the top of routes/index.js
- at the end or before module.exports = router;
Here we are defining what we will redirect if successful/ unsuccessful login, here in our case we will redirect to a home page on successful user login. On the above code of highlight, we have to define the corresponding function in our model user.
Now we will define login functionality, we will define the highlight function at the end in the models/user.js.
In app.js we have to add two line of code for password middleware and at below the express session middleware in app.js.
We will define the flash message as a global variable in app.js to displaying the message of login success or fail in views/layouts/main.handlerbar. Append the highlighted code on express message in app.js
In the views/layout/main.handlebars append highlight code on existing code.
Note: Successful login will take you to root or home page.
Step 9: We have to add logout code and access control on login. First, we will add logout code in routes/index.js after Register form code.
Test log out in URL, the first login with validate user login and then type localhost:3000/logout will redirect to the login page with the message as below.
Now we will apply the access control on login, as for above code till now we can access the home page directly without login. We can control the access as two step
- Add the following code at the end of routes/index.js
2. Apply the access control on the dashboard or home page. Edit the code of home in routes/index.js
To new code as
We will get message while access the dashboard or home page as
Step 10: Now we will apply the user interface through bootstrap, as
We will add the nav bar code from bootstrap example theme, and bootstrap theme link from bootswatch.com Flatly theme copy it URL and the past in views/layouts/main.handlebars
Apply the div container class on error message as in highlight code above. As we can easily access the user variable anywhere, which defines global in app.js add the following code in views/index.handlerbars or dashboard as
Last, apply the bootstrap class in views/login.handlebars and register.handlebars. First, we will apply bootstrap class on login view as
and also apply to register view as