How I Built JWT + OAuth Authentication and Password Security with Bcrypt in My…
Authentication is one of the most important parts of any modern web application.
Spots 
While building my MERN Stack E-Commerce application, I
While building my MERN Stack E-Commerce application, I wanted users to be able to securely create accounts, log in with their email and password, and also authenticate using Google. For this project, I implemented: Google OAuth authentication Role-based access control Secure authentication flows between React and Node.js/Express**
In this article, I'll explain the concepts behind
In this article, I'll explain the concepts behind these technologies and how I used them together in my e-commerce application. JWT stands for JSON Web Token. JWT is a compact way of securely transferring information between two parties. In a web application, JWTs are commonly used to implement stateless authentication. The basic flow looks like this:
User ↓ Login ↓ Server verifies credentials ↓
User ↓ Login ↓ Server verifies credentials ↓ Server generates JWT ↓ JWT sent to client ↓ Client sends JWT with protected requests ↓ Server verifies JWT ↓ Access granted What does a JWT look like? A JWT usually looks something like: It consists of three parts: Header.Payload.Signature Header The header contains information about the token, such as the signing algorithm. The payload contains claims about the user. The signature allows the server to verify that the token hasn't been modified. The important thing to remember is that a JWT is signed, not encrypted by default. Therefore, sensitive information such as passwords should never be placed inside the JWT payload. 2. How I Used JWT Authentication After a user successfully logs in, my backend generates a JWT.
For example, using Node.js and the jsonwebtoken package
For example, using Node.js and the jsonwebtoken package: import jwt from "jsonwebtoken"; The secret is stored in an environment variable rather than directly inside the source code: JWT_SECRET=your_secret_key The client can then use the token when making authenticated requests. On the server, middleware can verify the token before allowing access to protected routes. const decoded = jwt.verify(token, process.env.JWT_SECRET); After verification, the application knows which user is making the request. OAuth stands for Open Authorization.
It is an authorization framework that allows an
It is an authorization framework that allows an application to obtain limited access to resources or identity information without requiring the user to give the application their password. You may have seen buttons such as: Instead of creating another password, the user can authenticate through Google. This is where OAuth-based authentication becomes useful. 4. OAuth vs Traditional Authentication With traditional email/password authentication: User ↓ Email + Password ↓ Our Application ↓ Verify Password ↓ Login
User ↓ Click "Continue with Google" ↓ Google
User ↓ Click "Continue with Google" ↓ Google ↓ User grants permission ↓ Google redirects back to our application ↓ Application receives authenticated user information ↓ User is logged in The important advantage is that my application doesn't need to ask the user for their Google password. 5. Implementing Google OAuth For my MERN application, I used Passport.js with Google's OAuth strategy. The basic idea is to configure a Google strategy: The credentials are stored in environment variables: GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret
When a user chooses Google login, Google handles
When a user chooses Google login, Google handles the authentication process and redirects the user back to the application. My backend can then find an existing user or create a new account. Before implementing password authentication, there is another important concept to understand: Hashing converts data into a fixed-length string using a mathematical function. MyPassword123 ↓ Hashing ↓ $2b$10$... Unlike encryption, hashing is designed to be one-way. That means we shouldn't be able to simply take a password hash and turn it back into the original password. This is extremely important for password storage. 7. Why Shouldn't We Store Passwords Directly? Imagine a database containing: email: [email protected] password: MyPassword123 If an attacker gains access to the database, they can immediately see the user's password. This is why applications should never store plaintext passwords.
Instead, we store something like: *email: [email protected] password
Instead, we store something like: *email: [email protected] password: $2b$10$K8J7... * The database contains the hash rather than the original password. 8. How Bcrypt Helps Secure Passwords For my application, I used Bcrypt to hash passwords.
Bcrypt is specifically designed for password hashing and
Bcrypt is specifically designed for password hashing and includes a configurable cost factor that makes password cracking more computationally expensive. 9. Hashing a Password with Bcrypt When a user registers, I don't store their password directly. is the salt-rounds/cost parameter. The resulting hash can then be stored in MongoDB. The database stores the hash instead of: A salt is random data added during password hashing. Bcrypt automatically generates and incorporates a salt into the resulting hash. Password + Random Salt ↓ Bcrypt ↓ Password Hash This helps prevent attackers from efficiently using precomputed hash tables against many users with the same password.
News
How I Built JWT + OAuth Authentication and Password Security with Bcrypt in My MERN E-Commerce App
Authentication is one of the most important parts of any modern web application.
@spots #dev
Source: Dev.to