Cookies set in frontend (Vercel) are lost after refresh the page when backend is deployed on Render

[mohitSr1021]

# Cookies Set in Frontend (Vercel) are Lost After Page Refresh When Backend is Deployed on Render

Issue Description:

I am experiencing an issue where cookies set in the frontend (deployed on Vercel) are lost upon refreshing the page. The backend is deployed on Render, and it seems that the cookies are not persisting correctly. I suspect this might be related to how the cookies are being configured in the backend.

Backend Configuration:

.env File:

EXAMPLE_FRONTEND_API = example.vercel.app
NODE_ENV = production
JWT_SECRET_KEY_EXPIRY=900000          # 15 minutes in ms
REFRESH_TOKEN_SECRET_KEY_EXPIRY=604800000 # 7 days in ms

index.js or app.js Code:

app.use(cors({
  origin: `https://${process.env.EXAMPLE_FRONTEND_API}`,
  credentials: true, 
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ["Content-Type", "Authorization"],
}));

Auth Controller - Cookies Options:

res.cookie("token", token, {
        httpOnly: true,
        secure: process.env.NODE_ENV === "production",
        sameSite: "None",
        path: "/",
        maxAge: parseInt(process.env.JWT_SECRET_KEY_EXPIRY) // 15 min
      })
      .cookie("refreshToken", refreshToken, {
        httpOnly: true,
        secure: process.env.NODE_ENV === "production",
        sameSite: "None",
        path: "/",
        maxAge: parseInt(process.env.REFRESH_TOKEN_SECRET_KEY_EXPIRY) // 7d
      })

Notes:

I am new to backend development and currently learning the basics, so.

Request for Help:

Any guidance, suggestions, or resources for debugging and resolving this issue would be greatly appreciated. I would also love to learn from you about the best practices for handling cookies in this setup 0_0.

Thank you in advance for your assistance!

[mohitSr1021]

I got my solution and understood the concepts!

[MARVELGARR]

pls help... I am having same problem

[lucianookdp]

Pretty sure this is third-party cookie blocking, not your cookie config. sameSite: "None" + secure: true is actually the right setup for cross-site cookies, but since vercel.app and onrender.com are different top-level domains, the browser treats that cookie as third-party from the frontend's point of view. Safari's been blocking those by default for a while now, and Chrome/Firefox are moving the same direction. That lines up with what you're seeing too — it works right after login because that's the same request/response, then vanishes on refresh because that's a fresh cross-site request and the browser just won't send it.

Before assuming it's the domain thing though, worth double checking a couple things:

• Is NODE_ENV actually set to production in Render's env vars? If it's not, secure quietly becomes false and the cookie gets dropped for being SameSite=None without Secure.
• Add app.set('trust proxy', 1) — Render's behind a reverse proxy, and without that Express can think the connection isn't secure even when it is.
• Pop open the Network tab on the login request and check the actual Set-Cookie header, just to confirm it's even reaching the browser correctly.

If all that checks out and it's still not sticking, it's the domain split. Easiest real fix is putting both under the same parent domain (something like app.yourdomain.com and api.yourdomain.com) — turns it into a first-party cookie and the whole problem goes away. Custom domains are free on both Vercel and Render so it's not much extra work.

If you can't do that for whatever reason, other options are proxying the API through the frontend's domain (Vercel rewrites, or a Next.js route that just forwards the request) so it looks same-origin to the browser, or dropping cookies entirely for this and sending the token in an Authorization header instead (keep it in memory, not localStorage, so it's not sitting there for any injected script to grab).

[usualdesigner]

Since you're new to this - your config's mostly right (secure + sameSite: none is correct for cross-site), but check two things: sameSite: 'none' requires secure: true unconditionally in the browser, so if NODE_ENV isn't literally 'production' on Render, the cookie gets silently rejected by the browser. And probably the real one - Render sits behind its own proxy, so Express doesn't see the connection as secure unless you set app.set('trust proxy', 1). Add trust proxy and confirm NODE_ENV is actually production in Render's dashboard, not just your local .env.