DEV Community

David Bilson
David Bilson

Posted on

🔐 WTF is JWT? And Why Your Frontend Should Care

#webdev #jwt #frontend #backenddevelopment

This flew over my head since 2022 — you and every dev before their JWT awakening.

You're not alone if you've ever felt confused about JWTs (JSON Web Tokens). But today, let’s break it down in plain English, with enough sauce to make it stick.

🚀 What the Heck is JWT?

JWT = a secure way to send user data from server → client.
But not just any data — usually:

{
  "id": "user_id_123",
  "email": "david@email.com",
  "role": "admin"
}
Enter fullscreen mode Exit fullscreen mode

The server takes this, signs it, and sends it back to the frontend as a token. That token is your magic key to access protected routes.

🔄 JWT Flow in the Real World

Here’s the flow that makes you look like a senior dev:

  • User logs in → Server sends a JWT back.
  • Frontend stores the token (usually in localStorage or a secure cookie).
  • On every request, frontend sends it back to the server via the Authorization header.
  • Backend checks it, confirms it’s not tampered with, and knows who’s talking.

🧠 What Does the Frontend Do With It?

🔥 This is where your aha moment lives.

JWT on the frontend = no need to persist user manually.

Instead of saving user data in Zustand or Redux, just:

Store the token in localStorage.

Decode it when needed to get stuff like userId, email, etc.

npm install jwt-decode
Enter fullscreen mode Exit fullscreen mode 
import jwtDecode from "jwt-decode";

const token = localStorage.getItem("token");

if (token) {
  const decoded = jwtDecode(token);
  console.log(decoded.id); // user ID from token payload
}
Enter fullscreen mode Exit fullscreen mode

Yes — it’s that simple. You don’t even verify it on the frontend (that’s backend’s job).

⚠️ Zustand vs JWT — Who Wins?

Zustand is 🔥 for managing state in the moment, but it doesn’t persist user sessions on its own.

Instead:

Use JWT to persist auth state

Optionally: Decode and drop relevant info into Zustand for quick access.

💡 TL;DR

  • JWT = user's data + secret sauce (signature)
  • Sent from backend → stored on frontend
  • Frontend decodes it to know the logged-in user
  • No need to save full user info manually
  • Send it back to the server with every request as proof of identity

🔓 BONUS: Pro Tips

  • Don’t trust the token blindly — always verify on the backend.
  • Don’t store sensitive info inside (like passwords).
  • Use httpOnly cookies instead of localStorage if you're paranoid about security.
  • Use jwt-decode on the frontend — don’t try to decode manually, your brain deserves better.

👑 Final Words

JWT is not magic. It’s just a clever way to carry a user’s identity like a digital passport. Once you get the hang of it, everything else about authentication starts to click.

Now go flex that knowledge in your code — or better yet, drop it on X like:

“I just decode the JWT on load and store the user’s ID in Zustand — keeps it clean.”

Boom! Instant clout!

Top comments (0)