i´m creating a Authentication page with React and Express. I'm using JWT too.

I´ve made this route in the back:

server.js

...
app.use(
  cookieSession({
    name: "prode_session",
    secret: "MIOURI_PRODE_SECRET", //add to .env variable
    httpOnly: false,
  })
);
app.use(cors());
...

auth.routes.js

app.post("/signin", controller.signin);
user.routes.js

app.get(
    "/user",
    [authJwt.verifyToken],
    (req, res) => res.send(true)
  )

auth.controller.js

exports.signin = async (req, res) => {
  const user = await Users.findOne({
    where: { email: req.body.email },
  });

  try {
    if (!user) {
      return res.status(404).send({ message: "User Not found." });
    }

    const passwordIsValid = bcrypt.compareSync(
      req.body.password,
      user.password
    );

    if (!passwordIsValid) {
      return res.status(401).send({
        message: "Invalid Password!",
      });
    }

    const token = jwt.sign({ id: user.id }, config.secret, {
      expiresIn: 84000, //24hours
    });

    req.session.token = token;
    console.log(req.session);

    return res.status(200).send({
      isLogged: true,
      id: user.id,
      email: user.email,
      suscripcion: user.suscripcion,
      preference_id: user.preference_id,
      token,
    });
  } catch (error) {
    console.log(error);
  }
};

authJWT.js

verifyToken = async (req, res, next) => {
  let token = req.session.token;
  console.log(`THIS IS THE TOKEN: ${token}`);
  if (!token) {
    return res.status(403).send({
      message: "No token provided",
    });
  }
  jwt.verify(token, config.secret, (err, decoded) => {
    if (err) {
      console.log(err);
      return res.status(401).send({
        message: "Unauthorized!",
      });
    }
    req.id = decoded.id;

    next();
  });
};

const authJwt = { verifyToken };

module.exports = authJwt;

When I test this with POSTMAN, it works Ok, I mean, if first I try to make the GET request, the response is "No token provided", but if I signin first, generate the token and then make the GET request, I get true.

The problem is when I try to implement this in the front.

I have this Login component in React in which I make a POST request with the credentials:

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch("http://localhost:3000/signin", {
        method: "POST",
        mode: "cors",
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
        body: JSON.stringify({
          email,
          password,
        }),
      });
      const data = await response.json();
      console.log(data);

      if (data.isLogged && data.suscripcion === true && data.token) {
        
              await tokenAvailable()
        //navigate(`/masthead/${email}&${data.isLogged}&${data.id}`);
      } else if (data.isLogged && data.suscripcion === false) {
        navigate("/suscripcion", {
          state: { preference_id: data.preference_id },
        });
      } else {
        window.alert("Invalid Login");
      }
    } catch (error) {
      console.log(error);
    }
  };

async function tokenAvailable() {
    const user = await fetch("http://localhost:3000/user", {
      method: "GET",
      mode: "cors",
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
      },
    });

    const response = await user.json();
    setUser(await response);
    console.log(await response);
    return response;
  }

When I make the POST, the GET request is executed (tokenAvailable function) after receiving the response, but I receive "No token Provided" while I expect to receive "true" as in Postman.

From what I debug, the authJWT.js file, is not receiving nothing from the req.session.token. When I compare the headers from postman and the browser, in postan the SET-cookie key appears, but in the browser not.

postman:

browser:

I need some help here. I´ve been strugling with this for almost 3 days.

CodePudding user response：

I found a solution for this. Apparently, the HttpOnly Cookie approach works if the React app and the back-end server hosted in same domain. So we need to use http-proxy-middleware for local development.

I´ve tried to install the http-proxy-middleware but a lot of errors came, so I decided to store de JWT in the localstorage.