JWT stands for JSON Web Token. It is a compact, URL-safe means of representing claims to be transferred between two parties.

How is a JWT structured?

A JWT consists of three parts: Header, Payload, and Signature.

What is the purpose of the JWT Header?

The Header describes how the JWT is encoded and signed, including the type of token (JWT) and the signing algorithm being used.

What are the typical use cases for JWT?

JWTs are commonly used for authentication and information exchange in web development and APIs.

All notes

(Authentication)30 March 20254 min read

Sign Token Using Cookie and LocalStorage

There are two common places to keep a JSON Web Token in the browser. An httpOnly cookie set by the server travels with every request sent withCredentials and cannot be read by page scripts, but needs sameSite "none" over HTTPS in production. In localStorage, the client keeps the token itself and sends it in the Authorization header.

Client-Side

I am using Axios to make POST requests to my server for handling JWT for /jwt and logout /logout.

When a user logs in:

JavaScript

axios
  .post(
    `https://server.vercel.app/jwt`,
    { email: currentUserEmail }, // Assuming the server expects an object with an 'email' property
    {
      withCredentials: true,
    }
  )
  .then((res) => {
    console.log("JWT creation response:", res.data);
  })
  .catch((error) => {
    console.error("Error creating JWT:", error);
  });

When a user logs out:

JavaScript

axios
  .post(
    "https://server.vercel.app/logout",
    { email: currentUserEmail }, // Assuming the server expects an object with an 'email' property
    {
      withCredentials: true,
    }
  )
  .then((res) => {
    console.log("Logout response:", res.data);
  })
  .catch((error) => {
    console.error("Error logging out:", error);
  });

Server-Side

Make sure you install jsonwebtoken and cookie-parser in your server:

JavaScript

const jwt = require("jsonwebtoken");
const cookieParser = require('cookie-parser');

Use cookie-parser middleware:

JavaScript

app.use(cookieParser());

Error Handling in verifyToken Middleware:

JavaScript

const verifyToken = (req, res, next) => {
  const token = req?.cookies?.token;
  if (!token) {
    return res.status(401).send({ message: "unauthorized access" });
  }
  jwt.verify(token, process.env.TOKEN_SECRET, (err, decoded) => {
    if (err) {
      return res.status(401).send({ message: "unauthorized access" });
    } else {
      req.user = decoded;
      next();
    }
  });
};

JWT Route (/jwt):

JavaScript

app.post("/jwt", async (req, res) => {
  try {
    const user = req.body;
    const token = jwt.sign(user, process.env.TOKEN_SECRET, {
      expiresIn: "2h",
    });
    res.cookie("token", token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      sameSite: process.env.NODE_ENV === "production" ? "none" : "strict",
      maxAge: 2 * 60 * 60 * 1000, // 2 hours in milliseconds
    }).send({ success: true });
  } catch (error) {
    console.error("Error creating JWT:", error);
    res.status(500).send({ success: false, message: "Internal Server Error" });
  }
});

Logout Route (/logout):

JavaScript

app.post("/logout", async (req, res) => {
  const user = req.body;
  console.log("logging out", user);
  res.clearCookie("token", {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: process.env.NODE_ENV === "production" ? "none" : "strict",
  }).send({ success: true });
});

SameSite Attribute for Cookies:

In your /jwt route, if you're setting sameSite: "none" for the cookie, ensure your production environment uses HTTPS because the "none" value for sameSite requires a secure connection.

JavaScript

sameSite: process.env.NODE_ENV === "production" ? "none" : "strict",

Sign Token Using LocalStorage

Client-Side

The code begins with a conditional statement checking if the variable email has a truthy value. If the email is truthy, the block of code inside the if statement will be executed:

JavaScript

if (email) {
  fetch('https://server.vercel.app/user/{email}', {
    method: "PUT",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify(currentUser),
  })
    .then((res) => res.json())
    .then((data) => {
      const accessToken = data.token;
      console.log(accessToken);
      localStorage.setItem("accessToken", accessToken);
      setToken(accessToken);
    });
}

Server-Side

Verify JWT Middleware:

JavaScript

function verifyJWT(req, res, next) {
  const authHeader = req.headers.authorization;
  if (!authHeader) {
    return res.status(401).send({ message: "Unauthorized access" });
  }
  const token = authHeader.split(" ")[1];
  jwt.verify(token, process.env.WEB_TOKEN, function (err, decoded) {
    if (err) {
      return res.status(403).send({ message: "Forbidden access" });
    }
    req.user = decoded;
    next();
  });
}

Topic: Authentication
Published: 30 March 2025
Reading: 4 min · 554 words
Sections: 3
Tags: JWT
Authentication
Cookies
localStorage
Express
Axios

Sign Token Using Cookie and LocalStorage

Sign Token Using LocalStorage

Client-Side

Server-Side

Experience

Full-Stack Developer

Software Developer

Full-Stack Developer

About

( Story )

( Education )

Kabi Nazrul Government College

National University, Bangladesh

( Co-curricular )

Bangladesh National Cadet Corps (BNCC)

( Languages )

Bangla, English, Hindi

( Skills )

( Questions )

Who is Sabbir Mohammad Sami?

What does Sabbir Mohammad Sami build?

Which technologies does Sami work with?

Does Sami build mobile apps with Flutter?

Does Sami build AI products?

How can I hire Sami as a web or app developer in Dhaka?

( Contact )

Contact

( Write to me )