If you followed along with the last blog, you saw how to make a full start login form with NodeJS, Express, MySQL, and ReactJS. That method is a good starting point, but if you’re trying to make a more secure web portal you will need a lot more.
This blog will go over how to encrypt each password using the bcrypt npm package and we’ll also clean up the app to make sure everything is order before we start adding the final parts to the login.
To recap, before we get into this new section, we created a form in react that allows you to create and login into accounts. Right now, this form does not reset when you click submit button. We will tackle that in this article.
I added some simple styles to the form to make it more presentable, so feel free to add your own if you like.
On the backend, we have set up an express server and connected to MySQL database. Currently, you can create an account and it will persist in the database and login. When you login it will post the name of the user at the bottom of the form.
Encrypting passwords…
Password encryption is by far one of the most important computer science elements to understand.
What we did in the last blog was good for a proof of concept, but if we were to actually use this app online it would be extremely vulnerable to attackers. A good rule of thumb is “never store plain text.”
Encryption is better solution, but encryption is also problematic. What I mean is if you can encrypt something, you can decrypt it with the right key. Once the key is found you can decrypt entire databases.
So, what’s left?
Hashing passwords with a hashing function is the answer. What this means is that when you fill out your form and submit the data the password input is ran through a hashing function and a long string of text comes out that looks something like this…
What’s above is only part of the hash, but still you get the point. This is better because you can’t decrypt this and it leaves an attacker to only being able to try and guess a password. This is why it’s so important to make your passwords complicated and nonsensical.
Choosing a Hashing Algorithm
Now that you’ve hopefully seen the light on why hashing is the best way to store password data in database, let me tell you the bad and the remedy.
When choosing a hashing algorithm, you want to choose one that is very slow. If you stay in the range of 2–4 seconds, you will dramatically improve your ability to beat attackers.
This is because attackers that are trying a brute force attack, or trying to guess a password, are using programs that can simulate passwords being entered and if you are trying to crack an algorithm that takes 2–4 seconds a few million times then the time it will take won’t be worth it to the attacker.
BCrypt is a great option because it is very slow.
Rainbow Tables
To speed up the process of cracking passwords, attackers use Rainbow Tables. These are precomputed tables that cache the output of the hash function and can be used for deriving keys.
You can read more about them on the Wikipedia page.
Salts
There is another reason why I’m using BCrypt for this project, which is the addition of salts. Salts are a way to defend against attacks that try to derive keys.
When you look that code below, you’ll see how BCrypt take the user input + salt and then inputs that information into the hashing function.
What this does is it gives each password different hashes even if they are the same password.
When BCrypt makes a hash it is completely random, but based on the input. By adding the salt, or a randomly generated string and concatenates it to the input it makes it unique and vastly different from the other passwords that are technically the same.
How to hash passwords with BCrypt
You will see that adding BCrypt is very simple and only a few steps, so I would encourage you to do this every time you make a login.
First, you have to install the dependency.
npm install bcrypt
Then, require bcrypt and create a variable for the salts and set it to 10. This number 10 is a number that varies the amount of time it takes to login. What you’re trying to achieve is a balance of making the algorithm more secure by slowing it down and not upsetting your users with slow speeds. I’ve seen anything from 10–12 is good, but for this tutorial let’s use ten.
Now, we have to update the register function by adding the hash…
Now, when you hit create account, you will get a hash in your password column instead of the plain text.
This is what you do for the login section…
There is so much say about hashing functions, and it’s way too much for the scale of this blog and tutorial. Continue on with your own research and on each of the topics in here and if you feel good about it. Create your own hashing function and see how it does.