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

Reactjs – Issue with httpOnly Cookies: Undefined Values in Server Logs

I’m encountering an issue with httpOnly cookies not being sent to the server. I’m developing a word reminder app with React and Express. When a user creates a new word deck, a request with httpOnly cookies should be sent, and the server logs the cookies. However, ‘undefined’ is logged.

Users can receive cookies when they log in, and the server sets cookies and sends them to the client.

server.post("/login", (req, res) => {
  const body = req.body;
  const username = body.username;
  const password = body.password;
  login(pool, username, password)
    .then((result) => {
      res.cookie("accessToken", result.accessToken, {
        httpOnly: true,
        sameSite: "lax",
      });
      res.cookie("refreshToken", result.refreshToken, {
        httpOnly: true,
        sameSite: "lax",
      });
      res.json(result);
    })
    .catch((reject) => res.json(reject));
});

When a user tries to create a new deck, the following code works:

async function createDeck(deckName) {
  const url = `http://localhost:8000/createDeck`;
  const option = {
    method: "POST",
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      deckName: deckName,
    }),
  };
  try {
    const response = await fetch(url, option);
    const jsonResponse = await response.json();
    console.log(jsonResponse);
  } catch (err) {
    console.log("err:", err);
  }
}
export default createDeck;

The server is logging the cookies:

server.post("/createDeck", (req, res) => {
  const accessToken = req.cookies.accessToken;
  const refreshToken = req.cookies.refreshToken;
  console.log(accessToken);
  console.log(refreshToken);
  // const verifiedResult = verifyToken(accessToken, refreshToken);
  // console.log(verifiedResult);
});

However, it logs ‘undefined.’ I can’t identify the problem. Please provide assistance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I successfully resolved the issue! It turns out, I was missing the credentials: "include" in the login function, which was the reason I couldn't obtain the tokens.

    export async function loginUser(username, password) {
  const url = `http://localhost:8000/login`;
  const option = {
    method: "POST",
    credentials: "include", //<- don't forget this!!
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      username: username,
      password: password,
    }),
  };
  try {
    const response = await fetch(url, option);
    const jsonRes = await response.json();
    return [jsonRes.success, jsonRes];
  } catch {
    return false;
  }
}

  2. 0

    Make sure you are using a cookie parser:

    const cookieParser = require('cookie-parser');
// ...
app.use(cookieParser());
// Your other middleware and routes...

    Also check on the client whether the token exists in the cookie And does the client send cookies to the server.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search