DEV Community: Emdadul Haque

Demystifying Promises in JavaScript : A Beginner’s Guide

Emdadul Haque — Sat, 21 Jun 2025 15:25:31 +0000

What is a Promise?

A Promise is an object in JavaScript that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It allows you to write asynchronous code in a more manageable and readable way by handling success and error cases.

Using Promises: Creating and Handling

You can create a custom Promise instance to handle asynchronous tasks. Once you have a Promise, there are two main ways to handle its result or error:

Using .then() and .catch()
Using async/await with try/catch

Example:

function customPromise(condition) {
  return new Promise((resolve, reject) => {
    if (condition) {
      resolve("Success");
    } else {
      reject("Failure");
    }
  });
}

Instead of new Promise () instance we can use async/await , which acts the same.

Equivalent using async/await:

async function customPromise(condition) {
  if (condition) {
    return "Success"; // resolves
  } else {
    throw "Failure"; // rejects
  }
}

return → resolves the Promise
throw → rejects the Promise

Handling promise with .then() and .catch()

customPromise(true)
  .then(result => console.log("Result:", result)) // If the Promise resolves, this block runs
  .catch(error => console.error("Error:", error)); // If the Promise rejects, this block runs

Handling promise with async/await and try/catch

async function handle() {
  try {
    const result = await customPromise(false); // If 'false', this will reject
    console.log("Result:", result);
  } catch (error) {
    console.error("Error:", error);  // This catches the rejection reason
  }
}

handle();

Built-in Promises

Many modern JavaScript APIs return Promises by default. For example, the fetch API used for network requests returns a Promise that resolves with the response object.

You can handle these Promises using the same techniques (async/await or .then()/.catch()) without needing to create them yourself.

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Fetch error:", error);
  }
}

fetchData();

Other built-in Promise-returning APIs include:

Response.json() (parsing JSON from fetch response)
fs.promises methods in Node.js (readFile, writeFile, etc.)
Promise.all(), Promise.race(), Promise.resolve(), Promise.reject()
crypto.subtle API (Web Crypto)
cacheStorage methods in Service Workers

Built-in Asynchronous Functions Without Promises

Some built-in asynchronous functions, like setTimeout, execute tasks asynchronously but do not return Promises. Instead, they rely on callbacks to handle completion.

If you want to use them with Promises or async/await, you need to wrap these functions manually in a Promise.

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

async function run() {
  await delay(1000);
  console.log("Waited 1 second");
}

run();

Other built-in asynchronous functions that use callbacks but do not return Promises:

setInterval() / clearTimeout() / clearInterval()
navigator.geolocation.getCurrentPosition()
XMLHttpRequest (older AJAX API)
Event listeners (addEventListener)
Node.js callback-based fs methods (fs.readFile, fs.writeFile, etc. without .promises)
process.nextTick() and setImmediate() in Node.js

Understanding Cookies, Access & Refresh Tokens with Node.js

Emdadul Haque — Mon, 16 Jun 2025 03:45:20 +0000

Cookie:
A small piece of data stored by the browser, sent back with every request to the server. It helps the server remember information about the client, like login status.

When you visit a website, the server can give your browser a cookie.
Your browser stores it and automatically sends it back to the server every time you visit that site again.
Cookies are often used to remember you, like keeping you logged in or storing preferences.

Access Token:
A short-lived token sent by the server to the client after login. The client uses it to prove authentication when making API requests. It usually expires quickly for security reasons.

When you log in, the server gives you this token.
You send it with every request to protected routes (like “get user profile” or “update post”).
It usually expires quickly (like in 15 minutes) for security.

Refresh Token:
A longer-lived token stored safely (usually in a cookie with httpOnly) used to get a new access token when the old one expires. It helps keep the user logged in without asking for credentials repeatedly.

It’s longer-lasting than the access token.
It’s stored securely in a cookie (usually httpOnly).
When your access token expires, your app sends the refresh token to the server to get a new access token without logging in again.

