ошибка при авторизации пользователя react.js + express.js + postgres
Пытаюсь сделать авторизацию пользователя и вроде все правильно, но в консоли пишет, что введены неверные данные, прикладываю код компонента react с формой login и файл с серверными запросами, в чем ошибка?
const express = require("express");
const app = express();
const cors = require("cors");
const bcrypt = require('bcrypt');
const pool = require("./db");
const PORT = process.env.PORT || 8080;
app.use(cors());
app.use(express.json());
app.listen(PORT, () => {
console.log("server work");
})
// add user function
app.post("/registartion", async (req, res) => {
try {
const { username, password, email } = req.body;
const saltRounds = 10;
// Checking if the user is in the database
const existingUser = await pool.query('SELECT * FROM users WHERE email = $1', [email]);
if (existingUser.rows.length > 0) {
return res.status(409).json({ message: 'Этот email уже занят' });
}
// Hashing the password
const hashedPassword = await bcrypt.hash(password, saltRounds);
const createNewUser = await pool.query("INSERT INTO users (username, password, email) VALUES ($1, $2, $3)", [username, hashedPassword, email]);
res.json(createNewUser.rows[0]);
} catch (err) {
console.error(err.message)
}
})
app.get("/login", async (req, res) => {
const { email, password } = req.body;
try {
console.log(typeof email);
// Проверяем, есть ли пользователь с таким логином
const user = await pool.query('SELECT * FROM users WHERE email = $1', [email]);
const hashedPassword = user.rows[0].password;
// Сравниваем хешированный пароль с введенным пользователем
const isPasswordMatched = await bcrypt.compare(password, hashedPassword);
if (!isPasswordMatched) {
return res.status(401).json({ message: 'Неверный логин или пароль' });
}
// Создаем токен для аутентификации пользователя
const token = jwt.sign({ email }, 'secret_key');
res.status(200).json({ token });
} catch (err) {
console.error(err.message)
}
})
import React, { useState } from 'react'
import styles from "./LoginPage.module.css"
import NavBar from '../../UI/NavBar/NavBar'
import hidden_icon from "./assets/hidden_icon.svg"
import visibility_off from "./assets/visibility_off.svg"
import classNames from 'classnames';
export default function AuthPage() {
// work with express
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const [check, setCheck] = useState(false);
const handleEmailChange = (event) => {
setEmail(event.target.value);
};
const handlePasswordChange = (event) => {
setPassword(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
// Send a request to the server to check authorization data
fetch('http://localhost:8080/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
password,
}),
})
.then((response) => {
if (response.ok) {
return response.json();
} else {
console.log(response)
throw new Error('Неверные данные при входе');
}
})
.then((data) => {
// Saving a JWT token in local storage
localStorage.setItem('token', data.token);
console.log('Успешный вход в систему');
})
.catch((error) => {
console.error(error);
});
};
// hide password
const [hidePassword, setHide] = useState(true);
const seePassword = () => {
setHide(!hidePassword)
}
return (
<>
<NavBar menu_data_first={'Регистрация'} btn_data={'Регистрация'} btn_data_href={'/registration'} menu_data_first_href={"/registration"}/>
<div className={styles.auth_page}>
<div className={styles.title_block}>
<h1>Вход</h1>
</div>
<form className={styles.auth_page_form} onSubmit={handleSubmit}>
<div className={styles.input_block}>
<input type="email" placeholder='Email' className={styles.input_field} value={email} onChange={handleEmailChange}/>
</div>
<div className={!check ? styles.input_block : styles.input_block_false} >
<input type={!hidePassword ? "text" : "password"} placeholder='Пароль' className={classNames(styles.input_field)} value={password} onChange={handlePasswordChange}/>
<div className={styles.function_block} onClick={seePassword}>
<img src={!hidePassword ? visibility_off : hidden_icon} alt="" className={styles.hidden_icon}/>
</div>
</div>
<button className={styles.submit_button} type='submit'>Войти</button>
</form>
</div>
</>
)
}
Источник: Stack Overflow на русском