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 did you find any solution for this..

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

@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 :).

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

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: "/"
} )

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 ;(

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?

I am facing the same issue. I have deployed the API on render but the token is not setting in cookies when I have deployed the frontend application on render as well. The token is set in cookies when running locally. Please explain as to why this happens & what can I do?

@phamtronghieu2002 @Vyomrana02

This is the login controller:

`
const loginUser = async (req,res) => {
try{
const {email,password} = req.body;

    if(!email || !password){
       return res.status(200).json({
         success:false,
         message:"Please Enter all fields"
       });
    }

    const user = await User.findOne({email});
    if(!user){
       return res.status(200).json({
         success:false,
         message:"User not found"
       });         
    }
    if(user.role !== "user"){
        return res.status(200).json({
            success:false,
            message:"Admin cannot login here"
        });
    }

    const checkPassword = await bcrypt.compare(password,user.password);

    if(!checkPassword){
       return res.status(200).json({
         success:false,
         message:"Invalid Credentials"
       });           
    }

    const token = jwt.sign({id:user._id,role:user.role},process.env.JWT_SECRET,{expiresIn:864000});

    res.status(200).json({
      success:true,
      message:"User logged in successfully",
      token,
      user:{
         id:user._id,
         name:user.name,
         email:user.email,
      }
    });

 }catch(error){
     return res.status(500).json({
         success:false,
         message:error,
     }); 
 }  

`

This is the index.js code :

`
db();
const PORT = process.env.PORT || 3000;
const app = express();

app.use(cors());
app.use(express.json());

app.get('/',(req,res)=>{
res.status(200).json({
success:true,
message:"Hello World"
});
});
`
This is the frontend code where I am setting the token:

`import React, { useState } from 'react'
import { Input, message } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import '../../components/utility/styles/Input.css'
import { useLoginMutation } from '../../redux/services/AuthApi';
import { useNavigate } from "react-router-dom";
import {Loading3QuartersOutlined} from '@ant-design/icons';
import Cookies from 'js-cookie';
import { useDispatch } from 'react-redux';
import { loginUser } from '../../redux/services/Constants';

const Login = () => {

const navigate = useNavigate();
const [passwordVisible, setPasswordVisible] = useState(false);
const [login,{isLoading:isLogging}] = useLoginMutation();
const [form,setForm] = useState({
email:"",
password:"",
});

const domain = "localhost";
const dispatch = useDispatch();

const handleLogin = async () => {
try{
const result = await login(form);
if(result?.data?.success){
message.success(result?.data?.message);
const token = result.data.token;
Cookies.set('token', token, { domain: domain, expires: 1 });
dispatch(loginUser());
navigate('/');
window.location.reload();
}else{
message.error(result?.data?.message);
}
}catch(error){
message.error("Some error occured");
}
}`

I recommend searching for "cookies not set using Render", since everyone here seems to be having problems with Render.

If anyone Searching for this issue so let me tell you simply delete the domain part from code (if your both subdomain on render) then it will set Cookie
const token = user.generateAuthToken();
const options = {
httpOnly:true,
secure:true,
sameSite:"None",
maxAge:30 * 24 * 60 * 60 * 1000,
}

return res
.status(200)
.cookie("token",token,options)
.json({token,user})
and also apply cors in app.js
app.set("trust proxy",1); credentials =true from app and in frontend after axios request withCredentials true then it will store