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!