Learn how to add login and sign-up functionality to your website, with any framework in 7 simple steps.
Here’s what you’ll need:
- GET and POST requests
- form interaction
- password hashing and salting
- database integration
- sessions
If you know what you’re doing, and your selected framework has a few libraries for these things, the process should be fairly easy. Here’s how the app will look in a flowchart:
1. Set up the basic routes and forms
You’ll need at least these 2 routes:
- /login (GET and POST)
- /register (GET and POST)
Of course, the naming of the routes doesn’t matter, but this is how I will refer to them in this tutorial.
Now, let’s setup the forms. This is how your /login form might look in HTML:
<form action="/login" method="POST"><input autocomplete="off" name="username" placeholder="Username"/><input autocomplete="off" name="password" placeholder="Password" type="password"/><input value="Login" type="submit" /></form>
The most important things here are the form’s action and method, and the actual inputs. You should already know what this does, if you don’t, I recommend learning some HTML or a front-end framework of your choice.
Your /register form should look similar, except /login should be replaced with /register and you might want to get the user’s email, or confirm his password. To do this, you’d need to add 2 input fields.
After the basic templating is done, move on to step 2.
2. Use form interaction to get your user’s inputs
Usually, this is very simple.
In most frameworks, if you’re using HTML you’ll need to add a name property to a form input. In the framework, you’ll need to do something along the lines of: var x = req.body.x; where x is the name property you set in your HTML file earlier.
After you’ve got the user’s inputs, go on to step 3.
3. Hash and salt the password from user input
Once you’ve got the user’s input for the password, the next step would be to hash and salt it. Why should I do it? To put it simply, it’s way more secure. This article explains it in more detail.
If you’re using a language, which has the bcrypt module, use it. Here’s the Python library, and here’s the Node.js one. If such an option is not available, look into other hashing modules for your chosen language. This article should explain what hashing algorithm you should choose.
Here’s how a hashing function might look in Node.js, with the bcrypt module:
const hash = bcrypt.hashSync(myPlaintextPassword, saltRounds);// Store hash in your password DB.
After you’re done hashing and salting the user input, move on to step 4.
4. Insert the hash and other user info into a database of your choice
Of course, the first step is to find a database driver for your preferred database and framework. After you’ve done setting that up, you’ll need to create a table (or the equivalent of that). The info you store might differ, but here’s what you’ll definitely need:
- id
- username
- hash
Of course, you can add other things like an email, an account creation date, etc.
After you’re done doing this, craft a statement which will insert the hash and other user data into the database. If you’re using SQL, the actual statement would look something like this: INSERT INTO users (username, email, hash) VALUES (?, ?, ?) (I’m using AUTOINCREMENT on my id's so I don’t have to insert them manually)
Now, the basic sign-up functionality is done, you can go to step 5 if you want the user to be logged in after signing up, if not, skip it.
5. Insert the user’s id into the session
The first step is to get the user’s id. If you generated it application-side, it should be very easy, if you generated it in the database, you can use the user input for username you already have to select the id from the database. A SQL statement for this would look something like this: SELECT id FROM users WHERE username=?
After you’ve gotten the id, pick some sort of library for sessions. This should be easy for most frameworks. Now, insert the user’s id you selected earlier to a session variable, call it user_id or something along those lines. This will allow the user to stay logged in across different routes.
Now, let’s move on to /login and with that, to step 6.
6. Check the user’s input against the hash in the database (login)
Firstly, get the user’s input as shown in step 2. After you’re done doing that, select the hash from the database via your database driver. A SQL statement for this would look something like: SELECT hash FROM users WHERE username=? After you have selected it, check the user’s input against the hash. In Node.js, it can be done like this if you’re using the bcrypt module:
const match = bcrypt.compareSync(userInput, hashFromDb);
if (match) doSomething();The syntax for your framework might vary, but the basic syntax should be similar.
If the user’s input checks correctly against the hash, move on to step 7, if not redirect him to an error page or give him an alert.
7. Set the user’s id in the session
This should be fairly simple, just look at step 5.
Congratulations!
You now have working login and sign-up functionality on your website! Of course, you can add more features, like a profile page, or the ability to change your username/password.
If you want to see some examples on how this would look in code, you can look at my GitHub repos: flask_login_register and nodejs_login_register.
