Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – cookie sent from node backend but not shown on application tab

I am sending cookie in response from node backend to my frontend after jwt signing.
In the network tab on frontend , the set-cookie is visible and the cookie is been shown , but in the application tab , the cookie is not getting shown.
Why is it?

Backend Function Code for sending cookie :

import jwt from 'jsonwebtoken'

export const generateTokenAndSetCookie = (userId , res)=>{
    const token = jwt.sign({userId} , process.env.JWT_SECRET , {
        expiresIn : '15d', 
    } )
    res.cookie("jwt" , token , {
        httpOnly: false,
        secure: true,
        sameSite:'none'
    })
}

CORS Code :

app.use(cors({credentials : true , origin : 'http://localhost:3000'}));

Frontend Code for sending POST request for Login :

const handleSubmit = async (e) => {
        e.preventDefault();
        // console.log(formData);
        if (!formData.password || !formData.username) {
            toast("Please Fill All the Fields !");
            return;
        }

        try {
            setLoading(true);
            const res = await fetch(`${PROXY_URL}/api/auth/login`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(formData),
            });
    
            const data = await res.json();
            if (!res.ok){
                toast.error(data.error || "Failed to Login");
                setLoading(false);
                return;
            }
            setLoading(false);
            setIsError(false);
            // console.log(data);
            console.log(document.cookie);
            toast.success("User Logged In Successfully !");
            setFormData({
                username: "",
                password: "",
            })
        } catch (error) {
            setIsError(true);
            console.log(error);
        }
    };

Network Tab Picture :

Network tab pic

Application tab Picture at same time:

application Tab pic

What to do ?

Tags:

2

Answers


  1. 0

    Set secure to false, perhaps using an environment variable to differentiate between your dev environment and production.

    This is because the secure option ensures that the cookie is only sent over a secure connection which is indicated by "https://" in the address. In development mode, your connection is insecure since you’re accessing from "http://localhost".

    import jwt from 'jsonwebtoken'

export const generateTokenAndSetCookie = (userId , res)=>{
    const token = jwt.sign({userId} , process.env.JWT_SECRET , {
        expiresIn : '15d', 
    } )
    res.cookie("jwt" , token , {
        httpOnly: false,
        secure: process.env.NODE_ENV === 'production',
        sameSite:'none'
    })
}
    Login or Signup to reply.
  2. 0

    Looks like you’re having some trouble setting up cookies, so let’s just try with all the cookie options as I previously had a similar kind of issue.

    // Set cookie options
  const cookieOptions = {
    // httpOnly: true, // Prevents client-side access to the cookie
    sameSite: "None", // Allows cross-origin requests to include the cookie
    secure: true, // Ensures the cookie is only sent over HTTPS
    domain: "192.168.99.62", // Set to your server's domain, do not type localhost, use your IP instead
    path: "/", // Cookie is valid for all routes
    expires: new Date(Date.now() + 3600000), // Cookie expires in 1 hour (adjust as needed)
  };

  // Set the cookie
  res.cookie("authToken", jwtToken, cookieOptions);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search