Access Token and Refresh Token

Zeeshan Ahmad — Mon, 06 Oct 2025 13:56:11 +0000

Access Token

Access tokens are short-lived, that allow the user to access resources without needing to log-in repeatedly. These are sent with an each API request (Authorization: Bearer ). If they are stolen, attacker would have a very shorter time window. Their life span vary company to company but in general their life span is 30-90 mints.

Access tokens are very useful when you want a password less login. Similarly, they are useful when you want to access the shared resources. For example, when you want to edit or use the file owned by someone else, access tokens make it easier and secure for you.

Refresh Token

Refresh tokens are long lived, that are used to generate the access tokens without asking the user to login with your credentials frequently. They are stored securely on the authorization server and sometimes stored in httpOnly secure cookies. It is because they must be stored securely in order to avoid its vulnerability to attackers. Their life span also vary company to company but in industry practice it has the life span of 30-90 days.

When an access token expires, refresh token is used to get a new one without logging in. Because user is authenticated on the basis of refresh token.

Every time a refresh token is used to generate the access token, the old refresh token becomes invalid and it is also regenerated in order to avoid security threats. This technique is called as Rotation.

JWT

JWT (JSON Web Token) is popular token format because it is stateless , compact (self-contained claims) and easy to transport in HTTP headers. A JWT can be a access token and a refresh token as well. But refresh token less use JWT format.

JWT generates a signature by hashing header + payload with your secret key. Let’s take an example to understand it easily.


const payload = {
    id: "user123",
    name: "John",
    email: "john@123.com"
}

const SECRET_KEY = "your_secret_key"

jwt.sign(payload, SECRET_KEY, {expiresIn: "10m"})

Some beginners think jwt.sign(), encrypts the payload, it does not. It just signs, which means if anyone try to tamper it, the signature verification fails. So it just make your payload tamper-proof. For instance, after signing the token looks like this :


eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiJ1c2VyMTIzIiwibmFtZSI6IkFsaWNlIiwicm9sZSI6InByZW1pdW0ifQ.
wL3Jhpc6pCkJkT7Yt3cvvjTgC1z0sX4eS9B3Gx6w3Nk

In order to verify it, we use:


const decoded = jwt.verify(token, SECRET_KEY) //token: token sent by user
console.log("Token Data: ", decoded)

Our claims (payload + header) are decoded with this verification that they were not altered. Now understand the terms stateless and self-contained used earlier. Later means a JWT includes all the claims (payload + header) to identify the user nothing is required from the database that is enough to authenticate the user. Stateless means server does not need to store the session data in the database. Instead the all the claims are present in the token itself. They do not need to make the DB query to look who you are, serve just verify the signature.

Access token and refresh token aren’t separate, they work together to make the login process smoother and secure. Access tokens are used for initial access while refresh tokens are used to extend that access to the resources over time.

Switching from Simple CSS to Tailwind CSS

Zeeshan Ahmad — Mon, 25 Aug 2025 07:42:20 +0000

As developers, we all know how painful writing CSS can be. Too many selectors, too many lines of code, sometimes just for styling a single element. I felt the same.

That’s when I moved to Tailwind CSS. Tailwind CSS is a utility-first CSS framework. It makes building modern and responsive websites much easier using small, reusable CSS classes.

Why I Switched

I was already working in React with CSS3. But when the components started getting bigger and more complex, CSS quickly became messy:

Multiple CSS files for different components.
Searching for selectors in HTML/JSX.
Writing the same CSS lines again and again.
Even with simple HTML, styling with CSS was boring and repetitive.

Then I discovered Tailwind CSS. Instead of writing CSS for everything, you just add pre-defined classes to your element. Tailwind takes care of the CSS for you.

Example: Styling a Button

With CSS3

<button class="btn">Click</button>


.btn {
  background-color: blue;
  color: white;
  padding: 4px;
  border-radius: 100px;
}

With Tailwind CSS

<button class="bg-blue-500 text-white p-2 rounded-full">
  Click
</button>

Look how much simpler that is.

But Do You Need to Remember All These Classes?

No! That was my first worry too.

Tailwind’s documentation is amazing. You just need to check the documentation whenever you need to find a new or unfamiliar class. For example, if you search border-radius, it will show you rounded classes. The docs relate everything back to CSS3, so you don’t feel lost.

And honestly, after using a class once or twice, you’ll remember it.

Responsive Design Made Easy

One of the biggest benefits of Tailwind is responsiveness.

If you’ve ever added responsiveness using CSS3 media queries, you know how tiring it can be. But Tailwind makes it super simple.

With CSS3


<h1 class="heading">Responsive Heading</h1>

.heading {
  font-size: 1.25rem; 
}

@media (min-width: 768px) {
  .heading {
    font-size: 1.875rem; 
  }
}

@media (min-width: 1024px) {
  .heading {
    font-size: 2.25rem; 
  }
}

With Tailwind CSS

<h1 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl">
  Responsive Heading
</h1>

That’s it, One line. The heading grows smaller on tablet and bigger on desktop automatically.

Final Thoughts

Switching from simple CSS to Tailwind CSS has made my life as a developer much easier. It saves time, keeps code cleaner, and makes adding responsiveness a breeze.

If you’re tired of writing the same CSS again and again, give Tailwind a try. Once you use it, you may never want to go back.

DEV Community: Zeeshan Ahmad