Cookies not saving on browser with nextjs and expressjs

Hey guys,

I am currently hosting my frontend Nextjs and backend Expressjs on separate web services here. I also have a postgres db for data and redis for session data. They are all hosted on same region.
backend: https://e-commerce-app-5yr5.onrender.com
frontend: https://e-commerce-app-front.onrender.com

The issue I’m having is the browser is not saving my session cookie. On my local machine I tested both frontend and backend while using the redis service via external url. I also tried using postman with the render hosted backend and it worked. It just doesn’t work when I try to use the render hosted frontend. The authenticating works, but cookies don’t get sent to browser.

Is the cause of this the same as everyone else and I need a custom domain? If so, do I need to get a custom domain for frontend, backend or both?

My backend session setup

// Redis client
const redisClient = createClient({
    url: process.env.REDIS_URL
});
redisClient.connect().catch(console.error);

const redisStore = new RedisStore({
    client: redisClient,
    prefix: "myapp:",
})

// Setup CORs
const corsOptions = {
    origin: process.env.FRONTEND_URL,
    credentials: true
};

app.use(cors(corsOptions));

//Setup session cookies
app.use(
    session({
        secret: process.env.SESSION_SECRET,
        saveUninitialized: false,
        resave: false,
        cookie: {
            maxAge: 1000 * 60 * 60,
            sameSite: 'lax',
            secure: true, // True for production
            httpOnly: true
        },
        store: redisStore,
    })
);

Frontend request

const response = await fetch(`${BACKEND_URL}/users/login`, {
  method: "POST",
  credentials: 'include',
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(login),
});
const auth = await response.json();

Sorry if I ask anything silly. First time trying to host a website.

Edit:
I tried hosting frontend on vercel to since it’s a completely different domain. Made sure to add CORs exception. But issue still persists, so I assume this is an issue with Next.js in production. If this is the wrong place for this problem, feel free to close my post. Any help would be much appreciated though :slight_smile:

Editv2: Didn’t realize I can host a production build locally. Tried it with production build locally and that doesn’t save cookies either. So it must be different way cookies work on dev vs prod

Ok, resolved this issue.
Found out that sameSite: ‘lax’ was the cause. Needed to be ‘none’ along with secure: true.

If there are any other better solutions, feel free to drop a reply :slight_smile:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.