Why Is the Refresh Token Saved in a Cookie?

The refresh token is saved in a cookie—specifically an HTTP-only cookie—to enhance security and protect against XSS (Cross-Site Scripting) attacks.

Here’s why:

HTTP-only flag
When a cookie is set with httpOnly: true, it cannot be accessed by JavaScript running in the browser (e.g., document.cookie).
This prevents attackers from stealing the refresh token even if they manage to inject malicious scripts.
Automatically sent with requests
Cookies are automatically included in HTTP requests by the browser—no need to manually attach the refresh token on the frontend.
This makes the refresh flow seamless and consistent.
Reduces surface area for attacks
If you store the refresh token in localStorage or sessionStorage, it's accessible to JavaScript—making it easier for XSS attacks to extract it.
Cookies (with proper flags like httpOnly, secure, and sameSite) reduce that risk.
Built-in browser handling
The browser takes care of sending the cookie only to the origin you specify (sameSite, domain, path), giving you finer control over exposure.

Example Setup

src\app.js

//...
import cookieParser from 'cookie-parser';
import cors from 'cors';

app.use(cookieParser());
app.use(
  cors({
    origin: ['http://localhost:5173'],
    credentials: true, // ✅ this is mandatory for cookies
  }),
);
//...

src\app\modules\Auth\auth.route.js

import { AuthControllers } from './auth.controller';
//...
router.post('/login', AuthControllers.loginUser);
router.post('/refresh-token', AuthControllers.refreshToken);
//..

src\app\modules\Auth\auth.controller.js

import { AuthServices } from './auth.service';
//..
const loginUser = catchAsync(async (req, res) => {
  const result = await AuthServices.loginUser(req.body);
  const { refreshToken, accessToken } = result;

  res.cookie('refreshToken', refreshToken, {
    secure: config.NODE_ENV === 'production',
    httpOnly: true,
    maxAge: 7 * 24 * 60 * 60 * 1000, // cookie lasts 7 days
  });

  sendResponse(res, {
    statusCode: httpStatus.OK,
    success: true,
    message: 'User is logged in succesfully!',
    data: {
      accessToken,
    },
  });
});

const refreshToken = catchAsync(async (req, res) => {
  const { refreshToken } = req.cookies;
  const result = await AuthServices.refreshToken(refreshToken); //verifies the current refresh token. generates and returns new access token upon succesful verification

  sendResponse(res, {
    statusCode: httpStatus.OK,
    success: true,
    message: 'Access token is retrieved succesfully!',
    data: result,
  });
});

export const AuthControllers = {
  loginUser,
  changePassword,
  refreshToken,
};
//..

Explanation of the provided example in simple terms

Middleware setup (src\app.js)

app.use(cookieParser());
app.use(
  cors({
    origin: ['http://localhost:5173'],
    credentials: true, // ✅ this is mandatory for cookies
  }),
);

