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

[ghost]

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

[AtuI-Yadav]

Hello,

I faced the same issue in production where I was not able set the cookie from backend.
Below workaround fixed the issue for me.

const options = {
httpOnly: true ,
secure: true,
sameSite: 'none',
domain: 'axz.onrender.com',
...
}

The catch was with the domain parameter:
I needed to assign the domain of my backend URL without "https://".

[Rudra-Sankha-Sinhamahapatra]

@AtuI-Yadav so I also test it in localhost so for local development what should I name the domain ?

[AtuI-Yadav]

Keep the domain name as Localhost

[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]

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

[Linhvjc]

wonderful!! Thank you

[ayush7801]

How did you manage to get the same subdomain?? I am stuck in the same problem and everything seems right except for different domains. Please help.

[slear08]

Thank, it works ❤

[imtanvir]

@Vyomrana02 How can I thank you? Thanks a lot, man. 🤝🤝🤝

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

[uxreboot]

did you find any solution for this? my issue is the same!

[pradeepbgs]

I think it's a problem of render, they suggest you should use a comman subdomain for both your backend and frontend

[uxreboot]

Yes, thank you, I tried using a custom domain and everything is working now!

[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 .

[abhayhub]

please let me know if you found any working soluction right now i am also facing the same error.

[vishaljadon]

i am also facing the same error so please provide me the solution.

[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.

[codegoggins]

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");
}
}`

[danillo7789]

The problem you are facing is that you are not setting your cookies on your login in your express app

First run 'npm install cookie-parser'

//Then use the cookie parser to set and retrieve cookies in your index.js
app.use(cookieParser());

//Then update your cors settings to send your cookies to the frontend
app.use(cors({
origin: ['http://localhost:3000', 'https://your-deployed-domain'], //and other domains you want to have access to your server
methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
allowedHeaders: ['Content-Type', 'Authorization'], // or you can set this to '*'
credentials: true, // this is crucial for sending your cookies to the frontend
}))

//in your login controller, after defining your token
const token = jwt.sign({id:user._id,role:user.role},process.env.JWT_SECRET,{expiresIn:864000});

res.cookie('token', token, {
httpOnly: true,
secure: false
sameSite: 'Lax'
path: '/',
})

//Then you can send your response
res.status(200).json({
success:true,
message:"User logged in successfully",
token,
user:{
id:user._id,
name:user.name,
email:user.email,
}
});

NOTE: The cookie configuration will only work when your express and react are in development mode (localhost). When they are both deployed, you would want to change your cookie setting to this:

  res.cookie('token', token, {
    httpOnly: true
    secure: true
    sameSite: 'none'         // if they are on the same domain, set this to 'strict'
    path: '/',
  })

[nitesh-lab]

As a solution what u can do is build your project and serve it as static files in your backend .This should resolve cookies issue as I didn't had much time that's why i just used this method.

[joeyguerra]

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

[nitesh-lab]

it is not really a problem on render even when my both front and backend were deployed on vercel cookies weren't working.

[Arpan783808]

I have deployed my backend on AWS still facing the same problem

[mr-zlaam]

I have deployed my backend on AWS still facing the same problem

Did you found the solution yet

My backend is deployed as a docker container on back4app
My frontend is deployed on vercel

[sailendrachettri]

I just figuired it out the issue in my code

Problem Statement: When I try to logout it is logging me in automitaclly, I was not able to replace the tooken with empty string

Solution: I tried adding sameSite: 'none', secure: true in logout api and now my code is working fine

// ROUTE 4: Handle logout router.post('/logout', (req, res) => { try { res.cookie('jwt_token', '', **{sameSite: 'none', secure: true}**).json('ok'); // replacing auth_token with empty string } catch (err) { res.status(500).json(err); } })

I added same code when saving the auth token in cookie

[iftekharalammithu]

Thank you for the solution. i spend 6 hours to find the solution all over the internet.Now Just Simple sameSite: "none" solve all the problem.. 😢😢

[eliya27]

I had the same issue, I had backend server in express js deployed in AWS and react frontend deployed in Vercel, cookies were working fine in localhost but in production they couldn't be sent to frontend when I login.
The solution was to remove domain attribute i.e res.cookie('token', token, {
path, httponly,
expires,
sameSite,
secure,
withCredentials
}). Just don't specify domain

[RCOM363]

I was having the same issue, after reading this thread I came to know about the sameSite property which I was not using. So simplify set sameSite:"none" , I kept the secure as true and I didn't add the domain property, this fixed my issue.

Basically the problem in my case was that, if the sameSite property is not set it defaults to lax , which allows cookies to be used by only GET requests, so when I changed it to none it solved the problem.

Thanks for your insights🙌

[mr-zlaam]

        {
          httpOnly: true,
          secure: true,
          maxAge: 7 * 24 * 60 * 60 * 1000, 
          sameSite: "none",
          domain: ".abc.vercel.app",
          path: "/home",
        }

Here is my code I am I am getting the same issue

[mr-zlaam]

I didn't find the solution but I did tackle this problem. This solution is just for those using Next js for the front end.
You can send cookies in response using the Post method so it remains secure instead of setting directly from the express js. And then you can set them in your cookies from the next js server

1. create an API folder in the app directory
2. Create a folder name set-cookie/route.ts and then add the following code

import { NextRequest, NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function POST(req: NextRequest) {
  const cookieStore = cookies();
  cookieStore.delete("cookie-name"); // you can delete or create cookie 
  return NextResponse.json({
    success: true,
    status: 200,
    message: "user logged out successfully",
  });
}

[phohoccode]

app.use(session({
secret: process.env.SESSION_SECRET,
store: myStore,
resave: false,
proxy: true,
saveUninitialized: false,
expiration: 360,
cookie: {
maxAge: 300 * 1000,
httpOnly: true,
secure: true,
sameSite: 'none'
}
}));

Reasons why cookies cannot be set on the client side reactjs deploy vercel -> unable to send connect.sid from client to server to authenticate user -> add secure: true, sameSite: 'none' -> works

[kin203]

sameSite: 'none' -> 4 hours to find it :<< my problem hss been resolved. Thank u a lot !

[sushil-sagar05]

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