Cookies disappear when deployed to render and getting not found error

I have been following (MERN Stack Project: Build a Modern Real Estate Marketplace with react MERN (jwt, redux toolkit)
) tutorial on youtube. under his video he shared also link to his codes (cannot paste it here cuz render wont allow)

My question: The tutorial deploys both the front end and back end to a single URL, but I want to deploy them separately so that the front end has its own URL and the back end has its own URL. I managed to make this work, and here is my working project: (https://real-estate-nms7.onrender.com).

However, I have encountered a problem that only occurs in the production build and not in development mode. When a user goes to the site and clicks “Sign In,” the page appears and everything works. But when the user refreshes that page, I get a “Not Found” error. Another issue is that when a user signs in and navigates to a URL like “mypage link/profile” and then refreshes the page, the same “Not Found” error occurs and the cookies disappear. However, when the user navigates back to “mypage . com”, the cookies reappear and page works.

Can anyone help me understand why this is happening and how to fix it?
Here is my index.js file:
import express from “express”;
import mongoose from “mongoose”;
import dotenv from “dotenv”;
import userRouter from “./routes/user.route.js”;
import authRouter from “./routes/auth.route.js”;
import listingRouter from “./routes/listing.route.js”;
import cors from “cors”;
import cookieParser from “cookie-parser”;
import path from “path”;

dotenv.config();

const PORT = process.env.PORT || 3000;

console.log(“Environment Variables:”);
console.log(“PORT:”, PORT);
console.log(“MONGO:”, process.env.MONGO);
console.log(“JWT_SECERET:”, process.env.JWT_SECERET);

const app = express();

app.use(
cors({
origin: [“…real-estate-nms7. onrender…”],
// origin: [“http://localhost:5173”],
methods: [“POST”, “GET”, “DELETE”],
credentials: true,
})
);

app.use(express.json());
app.use(cookieParser());
mongoose
.connect(process.env.MONGO)
.then(() => {
console.log(“Connected to MongoDB!”);
})
.catch((err) => {
console.log(err);
});

const __dirname = path.resolve();

app.use(“/server/user”, userRouter);
app.use(“/server/auth”, authRouter);
app.use(“/server/listing”, listingRouter);

// Serve static files from the React app
app.use(express.static(path.join(__dirname, “client/dist”)));

// The “catchall” handler: for any request that doesn’t match one above, send back React’s index.html file.
app.get(“*”, (req, res) => {
res.sendFile(path.join(__dirname, “client”, “dist”, “index.html”));
});

app.use((err, req, res, next) => {
const statusCode = err.statusCode || 500;
const message = err.message || “Internal Server Error”;
return res.status(statusCode).json({
success: false,
statusCode: statusCode,
message,
});
});
//l
app.listen(PORT, () => console.log(Server is running on port: ${PORT}));

// app.get(“/test”, (req, res) => {
// res.json({ message: “Hello World” });
// });
app.get(“/”, (req, res) => {
res.send(“Welcome to the Real Estate API”);
});

here is my cookies code:

import express from "express";
import User from "../models/user.model.js";
import bcryptjs from "bcryptjs";
import { errorHandler } from "../utils/error.js";
import jwt from "jsonwebtoken";

const router = express.Router();

router.post("/signup", async (req, res, next) => {
  const { username, email, password } = req.body;
  const hashedPassword = bcryptjs.hashSync(password, 10);
  const newUser = new User({ username, email, password: hashedPassword });
  try {
    await newUser.save();

    res.status(201).json("User created successfully!");
  } catch (error) {
    next(error);
    // res.status(500).json(error.message);
  }
});

router.post("/signin", async (req, res, next) => {
  const { email, password } = req.body;
  console.log("Request Body:", req.body); // Log the request body for debugging

  try {
    const validUser = await User.findOne({ email: email });
    if (!validUser) return next(errorHandler(404, "User not found!"));
    const validPassword = bcryptjs . com pareSync(password, validUser.password);
    if (!validPassword) return next(errorHandler(401, "Wrong credentials!"));

    // Log the JWT secret and token for debugging
    console.log("JWT Secret:", process.env.JWT_SECERET);

    const token = jwt.sign({ id: validUser._id }, process.env.JWT_SECERET);
    const { password: pass, ...rest } = validUser._doc;

    res
      .cookie("access_token_voiollamikatahansa", token, {
        httpOnly: true,
        secure: true,
        sameSite: "None",
        path: "/", 
      })
      .status(200)
      .json(rest);
  } catch (error) {
    next(error);
    // res.status(500).json(error.message);
  }
});

router.post("/google", async (req, res, next) => {
  try {
    const user = await User.findOne({ email: req.body.email });
    if (user) {
      const token = jwt.sign({ id: user._id }, process.env.JWT_SECERET);
      const { password: pass, ...rest } = user._doc;
      res
        .cookie("access_token_voiollamikatahansa", token, {
          httpOnly: true,
          secure: true,
          sameSite: "None",
          path: "/", 
        })
        .status(200)
        .json({ ...rest, newUser: false });
    } else {
      const generatedPassword =
        Math.random().toString(36).slice(-8) +
        Math.random().toString(36).slice(-8);
      const hashedPassword = bcryptjs.hashSync(generatedPassword, 10);
      const newUser = new User({
        username:
          req.body.name.split(" ").join("").toLowerCase() +
          Math.random().toString(36).slice(-4),
        email: req.body.email,
        password: hashedPassword,
        avatar: req.body.photo,
      });
      await newUser.save();
      const token = jwt.sign({ id: newUser._id }, process.env.JWT_SECERET);
      const { password: pass, ...rest } = newUser._doc;
      res
        .cookie("access_token_voiollamikatahansa", token, {
          httpOnly: true,
          secure: true,
          sameSite: "None",
          path: "/",
        })
        .status(200)
        .json({ ...rest, newUser: true });
    }
  } catch (error) {
    next(error);
  }
});

router.get("/signout", async (req, res, next) => {
  try {
    res.clearCookie("access_token_voiollamikatahansa");
    res.status(200).json("User has been logged out!");
  } catch (error) {
    next(error);
  }
});

export default router;

Hi there,

We cannot offer much assistance on code/configuration problems, which this problem appears to fall under. We can only broadly say that 404 errors are typically caused by invalid routing of the application, or a file that is not present where it should be on a Static Site.

This is not something Render is likely doing. Recommend reaching out to a community that specializes in your tech stack for more tailored assistance.

Any further questions on this should be sent from the Help link in the Dashboard menu, from the Render e-mail address associated with your account.

Regards,
Mike


Render Support Engineer, MT (UTC-6, UTC-7 in Winter)

This is my first time commenting here. My app works perfectly in development mode, but in the deployed version, I encounter an issue where cookies disappear. If I could somehow prevent this, everything would work fine in production as well. If any further information or code snippets are needed, I’m ready to provide them.

Hi there,

There are often many differences between a local development environment and an online server (e.g. configuration, versions, dependencies, environmental factors, etc.).

That being said, here are a couple community articles that discuss common issues with cookies that may offer some guidance:

Regards,
Mike


Render Support Engineer, MT (UTC-6, UTC-7 in Winter)

problem is not with my code but problem seems to be with render because i deployed my app to Vercel and everything works fine !

Hi there,

Each provider will offer an environment that works differently out-of-the-box. For example, our native runtimes will bundle a number of dependencies that other providers may not, whereas the opposite can also be true.

There is nothing Render is directly doing to remove your app’s cookies. As described in the second community link I provided, Render’s use of the onrender.com subdomain can sometimes indirectly cause issues with cookies, to which that link offers several approaches to resolve.

Regards,
Mike


Render Support Engineer, MT (UTC-6, UTC-7 in Winter)