DEV Community

loading...
Cover image for Using Cookies with JWT in Node.js

Using Cookies with JWT in Node.js

Francisco Mendes
I don't know about you but I'm just getting started. 🍩
・5 min read

Although JWT is a very popular authentication method and is loved by many. Most people end up storing it at localstorage. I am not going to create an argument here about what is the best way to store the jwt in the frontend, that is not my intention.

If you have already read this article I created on how to create a simple authentication and authorization system with JWT, you must have noticed that I send the jwt in response when an http request is made from the login route. That is, the idea is to keep it in localstorage.

However, there are other ways to send the jwt to the frontend and today I will teach you how to store the jwt in a cookie.

Why use cookies?

Sometimes I'm a little lazy and because of that I don't feel like constantly sending the jwt in the headers whenever I make a request to the Api. This is where cookies come in, you can send them whenever you make an http request without worry.

Another reason is if you use localstorage, on the frontend you must ensure that the jwt is removed from localstorage when the user logs out. While using cookies, you just need a route in the api to make an http request to remove the cookie that you have on the frontend.

There are several reasons for preferring the use of cookies, here I gave small superficial examples that can occur in the elaboration of a project.

Now that we have a general idea, let's code!

Let's code

First we will install the following dependencies:

npm install express jsonwebtoken cookie-parser
Enter fullscreen mode Exit fullscreen mode

Now just create a simple Api:

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  return res.json({ message: "Hello World 🇵🇹 🤘" });
});

const start = (port) => {
  try {
    app.listen(port, () => {
      console.log(`Api up and running at: http://localhost:${port}`);
    });
  } catch (error) {
    console.error(error);
    process.exit();
  }
};
start(3333);
Enter fullscreen mode Exit fullscreen mode

As you may have guessed, we will need something to be able to work with cookies in our Api, this is where the cookie-parser comes in.

First we will import it and we will register it in our middlewares.

const express = require("express");
const cookieParser = require("cookie-parser");

const app = express();

app.use(cookieParser());

//Hidden for simplicity
Enter fullscreen mode Exit fullscreen mode

Now we are ready to start creating some routes in our Api.

The first route that we are going to create is the login route. First we will create our jwt and then we will store it in a cookie called "access_token". The cookie will have some options, such as httpOnly (to be used during the development of the application) and secure (to be used during the production environment, with https).

Then we will send a reply saying that we have successfully logged in.

app.get("/login", (req, res) => {
  const token = jwt.sign({ id: 7, role: "captain" }, "YOUR_SECRET_KEY");
  return res
    .cookie("access_token", token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
    })
    .status(200)
    .json({ message: "Logged in successfully 😊 👌" });
});
Enter fullscreen mode Exit fullscreen mode

Now with the login done, let's check if we received the cookie with the jwt in our client, in this case I used Insomnia.

login

Now with the authentication done, let's do the authorization. For that we have to create a middleware to check if we have the cookie.

const authorization = (req, res, next) => {
  // Logic goes here
};
Enter fullscreen mode Exit fullscreen mode

Now we have to check if we have our cookie called "access_token", if we don't, then we will prohibit access to the controller.

const authorization = (req, res, next) => {
  const token = req.cookies.access_token;
  if (!token) {
    return res.sendStatus(403);
  }
  // Even more logic goes here
};
Enter fullscreen mode Exit fullscreen mode

If we have the cookie, we will then verify the token to obtain the data. However, if an error occurs, we will prohibit access to the controller.

const authorization = (req, res, next) => {
  const token = req.cookies.access_token;
  if (!token) {
    return res.sendStatus(403);
  }
  try {
    const data = jwt.verify(token, "YOUR_SECRET_KEY");
    // Almost done
  } catch {
    return res.sendStatus(403);
  }
};
Enter fullscreen mode Exit fullscreen mode

Now it is time to declare new properties in the request object to make it easier for us to access the token's data.

To do this we will create the req.userId and assign the value of the id that is in the token. And we will also create the req.userRole and assign the value of the role present in the token. And then just give access to the controller.

const authorization = (req, res, next) => {
  const token = req.cookies.access_token;
  if (!token) {
    return res.sendStatus(403);
  }
  try {
    const data = jwt.verify(token, "YOUR_SECRET_KEY");
    req.userId = data.id;
    req.userRole = data.role;
    return next();
  } catch {
    return res.sendStatus(403);
  }
};
Enter fullscreen mode Exit fullscreen mode

Now we are going to create a new route, this time we are going to create the route to log out. Basically we are going to remove the value from our cookie. That is, we will remove the jwt.

However, we want to add the authorization middleware to our new route. This is because we want to log out if the user has the cookie. If the user has the cookie, we will remove its value and send a message saying that the user has successfully logged out.

app.get("/logout", authorization, (req, res) => {
  return res
    .clearCookie("access_token")
    .status(200)
    .json({ message: "Successfully logged out 😏 🍀" });
});
Enter fullscreen mode Exit fullscreen mode

