This weekend I wanted to play with tailwindcss and what better way to do it then with a project. My project was going to be simple : write a tutorial on authentication in nodejs apps. And I did complete the project, but I struggled to make it easy as possible to follow. I wrote this just so I could break down the next few entries. I ended up using a few packages that I absolutely couldn’t go without and that added to the scope. I also spent lots of time on research and seeing what is out there :
I figured that a good post prior to me re-doing the project would be to talk about thinking of authentication. I will be breaking down the project into smaller parts. I figured in this post, I will outline what I am thinking about.
First thing that I did when beginning the project was go to OWASP and remind myself of the common pitfalls in authentication, and password storage. After all, if I am putting a tutorial out there I want it to be somewhat secure.
Links used in background refresher:
I knew that I wanted to store the information in a database. I did not want to rely on a third party service. So, for data processing and database communication I opted for sequilize package. Sequilize is great in that you can switch databases and maintain data integrity because you describe all of your data in code in one place.
For this tutorial, I wanted to store username, email, and password. I did not want to store the password as plaintext for this tutorial even though I was trying to keep the tutorial simple. My goto solution for password encryption is usually the bcrypt algorithm. So, for this project, naturally, I decided to use the bcrypt package.
I couldn’t decide if I wanted to teach about jwt tokens or session cookies. Afterall, nowadays you need to be comfortable in both. So, I opted out for storing jwt token in the cookies. Using cookies is usually my default go-to because the technology is proven, safe, and reliable. Cookies have been here since the beginning on web apps.
However, as I proceeded through my project, I realized that this went beyond the scope of my initial tutorial. This added a level of authorization to our authentication tutorial. I finished this authorization not realizing that I will have to backtrack in my actual write up and create several tutorials out of it.
How to connect Sequilize to ExpressJS app
This tutorial will talk about the setup of sequilize and a simple model of our user that will be used in follow up tutorials. The user will contain username, password, and email attributes. Maybe… I will add token attribute and confirmation_token attributes for confirmation steps. Haven’t fully decided on this.
How to add authentication to ExpressJS app with Sequilize
For the sake of my tutorial authentication will be split into : user sign up, user login, and user password reset. I will have to mention about bcrypt.
How to add authorization to ExpressJS app with Sequilize
For this tutorial I will be mentioning the usage of jwt and session cookies. These details kind of depend on the clients that will be using our API and whether or not we have an API. I used both to show the different ways of implementing authorization. Personally I prefer cookies as they have been battle tested in various environments, but sometimes for things like mobile apps, you need to use something like jwt. I simply saved my generated jwt token in our cookies so that we can play with both :)
Here is what it looked like when finished :
I am not sure if I will have this UI for the written up tutorials or if I will come up with something else.
PS: When most people think of authentication they actually are referring to authorization. So… you may have to explain this to your client. It is a good idea to have a walk through of the components that you need to build. You can create deliverables out of them.
The example above shows the authorization and authentication of a simple user profile using jwt and cookies. The information is stored in a sqlite3 database in the local directory and is using sequilize driver for data access. The ui is build using tailwindcss (I have a tutorial on that tailwindcss which you can visit here). With the help of jwt our software is also ready to create an api for mobile or desktop clients if there was ever a need.
I was not tracking my time on this but it says I used about 3 hours this weekend in VS Code. Which includes writing in VS Code as well. So maybe divide in half? About 1 hour or 1.5 hours on this code for sure I would think.
links that I may or may not have used (ie tabs open at the time of writing this article):