cookies doesn't set after deploying it to render and my react app on vercel

[Pradeepbgs]

so here is my app.js where you can see how i have set CORS
app.use(cors({ origin: 'https://fsvideo.vercel.app', credentials: true, }))

and here is my login controller -
`const loginUser = asyncHandler(async(req, res) => {
const {username, email, password} = req.body

if(!(username || email)){
  throw new apiError(400,"Username or email is required")
}

const user = await User.findOne({
  $or: [{email}, {username}]
})

if(!user){
  throw new apiError(404,"User not found")
}

const isPasswordValid = user.isPasswordCorrect(password)
if(!isPasswordValid){
  throw new apiError(401,"Invalid User Password")
}

const {accesToken, refreshToken} = await generateAccessAndRefreshToken(user._id)

const loggedInUser = await User.findById(user._id)
.select("-password -refreshToken")

const options = {
httpOnly: true,
secure: true,
sameSite: "none",
domain: "https://fsvideo.vercel.app"
}

return res.status(200)
.cookie("accessToken", accesToken, options)
.cookie("refreshToken", refreshToken, options)
.json(
new apiResponse(
200,
{
user: loggedInUser,
accessToken: accesToken,
refreshToken: refreshToken,
},
"User logged in successfully"
)
)
})
`

im not able to set cookie on browser , when i log in it shows cookie on application panel and then goes away.

please help

[abneribeiro]

It seems like you're having trouble with setting cookies in your Express.js application. Here are a few things you could check:

Secure Flag: You're setting the secure flag to true in your cookie options. This means the cookie will only be sent over HTTPS. If you're testing locally over HTTP, the cookie will not be set. Try setting secure to false for local testing.

SameSite Attribute: You're setting sameSite to "none", which means the cookie will be sent in all contexts, i.e in responses to both first-party and cross-origin requests. If your site isn't served over HTTPS, this setting can cause cookies to be rejected. Try setting sameSite to "lax" or "strict" for testing.

Domain Attribute: The domain attribute in the cookie determines which hosts are allowed to receive the cookie. If you're testing locally, this could be the issue. Try removing the domain attribute for testing.

Browser Settings: Ensure your browser is configured to accept cookies. Some browsers have settings that can block cookies, especially third-party ones.

Check CORS Settings: Make sure your CORS settings are correct. You need to allow credentials in your CORS middleware, which you're already doing. But also ensure the client is making requests with credentials: 'include'.

Here's how you can modify your cookie options for local testing:

const options = {
  httpOnly: true,
  secure: false, // set to false for local testing
  sameSite: "lax", // try "lax" or "strict" for testing
  // remove domain for local testing
}

Remember to revert these changes for production.

[Pradeepbgs]

sorry sir for not mentioning that cookies works fine on localhost but not in production ,
i have deployed my backend code on render and frontend on vercel and im unable to set cookies

[Vyomrana02]

@Pradeepbgs did you find any solution for this..

[Pradeepbgs]

No

[iamrommy]

@Pradeepbgs I am facing the exact same issue. Did you find any solution?

[phamtronghieu2002]

i facing same issue with deploy at render

[Vyomrana02]

@iamrommy , @phamtronghieu2002 try doing like this

res.cookie('accessToken', token, {
httpOnly: true,
expires: token.expiresIn,
secure:true,
sameSite:'none',
}).status(200).json({ token, data: { ...rest, password: sendata, roles: role }, role })

i added this 2 things secure:true, sameSite:'none', and it worked :).

[phamtronghieu2002]

thanks for reply,but im try added secure:true, sameSite:'none' ,it still not woriking
my client when i deployed to render: ABC.abc.xyz
my server when i deployed to render: XYZ.abc.xyz

this is my code when i set cookies:
res .cookie("accessToken", access_token, { secure: true, path: "/", expires: new Date(new Date().getTime() + 31557600000), same_site: "none", httpOnly: true, domain: ".abc.xyz" })

[phamtronghieu2002]

yay i solve this proplem i change same_site: "none"-> to sameSite:'none'

[Linhvjc]

wonderful!! Thank you

[joeyguerra]

Consider setting samesite to lax. None is pretty liberal. https://stackoverflow.com/questions/59990864/what-is-the-difference-between-samesite-lax-and-samesite-strict#59995877

[phamtronghieu2002]

thanks for your reply:
I read on the page:Strict not allows the cookie to be sent on a cross-site request or iframe. Lax allows GET only. None allows all the requests, but secure is required.

[wesleytodd]

Hey folks! Did you ask vercel for support on this? They are a for profit company with a paid support team. This forum is run by unpaid volunteers. I see that this discussion is getting a lot of folks in it recently and I don't have time to investigate but if your problem is on vercel then I would start with asking them.

[iamrommy]

Does somebody know how to get render support on it. Because the problem is clearly with the backend.
When i set cookies without setting the domain attribute then the cookie is automatically set for backend's domain which is then obviously not accessible for frontend. Like this :-
res.cookie('name', value, {
expires: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000),
secure: true,
httpOnly: true,
sameSite:"none",
// domain: '.abc.vercel.app',
path: "/"
} )

But when i set cookie with domain attribute then the cookie is not even set ( or may be it is being set but for wrong Url). Like this :-
res.cookie('name', value, {
expires: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000),
secure: true,
httpOnly: true,
sameSite:"none",
domain: '.abc.vercel.app',
path: "/"
} )

[AniruddhUdayan]

Did anyone find the solution , this is my cookie options- const cookieOptions = {
maxAge: 15 * 24 * 60 * 60 * 1000,
secure: true,
sameSite: 'none',
httpOnly: true,
}; I have hosted my backend in render and frontend in vercel and I'm unable to access cookies in frontend , it works fine on running locally ;(

[nitesh-lab]

Did somebody got any answer I am also getting same error about cookie both frontend and backend are deployed on vercel cookie does not sets on browser under application tab all the methods out there are not working .

[joeyguerra]

Httponly = true means the cookie will be sent on requests, but the front end JavaScript code won’t be able to access it.

how do you know the cookie is not being sent? Are you not seeing it on the backend in subsequent requests? Or are you trying to read document.cookie in the front end?

[vivinprabhu]

By inspecting the browser, in application tab (in the row of console) , by selecting cookies dropdown and select the current website it list down the cookies. There we can see our cookie, is httpOnly or not.