Just curious how JWT works. Lets do it from scratch.
-
So the JWT in this project works like this:
- When user logs in or register a new account, create a new object named (let's name it token). We pass whatever value into the token (E.g: userID), then encode it with some secret-key/public-key that is stored in
.env
file. Also pass in other properties such as validity period for the token. The token will be stored in the browser cookie. - Then, create a middleware which will protect the route. Every time the protected route got hit, we execute a function to decode the token with the same secret-key/public-key.
- Query the userID from the decoded token. If found, then user is authorized.
- If user not found or token expired, throw an error.
- Token will be deleted from browser cookie once user logs out.
- When user logs in or register a new account, create a new object named (let's name it token). We pass whatever value into the token (E.g: userID), then encode it with some secret-key/public-key that is stored in
-
JWT is a good way of tracking the currently authenticated user since the token is persisted in user's browser. Hence, a hacker need to have physical access to the user's laptop to actually get the token.
-
I think JWT is the go to standard when doing authentication. I guess 2FA and services like Clerk also implements JWT under the hood.
-
It is certainly better then storing list of currently logged in users in database LOL.
- I installed
react-bootstrap
hoping to be able to code the UI faster. Unfortunately it slows me down since I need to learn how to use those bootstrap components. And the UI looks so bootstrapy makes we wanna puke ๐คฎ. So I decided to replace it with Tailwind CSS so I can just write CSS classes and don't need to care about UI components. - But then I have an idea to speed things up faster. I'll just generate the UI using Vercel's v0, so I can just copy paste beautiful codes. Oh wait, the generated codes contains UI components from shadcn/ui. I recall it was so hyped on social media a few months ago. Let's install it and give it a try.
- I got stuck after installing a shadUi component. So my vite configuration uses
./
relative path for the imports. However shadUI uses@/
alias. The@/components
works but the@lib/utils
doesn't. Tried to tinker around withvite.config.ts
andtsconfig.josn
but I'm unable to resolve the issue. Current workaround is to just import from../../lib/utils
instead. Not pretty, but I don't want to waste time on this. - Last time I mentioned that I just wanted to write CSS class and don't want to waste time learning the UI components. Unfortunately shadUi is full of those components. So I still need install each of the components seperately and learn to use it. I'm really contradicting myself right now LOL. It still uses tailwind classes for the styling tho.
- Last time I work with redux in my previous company, it was already setup and I just need to import the part that I wanted to use. Time time I'm setting it up from scratch and it indeed have bunch of boilerplates that I don't really know what it does. "I was today years old" when I finally experience the struggle of redux.
- My Typescript Intellisense can't infer the data type for the attributes in the redux's slices. I'll just cast it to type
any
. Maybe will figure out the types later on. Let's focus on making things work. - So when we set jwt's
httpOnly
totrue
, the cookie will be automagically passed on every request. So we don't need get it from localStorage and set up bearer token stuff. Pretty cool.
Tutorial: MERN Crash Course | JWT Authentication, Redux Toolkit, Deployment & More"