I am building a project in react and node, it includes having a persisting session after a login. It works perfectly fine after doing "npm run build" on the react client and moving the "build" folder contents into "public" folder on the server files.
Is there a way to make it work when running client separately? i'm thinking it might have something to do with CORS
On my server side i am using "npm i cors" package as shown below in the code included. Other than that I dont know what to do.
app.js relevant parts
var cors= require('cors');
var session = require('express-session');
app.use(session({
secret: 'vacations',
resave: false,
saveUninitialized: true,
cookie: { secure: false }
}));
app.use(cors());
login endpoint
router.post("/login", async (req, res) => {
console.log(req.body);
let response = {};
let adjustmentArray = [];
if(req.body.login == "admin" && req.body.password == "admin"){
console.log("Detected administrator login")
Member.findAll({
where:{
username: req.body.login,
password: req.body.password
}
})
.then(admin =>{
req.session.isLogged = 1;
req.session.firstname = admin[0].dataValues.firstname;
req.session.userid = admin[0].dataValues.id;
req.session.isAdmin = 1;
response.userid = admin[0].dataValues.id;
response.firstname = admin[0].dataValues.firstname;
response.isAdmin = 1;
adjustmentArray.push(response);
res.json(adjustmentArray);
})
.catch(err=>{
console.log(err);
console.log("err");
res.json([]);
})
}
clientside code
async sendLogin() {
let loginObj = {
login: this.props.usernamelogin,
password: this.props.passwordlogin
};
let response = await fetch("http://localhost:3000/members/login", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(loginObj)
});
let user = await response.json();
console.log(user);
if (user.length !== 0) {
if(user[0].isAdmin){
this.props.dispatchAdminLogin(user[0]);
alert("Hey boss")
this.setState({ loginmsg: "" });
this.props.history.push("/admin")
}
else{
this.props.dispatchLogin(user[0]);
alert("Logged in! Redirecting...");
this.setState({ loginmsg: "" });
this.props.history.push("/");
}
} else {
this.setState({
loginmsg: "Please check username/password and try again"
});
}
}
async componentDidMount() {
let response = await fetch("http://localhost:3000/checksession");
let user = await response.json();
console.log(user);
if (user.isLogged) {
this.props.dispatchLogin(user);
}
}
router.get("/checksession", async (req, res) => {
if (req.session.isLogged) {
Member.findAll({
where: {
id: req.session.userid,
username: req.session.firstname
}
})
.then(member => {
if (member.length != 0) {
let response = {};
response.isLogged = 1;
response.firstname = member[0].dataValues.firstname
response.userid = member[0].dataValues.id
res.json(response)
}
else {
//i think this code will never happen
console.log("didnt find member, killed session")
req.session.destroy();
res.json({isLogged:0});
}
})
.catch(err => {
//also pretty likely this never happens
console.log(err);
console.log("couldnt find member?");
res.json({isLogged:0});
});
}
else{
console.log("i didnt pass session check")
res.json({isLogged:0})
}
});
I want session to persist when running client and server on separate ports in seperate instances of visual studio.
