local Passport and express backend works when using postman but not when using react and react-query frontend

Question

When using postman the backend is working correctly however when using react the backend is sending an empty object.

My desired flow; passport login endpoint backend redirects to the getUser endpoint and returns the user information along with the session cookie, the user information is then stored with react query. This works when using postman

When using my react front end I am receiving an empty object instead of the user data.

I have console logged the steps and see that the front end is sending the login data correctly to the login passport endpoint the data is sent to the serialize function but is not staying. Upon redirect to the user endpoint the data(req.user) is console logging as undefined.

Front End

export async function login({ username, password }) {
  console.log("in apiAuth", username, password);
  try {
    const response = await axios.post(
      "http://localhost:3000/users/sessions",
      {
        username,
        password,
      },
      {
        withCredentials: true,
        headers: {
          "Content-Type": "application/json",
          Accept: "*/*",
        },
      }
    );
    console.log(response);
    return response;
  } catch (error) {
    console.error(error);
  }
}

backend

const bodyParser = require("body-parser");
const session = require("express-session");
const cors = require("cors");
module.exports = function (app, passport) {
  app.use(
    cors({
      origin: "http://127.0.0.1:5173", // Replace with the URL of your front-end app
      credentials: true, // This is important for cookies, authorization headers with HTTPS
      sameSite: "none",
    })
  );
  app.use(bodyParser.urlencoded({ extended: true }));
  app.use(bodyParser.json());
  app.use(bodyParser.raw({ type: ["image/jpeg", "image/png"], limit: "5mb" }));
  app.use(
    session({
      name: "app",
      secret: "TOPSECRET",
      resave: false,
      saveUninitialized: true,
    })
  );
  app.use(passport.initialize());
  app.use(passport.authenticate("session"));
};

import { useMutation, useQueryClient } from "@tanstack/react-query";
// import { useNavigate } from "react-router-dom";
import { login as loginAPI } from "../../services/apiAuth";
export function useLogin() {
  const queryClint = useQueryClient();
  // const navigate = useNavigate();
  const { mutate: login, isLoading: isLoggingIn } = useMutation({
    mutationFn: ({ username, password }) => loginAPI({ username, password }),
    onSuccess: (user) => {
      console.log(user);
      queryClint.setQueryData(["user"]);
      // navigate("/landing", { replace: true });
    },
    onError: (err) => {
      console.error("ERROR in login", err);
    },
  });
  return { login, isLoggingIn };
}

Backend

/* Auth */
  app.post(
    "/users/sessions",
    pauth("local", {
      successRedirect: "/user",
    })
  );

userController

async function get(req, res, next) {
  try {
    console.log("inget", req.isAuthenticated());
    res.json(await user.get(req.user));
  } catch (err) {
    console.error(`something happened while editing user`, err.message);
    next(err);
  }
}

When using postman I am given the req.user object, but my react front is returning an empty object.

Answer 1

When making requests from your React frontend to the backend, ensure that CORS (Cross-Origin Resource Sharing) settings are configured to allow credentials (cookies) to be sent with requests. This is necessary because your frontend and backend are served from different origins during development.

// On your Express backend
const corsOptions = {
  origin: 'http://localhost:3001', // or your React app's origin
  credentials: true, // to allow sending of cookies
};
app.use(cors(corsOptions));