Passport.js, a Security Solution for Small Startups and Large Enterprises Alike
Tags: security, webdev, programming, tutorial
Published: 2024-02-07 18:39:33

By [Brian Segura](https://www.linkedin.com/in/brian-segura-015/)

### I’m hoping that my first issue in open source will help you solve some of yours.

Some of you might be wondering “What is Passport.js?” and “How can it solve our software security concerns?” Others might be wondering why our software even needs to be secure in the first place.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz2jksnbi5okkm4ykps3.png)


Well for starters, cyber crime has cost companies around the world billions of dollars in direct financial losses, business disruptions, reputational damage and more. Without having the right measures in place, we can leave our users and our company’s sensitive data exposed to malicious threats that could gain access to our applications (even from the inside of a company).

The name of our startup app is Amplify by ProgramEquity. It enables individuals across the nation to come together to find social justice causes that they can support. It reduces the friction of getting in contact with politicians to help said cause.

I chose the daunting task of providing security around our new control panel feature. We needed a way in which an `admin` user could authenticate themselves in order to view their campaigns, edit critical information, and have more insights to behind-the-scenes info when compared to a normal volunteer or constituent who shouldn't have those capabilities.

There are many frameworks and libraries to choose from when it comes to authentication and authorization like Oauth2orize, Auth0, Feathers, Keycloak, and Passport.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyuujakti7r5ely38p6o.png)


For our app, we chose to go with Passport.js. Passport is known for its simplicity, its ability to be extremely modular, and it has many different authentication strategies. Many mainstream apps you use allow you to sign in with Google, Facebook, Twitter, or just your email. These are some of the many authentication strategies available through Passport.js.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iivkdi717rayo80y23lm.png)


For this version of our app, we went with Passport’s LocalStrategy for handling local authentication via username and password. Which means that you can locally create an account and log in by providing just your username and password.

Implementing Passport.js with local strategy and integrating it into our project involved a lot of moving parts. Let's delve into a high-level overview of some of these key components.

## Create User Authentication Routes
- Create routes in your application to handle user authentication tasks, such as logging in and signing up.
- These routes usually include endpoints like /login, /signup, /logout, etc.
- In the route handlers, you’ll receive user credentials (in our case, email/password) from the request body and pass them to Passport.js for authentication.

## Mock User Model
- Create a user model or use an existing one to represent the user data in your application.
- This model should include fields such as username, email, hashed password, etc.
- Ensure that the user model provides methods for interacting with your database to perform CRUD operations like creation, retrieval, updating, etc.

## Hashing and Verifying Passwords
- Before storing passwords to your database, always hash them using a secure hashing algorithm like Bcrypt.
- When a user signs up or updates their password, hash the password before storing it in the database.
- During login, hash the password provided by the user and compare it with the hashed stored in the database.

## Managing Passport’s Session Middleware
- Configure Passport.js to use sessions for managing authentication state across requests and improve user experience.
- Use session middleware like express-session to handle session management in your Express app.
- Initialize Passport.js and configure it to use the session middleware.

## Implementing Middleware Protection
- Define middleware functions to protect routes that require authentication.
- Use Passport.js middleware to authenticate requests using the local strategy before allowing access to protected routes.
- If authentication fails, redirect the user to the login page or return an error response.

Before this experience with ProgramEquity and their open-source community, I only had minimal exposure to Passport.js. However, with this time around, I had to really get in the weeds, figure out how it all tied together and take a deep dive into the documentation to provide our team a way forward in terms of securing our app. I’m happy that I have had the exposure of how authentication/authorization is important for all apps of all sizes, from small personal side projects to large enterprise applications.

In conclusion, thanks to the help of a fellow contributor and the guidance of a mentor who I now can call a friend, I was able to find out what we needed and how to implement it into our codebase. This was also my first time contributing to open source and my first time diving into a live codebase. I encourage anyone on the fence about diving into an open-source project to take the plunge. It’s been an amazing learning experience and I’ve met incredible people along the way. Remember that as cliche as it sounds, the magic always happens outside of our comfort zone. Happy coding, everyone!

**P.S here’s a resource!**
I saw this incredibly informative video that explains how Passport works in great detail which dramatically increased my understanding of what I was doing. As usual, freeCodeCamp comes in clutch with the 🔥content, check it out here:
[User Authentication in Web Apps (Passport.js, Node, Express)](https://www.youtube.com/watch?v=F-sFp_AvHc8&t=7125s)