i keep receiving
inSession:false
https://i.sstatic.net/4IW0f.png
when attempting to log in, it is expected to return true.
I am utilizing express session, in combination with postges and sequalize.
I have logged the state values and they are being rendered correctly, so they are not undefined.
A more detailed error
Proxy error: Could not proxy request /api from localhost:3000 to http://localhost:5000/ (ECONNREFUSED).
routes/users.js (manages the login process)
router.post('/login', function(req, res, next) {
const email = req.body.email;
const password = req.body.password;
User.findOne({
where: {email: email}
}).then( user => {
if(!user){
res.status(200).send({ incorrectEmail: true, inSession: false, msg: "Incorrect Email" })
}else if(!user.validPassword(password)){
res.status(200).send({ incorrectPassword: true, inSession: false, msg: "Incorrect Password" })
}else{
res.status(200).send({
inSession: true, msg: "Logged in!", loggedEmail: user.email
})
}
}).catch(err => next(err))
});
signIn.js Manages the Front End.
import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import axios from 'axios';
class signIn extends Component{
constructor(props){
super(props)
this.state = {
email:"",
password: "",
loggedEmail:"",
loginError: "",
userLoggedIn: false,
emailBlank: true,
passwordBlank: true,
emailInvalid: false,
passwordInValid: false,
}
this.handleChange = this.handleChange.bind(this);
}
handleChange = (e) =>{
e.preventDefault();
this.setState({
[e.target.name]: e.target.value
});
}
handleSubmit = () => {
this.setState({
email: this.state.email,
password: this.state.password
});
if (!this.state.emailBlank && !this.state.passwordBlank){
axios.post('/api/users/login',{
email: this.state.email,
password: this.state.password
}).then ( res => {
if (res.data.incorrectEmail|| res.data.incorrectPassword ){
this.setState({ loginError: res.data.msg})
}
this.setState({ userLoggedIn: res.data.inSession, loggedEmail: res.data.loggedEmail})
}).catch( err => console.log(err))
}else{
this.setState({ emailInvalid: true, passwordInValid: true})
console.log( this.state.emailInvalid, this.state.passwordInValid)
}
}
render(){
return (
<div style={ {padding: '20px 100px'}}>
<h1>Sign In</h1>
<form onSubmit={this.handleSubmit}>
<TextField
id="outlined-name"
label="Email"
className=""
style={{width: 560}}
name="email"
value={this.state.email}
onChange={this.handleChange}
margin="normal"
variant="outlined"
/>
<br></br>
<TextField
id="outlined-name"
label="Password"
name="password"
type="password"
style={{width: 560}}
className=""
value={this.state.password}
onChange={this.handleChange}
margin="normal"
variant="outlined"
/>
<br></br>
<button type="submit"> Submit </button>
</form>
</div>
);
}
}
export default signIn;
server ...
app.use(session({
key:'user_sid',
secret: 'something',
resave: false,
saveUninitialized: false,
cookie: {
expires: 600000
}
}))
app.use((req, res, next) => {
if (req.cookies.user_sid && !req.session.user){
res.clearCookie('user_sid');
}
next();
})
sessionChecker = (req, res, next) => {
if (req.session.user && req.cookies.user_sid){
res.status(200).send({ inSession: true});
} else {
next();
}
}
app.get('/api', sessionChecker, (req, res) => {
res.status(200). send({ inSession: false });
});
app.use('/api/users', userRoute )
App.js (frontend app.js)
class App extends Component {
constructor(props){
super(props);
this.state = {
inSession: false,
loggedEmail: "",
}
}
componentDidMount() {
this.checkInSession()
}
checkInSession = () => {
axios.get('/api').then((res) => {
this.setState({ inSession: res.data.inSession });
}).catch(err => console.log(err));
}
...