React, Node: Variable shows undefined on app.post() - node.js

Question

Not sure if I've done it correctly on the server or client side, but in the client side when I console.log(values) they appear, but in server, I get undefined. But when i do enter the right credentials for a user in the database i get status:ok, so something is found. And also a extra bug is i cannot to the post request twice, then i get the error: Error: Cannot enqueue Handshake after invoking quit.
Client Code:
class Login extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
const email = data.get('email');
const password = data.get('password');
fetch('/authentication', {
method: 'POST',
body: JSON.stringify({
"email": email,
"password": password
}),
}).then(function (response) {
if (response.ok) {
alert("Login Successful!");
} else {
console.log("Failed");
}
});
console.log("Email: " + email);
console.log("pwd: " + password);
}
render() {
return (
<form className="col s12 m12 l12" onSubmit={this.handleSubmit}>
<div className="row">
<div className="col s12 center-align">
<img className="logo" src="images/bibdata-center.png" alt="BibData Logo"/>
</div>
<div className="input-field col s12">
<i className="material-icons prefix">email</i>
<input id="email" name="email" type="email" className="validate" onChange={this.handleEmailChange}/>
<label htmlFor="email">Email</label>
</div>
</div>
<div className="row">
<div className="input-field col s12">
<i className="material-icons prefix">lock</i>
<input id="password" name="password" type="password" className="validate" onChange={this.handlePasswordChange}/>
<label htmlFor="password">Password</label>
</div>
</div>
<div className="row">
<div className="col s12 m6 l6 center-align">
<button className="btn waves-effect btn-large waves-light" type="submit" value="Submit" name="action">Sign in
<i className="material-icons right">send</i>
</button>
</div>
<div className="col s12 m6 l6 center-align">
<button className="btn waves-effect btn-large waves-light blue" type="submit" name="action"
onClick={() => renderReactComponent(newUser, 'root')}>
Register
</button>
</div>
</div>
<div className="row">
<div className="col s12 center-align">
<a href="#" onClick={() => renderReactComponent(forgotPassword, 'root')}>
<span className="helper-text grey-text text-darken-1"
data-error="wrong" data-success="right">
Forgot password?
</span>
</a>
</div>
</div>
</form>
);
}
}
And Server Code:
app.post('/authentication', function (req, res) {
connection.connect();
let email = req.body.email;
let password = req.body.password;
console.log(email);
console.log(password);
connection.query('SELECT * FROM user WHERE email = ? AND password = ?',
[email, password], function (error, results, fields) {
if (error) {
return res.status(500).send(error);
}
return res.send({ error: false, data: results, message: 'ok'})
});
connection.end();
});
All help will be appreciated!

Answer 1

When you make your fetch call to /authentication endpoint, you are sending serialized JSON data in your request body. The server however has no means of knowing that you have actually sent an JSON. When posting JSON, you must indicate that by providing appropriate content-type header.
In this case your fetch options (2nd param) should have one more property like this:
...
headers: {
"Content-Type": "application/json",
},
...
This is assuming, you have already setup body-parser or another similar module on your server side code which can parse JSON request body.