Ryan's Memory Lane

Notes from the journey — tech, tools, and lessons learned

Learning How JSON Web Tokens Work

This week I started learning about how authentication works in web apps, and I came across something called JSON Web Tokens (or JWTs). I found a good diagram and worked through a few examples, it actually started to make sense.

JWT Diagram

A JSON Web Token is basically a compact way to securely share information between a client (like your browser) and a server. After a user logs in successfully, the server creates this token with some data inside (like the user ID) and signs it with a secret. The browser stores this token, and then includes it with every future request. That way, the server knows who the user is without needing to look them up every time.

JWTs are split into three parts: the header, the payload (which has the actual data), and the signature (used to make sure the token hasn’t been changed). You can actually paste a JWT into jwt.io and see what’s inside.

In my practice project, I built a small login simulation using Node.js that issues a fake JWT and stores it in localStorage. I’m still learning about the security risks (like XSS and token expiration), but this was a good first attempt in understanding how stateless authentication works.

I’ll definitely need to revisit this concept when I get deeper into building secure full-stack apps, but for now, I’m glad I took the time to explore it. Learning how JWTs fit into the bigger picture of login flows and protected routes helped me understand more of what’s really happening behind the scenes.