Search for a command to run...
The tricky authentication gets easy
DevRel 🥑 at Storyblok. I am a full stack developer with knowledge and experience in several front-end techs like Angular, React, Vue along with backend techs like Node, Flask, FastAPI, etc.
Where are you from sir... If you have time ... Than teach me coding
Every time I decide to be consistent about content creation, I get (or make) opportunities to travel, explore, and network. It could be procrastination or a matter of priorities but if you are a devrel or wanna be a devrel, you already know how much ...
You must have seen the progress of Tesla and SpaceX in the past few years. We all have seen both of the companies going through ups and downs but what I found more interesting is the way Elon Musk decided to be open about both of the products with th...
Well, the purpose of this blog post is to share what I was up to for the past few months but before we dive into that, let me refresh your memory a little. A few months ago, I took it upon myself to use Javascript in every place I could and I am stil...
Tailwind is an amazing CSS framework and is growing at a rapid pace. Here are some UI kits to help you make great designs. 1 - Tail-Kit Contains a lot of ready-to-use components with some templates! It's open-source! Link - Tail-kit 2 - Wicked ...
Recently a lot of people got access to Github Copilot, I was one of those who got it. I was on the waiting list for a very long time, and trust me I was dying to use it after all the good stuff already heard. Github Copilot is an AI pair programmer d...
There is always a need for Authentication when building an application. And if you're a developer, you know how painful the authentication part can get. It takes a significant amount of effort to build this part if you're starting from scratch. Also, it is a little difficult to understand how it works at once. I still struggle every time I try to implement it.
Let's look at a way of implementing an access token and refresh token system using JWT.
JWT stands for JSON web token, and it consists of three main parts. A header, payload, and a signature. For a valid one, we need these three parts to be present in it. Usually, these tokens are created by using a library, be it for javascript or python.
Generally, during the creating of one token, we need to specify three things - The payload, a secret key, and the algorithm to create the token. The payload is the data we need in the token. There are a few general keys like 'sub', 'iat' (issued at), etc but it can be customized.
We need to specify the algorithm because there can be multiple of those, which can be used for the creation. The important thing is the secret key. Anyone can create a token with the same payload and algorithm. So to verify that it is created by our server, we need the key.
Now, let's see how the access token and refresh token works. So, once the user login we create a jwt as discussed above which works as an access token. It contains the user information in the payload. We send this to the front-end and store the access token there.
It can either be stored in localStorage or your store (redux, vuex or whatever). Now we send this token along with the requests to the backend, and for every secured route (the one which we need the user to be logged in) on our backend, we check this access token on our backend.
We check the expiry for that token on the frontend itself before sending the request to the backend. It can be set by us while creating. This part can be customized. This is generally intercepting your own request and checking. The access token is also added to the request in this step.
Now, for checking this access token on the backend, as mentioned before we decode it with the help of our secret key. Now if everything goes well, we allow that request. If it doesn't that means the token has been tampered with. We throw the user out in this case.
A refresh token is also created during the login, but we don't usually create a jwt for that. You can create it by any library or even use a simple uuid to create a unique token string. We store this along with the expiry of the refresh token in our database along with the user.
This refresh token is also sent to the frontend and usually store as a cookie, so it is by default sent to the backend with the requests. If the access token is expired (during the interception), we use this refresh token and validate with what is stored in our database.
We send the request to a refresh route created by us to check if it is a user's refresh token and not expired. If it is not expired we generate a new access token for that user as we did during the login and the process is the same again. If it is expired, we log the user out.
So, most of the time we are using the access token to verify if the user is authenticated. But if the access token is expired, we use our refresh token to create a new access token. There can be multiple approaches to this according to the need and comfort.
If you have any questions or suggestions, please leave a comment below or feel free to reach out.