DEV Community

Shreelaxmi Hegde
Shreelaxmi Hegde

Posted on

Auth Series #2: Authentication Implementation Setup

#authseries #javascript #express #authentication

We have covered the basic understanding of Authentication and Authorization in the Auth Series #1: Understanding Authentication and Authorization. Now, implement the basic setup to build Authentication system in Express.js.

2.1 SignUp Form
Our first step in building authentication is to register a new user into our database so that the platform can provide them with their own personalized space.

Let’s start with a basic signup form 👇

<form action="/signup" method="POST">
    <div>    <!-- username -->
        <label for="username">Username : </label>
        <input type="text" name="username" id="username" required>
    </div>

    <div>    <!-- email -->
        <label for="email">Email : </label>
        <input type="email" name="email" id="email" required>
    </div>

     <div>   <!-- password -->
        <label for="password">Password : </label>
        <input type="password" name="password" id="password" required>
    </div>

    <button>SignUp</button>
</form>
Enter fullscreen mode Exit fullscreen mode

*Its a simple HTML form. You can always add your own styling later.

Behind the scenes of the Form :
⤷ User enters their credentials(username, email, password).
⤷ Clicks the "signUp" button.
⤷ The browser sends a POST request to the /signup route.

2.2 Securing User Data Before Storing 🔐
Once we receive the user’s information from the signup form, the next step is to store it securely in the database (MongoDB).
But since passwords are sensitive data, we should never store them in plain text.

In real-world applications, developers add 2 extra layers of protection before saving user credentials:
▹ Salting
▹ Hashing

The workflow looks like this 👇

Sensitive data → Salting → Hashing → Store in database
Enter fullscreen mode Exit fullscreen mode

📌 What is Salting?
Salting adds the first layer of security to your user’s password.
It involves adding a unique, secret String called a salt to the password before hashing it.
This salt is stored securely by the server and ensures that even two users with the same password will have different hashed outputs.

Example:
Password: abc123
Salt: x9@#p!
Combined: abc123x9@#p!
Enter fullscreen mode Exit fullscreen mode

📌 What is Hashing?
Hashing is a one-way encryption process that converts readable data into a scrambled form using a mathematical algorithm.

Example:
data = 'abc'
hashed = 'lajhfld#k2432blk34w3&alsjd'
Enter fullscreen mode Exit fullscreen mode

It’s impossible to reverse a hash and retrieve the original password which is what makes it secure.

📌 Why Both Salting and Hashing?
Some users choose weak passwords like 1234 or password.
If a hacker guesses or obtains the hashing algorithm, those weak passwords become easy targets.

By adding a salt before hashing, you make the final encrypted output unique and unpredictable.

So the final process looks like this:

Server receives password
→ Adds salt  
→ Hashes the combined string  
→ Stores the hashed result in the database
Enter fullscreen mode Exit fullscreen mode

Now some questions arise

How do we implement this system in Express.js?
How to write the Hashing algorithm?
How long our salt should be?
etc. etc.

Lets discuss about them in the Next Part : Auth Series #3: Authentication implementation using Passport.js

Top comments (0)