I'm a self-learning web developer, and I recently deployed my backend on Render (free tier) and my frontend on Vercel. The stack includes Node.js, Express, MongoDB, WebSockets, and authentication is handled via Passport.js (Google OAuth).

The Issue:

• Locally, everything works fine.
• When deployed, authentication works partially—Google login is successful, and cookies (access/refresh tokens) are set in the browser.
• However, when making requests to protected routes, the backend does not receive cookies/tokens, leading to a 401 Unauthorized error, redirecting users to the login page.

Expected Behavior:

• The frontend should send cookies (access/refresh tokens) to the backend.
• The backend should validate the token and allow access to protected routes.

What I Have Tried:

1. Checked CORS Configuration (Backend - Render)

const options = {
httpOnly: true,
secure: isProduction,  // Secure in production
sameSite: "none",  // Required for cross-origin cookies
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days
};

app.use(
cors({
  origin: ";,  // Frontend URL
  credentials: true, // Allow credentials (cookies)
  methods: ["GET", "PUT", "POST", "DELETE", "OPTIONS"],
  allowedHeaders: [
    "Access-Control-Allow-Origin",
    "Content-Type",
    "Authorization",
    "Origin",
    "X-Requested-With",
    "Accept",
  ],
  exposedHeaders: ["Access-Control-Allow-Credentials"],
})
);

app.options("*", cors());

2. Axios Config (Frontend - Vercel)

export const api = axios.create({
 baseURL: API_URL,
 withCredentials: true,  // Ensures cookies are sent with requests
});

3. Checked Browser Cookies in DevTools:

   • Cookies are present in the browser after login.
   • However, they are not sent with API requests.

4. Manually Tested with Postman (Works!)

   • When sending a request to my backend's protected route via Postman, it works perfectly!
   • The backend receives the cookies and validates the request.

5. Problem causes?

   • Render's free tier blocking cross-origin cookies?
   • Vercel not forwarding credentials properly?
   • Misconfigured CORS settings?

How can I make sure the cookies (tokens) are sent properly in requests from Vercel (frontend) to Render (backend)?

If you want to replicate the problem here's the live link of frontend - frontend-deployed-link

Note: Since the backend is deployed on Render’s free tier, it might take 50 seconds to spin up if it's inactive

Edit: Tried on Microsoft edge browser for some reasons it's working there but not in my current browser (Brave)

I'm a self-learning web developer, and I recently deployed my backend on Render (free tier) and my frontend on Vercel. The stack includes Node.js, Express, MongoDB, WebSockets, and authentication is handled via Passport.js (Google OAuth).

The Issue:

• Locally, everything works fine.
• When deployed, authentication works partially—Google login is successful, and cookies (access/refresh tokens) are set in the browser.
• However, when making requests to protected routes, the backend does not receive cookies/tokens, leading to a 401 Unauthorized error, redirecting users to the login page.

Expected Behavior:

• The frontend should send cookies (access/refresh tokens) to the backend.
• The backend should validate the token and allow access to protected routes.

What I Have Tried:

1. Checked CORS Configuration (Backend - Render)

const options = {
httpOnly: true,
secure: isProduction,  // Secure in production
sameSite: "none",  // Required for cross-origin cookies
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days
};

app.use(
cors({
  origin: "https://sync-sphere-eight.vercel.app",  // Frontend URL
  credentials: true, // Allow credentials (cookies)
  methods: ["GET", "PUT", "POST", "DELETE", "OPTIONS"],
  allowedHeaders: [
    "Access-Control-Allow-Origin",
    "Content-Type",
    "Authorization",
    "Origin",
    "X-Requested-With",
    "Accept",
  ],
  exposedHeaders: ["Access-Control-Allow-Credentials"],
})
);

app.options("*", cors());

2. Axios Config (Frontend - Vercel)

export const api = axios.create({
 baseURL: API_URL,
 withCredentials: true,  // Ensures cookies are sent with requests
});

3. Checked Browser Cookies in DevTools:

   • Cookies are present in the browser after login.
   • However, they are not sent with API requests.

4. Manually Tested with Postman (Works!)

   • When sending a request to my backend's protected route via Postman, it works perfectly!
   • The backend receives the cookies and validates the request.

5. Problem causes?

   • Render's free tier blocking cross-origin cookies?
   • Vercel not forwarding credentials properly?
   • Misconfigured CORS settings?

How can I make sure the cookies (tokens) are sent properly in requests from Vercel (frontend) to Render (backend)?

If you want to replicate the problem here's the live link of frontend - frontend-deployed-link

Note: Since the backend is deployed on Render’s free tier, it might take 50 seconds to spin up if it's inactive

Edit: Tried on Microsoft edge browser for some reasons it's working there but not in my current browser (Brave)

• node.js
• cookies
• axios
• jwt
• backend

2 Answers 2

I am facing the same issue my frontend is in vercel and the backend is hosted on render the issue is due to google chrome's new privacy sandbox which is rolling out gradually. Now , By default chrome doesn't allow third party cookies just like in our case where backend and frontend are running on different domain.

Maybe one of these fixes work out : -

1. set partitioned option to true while setting cookie

res.cookie("token", "", {
  httpOnly: true,
  secure: true,
  sameSite: "None",
  partitioned: true,
  expires: new Date(0),
  path: "/",
});

1. Use a browser other than chrome( in my case my cookies worked fine in brave browser).

2. Go to chrome settings and allow third party cookies.

I am also looking for a better solution than this

Turning off the brave shields fixed it for me