cookieParser() lets your server read cookies sent by the browser.
cors() allows your frontend (http://localhost:5173) to talk to this backend, and credentials: true lets cookies be sent in cross-origin requests, which is necessary for storing refresh tokens.

Routes (auth.route.js)

router.post('/login', AuthControllers.loginUser);
router.post('/refresh-token', AuthControllers.refreshToken);

/login route handles user login.
/refresh-token route is called when the client wants a new access token using the refresh token.

Login controller (auth.controller.js)

const loginUser = catchAsync(async (req, res) => {
  //takes login credential (email, password), verifies it and generates refreshToken and accessToken
  const result = await AuthServices.loginUser(req.body);
  const { refreshToken, accessToken } = result;

  res.cookie('refreshToken', refreshToken, {
    secure: config.NODE_ENV === 'production',
    httpOnly: true,
    maxAge: 7 * 24 * 60 * 60 * 1000, // cookie lasts 7 days
  });

  sendResponse(res, {
    statusCode: httpStatus.OK,
    success: true,
    message: 'User is logged in succesfully!',
    data: {
      accessToken,
    },
  });
});

When a user logs in, your service returns two tokens: an accessToken and a refreshToken.
The refresh token is saved in an HTTP-only cookie (res.cookie(...)), so the browser stores it but JavaScript cannot read it (safer).
The access token is sent back in the JSON response, so the frontend can use it to authenticate API calls.

Refresh token controller

const refreshToken = catchAsync(async (req, res) => {
  const { refreshToken } = req.cookies;

  // uses jwt.verify for the verification. expample - jwt.verify( refreshToken, config.jwt_refresh_secret )
  // verifies the current refresh token. generates and returns new access token upon successful verification
  const result = await AuthServices.refreshToken(refreshToken);
  sendResponse(res, {
    statusCode: httpStatus.OK,
    success: true,
    message: 'Access token is retrieved succesfully!',
    data: result,
  });
});

When the frontend detects the access token expired, it calls /refresh-token.
The server reads the refresh token from the cookie (req.cookies).
It verifies the refresh token and issues a new access token.
The new access token is sent back to the client to continue making authenticated requests.

Summary:
Cookies store the refresh token securely. The frontend uses the access token for requests. When access token expires, frontend calls /refresh-token endpoint, sending the refresh token automatically via cookie, and gets a new access token without asking the user to log in again.

AuthService example code

import jwt from 'jsonwebtoken';
import { User } from '../user/user.model';

// util function to generate tokens
const createToken = (jwtPayload, secret, expiresIn) => {
  return jwt.sign(jwtPayload, secret, { expiresIn });
};

const loginUser = async (payload) => {
  const user = await User.findById(payload.id);
  const jwtPayload = {
    userId: user.id,
    role: user.role,
  };

  const accessToken = createToken(
    jwtPayload,
    config.jwt_access_secret,
    config.jwt_access_expires_in
  );

  const refreshToken = createToken(
    jwtPayload,
    config.jwt_refresh_secret,
    config.jwt_refresh_expires_in
  );

  return {
    accessToken,
    refreshToken,
  };
};

const refreshToken = async (token) => {
  const decoded = jwt.verify(token, config.jwt_refresh_secret);

  const jwtPayload = {
    userId: decoded.userId,
    role: decoded.role,
  };

  const accessToken = createToken(
    jwtPayload,
    config.jwt_access_secret,
    config.jwt_access_expires_in
  );

  return {
    accessToken,
  };
};

export const AuthServices = {
  loginUser,
  refreshToken,
};

How to Use a Higher-Order Component (HOC) the Right Way in React

Emdadul Haque — Sat, 14 Jun 2025 10:41:48 +0000

What is a HOC?

A Higher-Order Component is a function that:

Takes a React component as input
Returns a new React component with extra features

Example of a HOC

const withAdminRole = (WrappedComponent) => {
  // takes a component as argument and returns new component
  return (props) => <WrappedComponent {...props} role="admin" />;
};

const WelcomeUser = ({ name, role }) => {
  return <p>Welcome, {name}! Your role is: {role}</p>;
};

❌ Inefficient Way to Use It

// Don't do this
const UserWithRole = () => withAdminRole(WelcomeUser);

<UserWithRole name="Apu" />;

What’s wrong here?

withAdminRole(WelcomeUser) is called every time <UserWithRole /> renders
This creates a new component on every render
React can’t optimize this
It can cause unnecessary re-renders

✅ Efficient Way to Use It

// Do this instead
const UserWithRole = withAdminRole(WelcomeUser);

<UserWithRole name="Apu" />;

What’s right here?

withAdminRole(WelcomeUser) is called only once,
UserWithRoleis now a stable component
React can optimize performance
Your code is cleaner and safer

Simple Rule

Always assign the result of a HOC to a constant. Don’t call the HOC inside a component or inside render.