Simple Cookies with Node.js and any frontend JavaScript framework

Fact: Elite programmers do simple things. It's the idiots who complicate things just to look smart.

Why another one?

We all have come across blogs to set up HTTP cookies with Node.js and React.js (or any other frontend framework) and lets be honest its hard to find an article with all the information we need to set up our project.

Out there, you find a lot of ifs and buts in configurations so Ill just tell you what you need to make it work - thats it. Ill keep this one short and to the point.

Agenda

Lets start with what our setup will look like:

1. Separate configurations for development and production environments; thats something missing from all the blogs out there.

2. Configure the frontend axios library to allow the backend to set cookies on the browser.

3. Configure the backend API to set a cookie with the right configurations; just the ones you need and care about.

Assumptions

I am assuming you will be hosting the frontend and the backend API on separate domains. Just to clarify, api.example.com and example.com are also counted as two separate domains.

Frontend configurations

On the frontend, I assume you will use a third-party library like axios to make requests to your server. I will advise you to create a new instance of Axios, with all the customised default configurations, and use this instance everywhere else in your project.

Create Axios instance with custom default configurations

The .create function allows you to set different configurations for different types of requests that you want to make to the backend. For example, you could have an Axios instance for making authenticated requests, and another one for making unauthenticated requests.

// utils/axios.jsimport axios from "axios";const axiosInstance = axios.create({  baseURL: "http://api.example.com/api", // optional but recommended  withCredentials: true, // to allow your API to set cookies on the browser});export default axiosInstance;

Its just a better way of doing things

Youre done with frontend configurations. You can now use this newly created Axios instance to make requests to the backend like you normally would.

For example:

// utils/api.jsimport axios from "utils/axios";function fetchProducts() {  return axios.get("/products/all/");}

Notice, how you dont have to set the base URL every single time now. Youre welcome :)

Backend configurations

You will just need to install a single library to your project - CORS.

Environment variables

Create an environment variable to store the frontend URL. If you are running the project in the development environment then you might set it to http://localhost:8000, or if you are running it in production then it might be https://example.com.

# .envFRONTEND_URL=http://localhost:8000

You can use a third-party library like dotenv to load environment variables from the .env file.

Set up Express app

Configure CORS and default response headers to be able to set cookies on the frontend browser.

// index.jsimport express from "express";import cors from "cors";async function main() {  const app = express();  // ...your Express app configurations  // allow the frontend to make requests to your API  app.use(cors({    origin: process.env.FRONTEND_URL,    credentials: true  }));  // set headers for you to be able to set cookies on the browser  app.use((_, res, next) => {    res.header("Access-Control-Allow-Origin", process.env.FRONTEND_URL);    res.header("Access-Control-Allow-Headers", "*");    res.header("Access-Control-Allow-Credentials", "true");    next();  });  // ...your rest of the configurations  app.listen(process.env.PORT, () => {    console.log("App is up and running");  });}main() // again, just a better way of doing things

And, thats all you need to set up cookies on your backend project. You can now start setting cookies in your endpoint responses.

Set cookies with working configurations

You can use the given format to set cookies in both development and production environments, using the automatically set environment variable NODE_ENV.

// routes/auth.jsconst isInDevelopment = process.env.NODE_ENV === "development";const cookieConfigs = {  httpOnly: true,  sameSite: isInDevelopment ? false : "none",  secure: isInDevelopment ? false : true,  maxAge: 365 * 24 * 60 * 60 * 1000, // one year};router.post("/signIn/", (req, res) => {  // ...your own login  res.cookie("cookie-name", "cookie-value", cookieConfigs);  res.status(204).send(); // read about HTTP status 204});

Conclusion

Thats it! No more wandering from one Stackoverflow answer to another in search of workable cookies configurations with Node.js.

Do like the article if you found this helpful, and/or drop a comment if theres anything I missed or anything youd like me to cover in another article.

Signing off!