Hey there! 👋

Hope you guys are having a good day 🌞.

This article is more focused on how user credentials on a website are generated, stored, secured, and authenticated. 🔐 We'll cover it all and will see how to implement bcrypt practically so that you can too follow this approach. 🦸‍♂️

Be it Instagram, Facebook, Twitter, Github, or any other platform that requires users to signing using a password. Did you ever wonder how you are authenticated? and how your passwords are stored?

Let's first understand what authentication is? 🛡

Let's imagine that you went to a concert 🎉, their entry was based on tickets. Your ticket has an ID, date, and stamp. And only if those ID, date, and stamp are valid, then you will be granted entry. ✅

Similar is with websites when you sign in successfully, a unique encrypted token is generated 🔑 which contains some identification information of the user such as - username or email.

Now, this token will grant you access across the website's secured pages. 📄 One of the most commonly used tokens is JSON Web Tokens

This is how it looks like when encoded

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Decoded: (payload)

{
"sub": "1234567890",
"name": "John Doe",
"iat": 1516239022
}

This is pretty much how authentication works. ☑

How your passwords are stored?

No, they're not directly stored in the database. ❌

It is first encrypted into a hash using various hashing methods, one of the most popularly used methods is bcrypt. ✔

Whenever a user attempts to log in the entered password is hashed using the same hashing algorithm and is compared with the currently stored hashed-password in the database.

Let's say the company had a bad day and their database gets breached by hackers. In this situation at least the user's original credentials are still protected and non-disclosed.🤫 Which prevents the worst case to happen. Therefore, it's always advisable to don't store plain text passwords in the database. Instead, store it in as an encrypted or hashed form.

A practical usage of bcrypt in javascript

Setting up bcrypt (javascript)

const bcrypt = require('bcrypt');
const saltRounds = 10;
const myCorrectPlaintextPassword = 's0/\/\P4$$w0rD';
const notCorrectPlaintextPassword = 'this_is_incorrect_password';

Hashing passwords, here we are generating a salt and then using that salt to hash the password

const salt = bcrypt.genSaltSync(saltRounds);
const hash = bcrypt.hashSync(myCorrectPlaintextPassword, salt);
// Store hash in your password DB.

Checking password when a user attempts to log in.

// Load hash from your password DB.
bcrypt.compare(myCorrectPlaintextPassword, hash).then(function(result) {
 // result == true
 // access granted
});
bcrypt.compare(notCorrectPlaintextPassword, hash).then(function(result) {
 // result == false
 // access denied
});

That's all! Setting up authentication using bcrypt was that simple! 🥳🎉

Feel free to reach me on Twitter @amaancodes for any query. Happy to help 😄🤝

Lastly, don't forget to drop your views about this article in the comments! 💭 See ya!

How to keep your web app users passwords safe and getting started with authentication in bcrypt

Comments

More from this blog

Guide to stand out as a Front-end Web developer seeking their first job!

5 sure shot ways to optimize your react app's performance following the best practices.

Making a simple TODO single page web app using VueJS.

Why Fullstack Serverless will be the next big trend and why you should know about it?

Complete backend and database under 15 minutes for any application! (React / Angular / Vue) AWS Amplify Admin UI 🔥 - Getting started

Hey there! 👋

Let's first understand what authentication is? 🛡

How your passwords are stored?

A practical usage of bcrypt in javascript

Command Palette

Comments

More from this blog

Hey there! 👋

Let's first understand what authentication is? 🛡

How your passwords are stored?

A practical usage of bcrypt in javascript