How to check the information from the database using React - node.js

Question

I want to use my own API to check the information about email and password, but I don't know how to do that. Anything information that I put show up "Login" but I need to just show up "Login" if the information was the same that I registered in my database.
import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import { Link } from "react-router-dom"
const Login = () => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const handleSubmit = (e) => {
e.preventDefault()
const info = {email, password}
fetch('http://localhost:3333/login/', {
mode: 'no-cors',
method: 'POST',
headers: { "Content-Type": "application/json" },
body: JSON.stringify(info)
}).then((response) => {
console.log(response)
console.log("login")
}).catch(() => {
console.log("NO")
})
}
return (
<div className="all ">
<div className='button d-flex justify-content-center '>
<Link to="/" className="text-center btn btn-secondary btn-lg m-4">Login</Link>
<Link to="/register" className="text-center btn btn-secondary btn-lg m-4">Register</Link>
</div>
<p className='text-center'>Sign With:</p>
<div className="container d-flex justify-content-center">
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" value = {email} onChange={(e) => setEmail (e.target.value)} placeholder="Enter email" required/>
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" value = {password} onChange={e => setPassword(e.target.value)} placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</div>
</div>
);
}
export default Login;
My API is shown below and it's working fine and the login function is verifying well
const {
PrismaClient
} = require("#prisma/client");
const prisma = new PrismaClient();
const bcrypt = require('bcrypt');
module.exports = {
async createUser(req, res) {
try {
const {
firstName,
lastName,
email,
password,
age,
role
} = req.body
const salt = await bcrypt.genSalt();
console.log(salt)
const hash = await bcrypt.hash(password, salt)
console.log(hash)
const verifyemail = await prisma.UserInfo.findUnique({
where: {
email
}
})
if (verifyemail) {
return res.json({
error: "there is a email with the same name, please change."
})
}
const user = await prisma.UserInfo.create({
data: {
firstName: firstName,
lastName: lastName,
email: email,
password: hash,
age: age,
role: role
}
});
return res.json(user)
} catch (error) {
return res.json({
error
})
}
},
async login(req, res) {
try {
const {email, password} = req.body
const user = await prisma.UserInfo.findUnique({
where: {
email : req.body.email
}
})
if(user) {
const match = await bcrypt.compare(password, user.password)
if(match) {
return res.send("login")
}
else {
return res.send("There is something wrong with your password")
}
}
} catch (error) {
return res.json({
error
})
}
}
}

Answer 1

What I have understood from your question is that, no matter what username and password you are entering you are always ending up in the .then block, while if the username/password is wrong it should go to the catch block.
If I have understood that correctly, I would suggest updating your node code to handle this scenario. Fetch will only go in catch if there is a network error or CORS error, check this
With this, I would suggest you can add an else block in your Node code and add
return res.status(401).send("Icorrect password");
after this, in front end code, you can add
.then(response => /* check response status code and throw 'Incorrect' if 401 */ )