So now let's test whether we can log out. What is intended is to verify that when logging out the first time, we will have a message saying that it was successful. But when we test again without the cookie, we must have an error saying that it is prohibited.

logout

Now we just need to create one last route so that we can get the data from jwt. This route can only be accessed if we have access to the jwt that is inside the cookie. If we don't, we will get an error. And now we will be able to make use of the new properties that we added to the request.

app.get("/protected", authorization, (req, res) => {
  return res.json({ user: { id: req.userId, role: req.userRole } });
});
Enter fullscreen mode Exit fullscreen mode

If we test it on our favorite client. We will test the entire workflow first. Following the following points:

  • Log in to get the cookie;
  • Visit the protected route to view the jwt data;
  • Log out to clear the cookie;
  • Visit the protected route again but this time we expect an error.

I leave here a gif to show how the final result should be expected:

final

The final code must be the following:

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

const app = express();

app.use(cookieParser());

const authorization = (req, res, next) => {
  const token = req.cookies.access_token;
  if (!token) {
    return res.sendStatus(403);
  }
  try {
    const data = jwt.verify(token, "YOUR_SECRET_KEY");
    req.userId = data.id;
    req.userRole = data.role;
    return next();
  } catch {
    return res.sendStatus(403);
  }
};

app.get("/", (req, res) => {
  return res.json({ message: "Hello World 🇵🇹 🤘" });
});

app.get("/login", (req, res) => {
  const token = jwt.sign({ id: 7, role: "captain" }, "YOUR_SECRET_KEY");
  return res
    .cookie("access_token", token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
    })
    .status(200)
    .json({ message: "Logged in successfully 😊 👌" });
});

app.get("/protected", authorization, (req, res) => {
  return res.json({ user: { id: req.userId, role: req.userRole } });
});

app.get("/logout", authorization, (req, res) => {
  return res
    .clearCookie("access_token")
    .status(200)
    .json({ message: "Successfully logged out 😏 🍀" });
});

const start = (port) => {
  try {
    app.listen(port, () => {
      console.log(`Api up and running at: http://localhost:${port}`);
    });
  } catch (error) {
    console.error(error);
    process.exit();
  }
};
start(3333);
Enter fullscreen mode Exit fullscreen mode

Final notes

Obviously, this example was simple and I would not fail to recommend reading much more on the subject. But I hope I helped to resolve any doubts you had.

What about you?

Have you used or read about this authentication strategy?

Discussion (15)

Collapse
astrix29 profile image
astrix29 • Edited

Hey, can we do a DELETE and PUT method using cookie based JWT? It's seems like cookies are not being sent with those two methods. Can you point where I am going wrong?

Collapse
franciscomendes10866 profile image
Francisco Mendes Author • Edited

Yes it works. So you mean it's working with other http methods? Do you have the authorization middleware on the route?

Collapse
astrix29 profile image
astrix29

Yes, the app is able to get cookies when doing GET or POST reqeust, but not DELETE and PUT. Also, yes I do have an authorization middleware which gets the user info before proceding to delete, but the auth middleware itself is not being able to grab the cookies because the browser didn't send that ig.

Thread Thread
franciscomendes10866 profile image
Francisco Mendes Author

Weird, are you sure you're sending the cookie?

Thread Thread
astrix29 profile image
astrix29

Cookies are sent automatically, right? I have just included 'credentials: include' in the fetch request and does the cookie sending job. Anyway, I am still trying to figure it out, if I find the solution then I will update you and If you find the solution then update me :)

Thread Thread
franciscomendes10866 profile image
Francisco Mendes Author • Edited

Do you have cors installed in your Api project?

const cors = require("cors");

app.use(cors({ credentials: true }));
Enter fullscreen mode Exit fullscreen mode
Thread Thread
astrix29 profile image
astrix29

Yes I have added this in the cors setup

Collapse
hasnaindev profile image
Muhammad Hasnain

Why would I use cookie based JWT authentication?

Collapse
franciscomendes10866 profile image
Francisco Mendes Author

Thanks for the feedback! 😊 I usually keep the JWT on localstorage. But I know a lot of people who prefer to keep it in cookies. 😉

Collapse
hasnaindev profile image
Muhammad Hasnain

Sure, I'm just curious to know what is the benefit of using JWT inside cookies? Thanks.

Thread Thread
franciscomendes10866 profile image
Francisco Mendes Author

The biggest difference when saving the JWT in a cookie would be the fact that when making an http request, the cookie would be sent with the request. But if you store the JWT in localstorage, you would have to send it explicitly with each http request. 🧐

Thread Thread
hasnaindev profile image
Muhammad Hasnain

Ahan, I understand. I wasn't sure if this was for a server-side website. Meaning, we don't have to use packages like Passport.js with this approach.

Thread Thread
franciscomendes10866 profile image
Francisco Mendes Author

Exactly. If you do it this way you end up with less boilerplate in your Api. The use of Passport.js is not incorrect, I just like to show that we can make simple and functional implementations. 🥸