How to get api's response when posting data? - node.js

Question

I'm doing a React web site, with a node.JS REST Api, and actually there is something that I don't know how to do.
When I'm logging in, my React form make a POST request to my Api (considering it's a School Project so I'm working locally, my React app is on port 3000 and my Api is on port 8080), and when I'm submiting, I'm redirected on the response of my Api.
I'd like to be redirected to a page of my React App and receive the response of my Api (when I'm using res.redirect() I have the React page but not the Api response).
Did somebody know how to do it ?
Here is my React Form Component:
class Form extends Component{
constructor(){
super()
this.location = window.location.href
}
render(){
return(
<form action="http://localhost:8080/login" method="post">
<label for="identifier">Mail:</label>
<br/>
<input type="email" id="identifier" name="identifier"/>
<br/><br/>
<label for="password">Password:</label>
<br/>
<input type="password" id="password" name="password"/>
<input id="locator" name="locator" value={this.location} type="hidden"/>
<br/><br/><br/>
<button type="submit">Se connecter</button>
</form>
)
}
}
And here is my Api login route :
app.post('/login', (req, res) => {
console.log(req.body.identifier);
console.log(req.body.password);
client.connect().then(() => {
let newUser = { identifier: req.body.identifier}
return client.db(`${process.env.MONGODB}`).collection(`${process.env.MONGOCOLLECTION}`)
.findOne(newUser)
.then(
result => {
if(result == null){
console.log("No user found");
return res.status(401).json({ error: 'Utilisateur non trouvé !' });
}else{
console.log("User "+result.name+" "+result.firstName+" found");
if(req.body.password !== cryptr.decrypt(result.password)){
console.log("Mot de passe incorrect !");
return res.status(401).json({ error: 'Mot de passe incorrect !' });
}else{
const token = jwt.sign({
id: result._id,
username: result.identifier
}, "my_secret", { expiresIn: '3 hours' })
console.log(token)
return res.json({ access_token: token })
}
}
},
err => res.status(500).json({ err }),
);
})
.then(() => {
console.log("--------------------------------");
})
res.redirect(req.body.locator)
})

Answer 1

You can use XHR requests to handle API calls to server and fetching back data to render in your React component.
Instead of using action in form,
use
<form onSubmit={this.handleSubmit}>
and define a method which handles the submit logic.
async handleSubmit(e) {
const reponse = await
fetch('http://localhost:8080/login', {
method: 'POST',
mode: 'cors', //as your server is on different origin, your server will also have to enable CORS
body: JSON.stringify(formData) //formData will have to be extracted from your input elements before sending to server
})
const data = response.json() //This is the data from your server which you'll get without the need of redirecing.
}
fetch is the default js library to handle XHR request.
There are others as well like axios.