ошибка при авторизации пользователя react.js + express.js + postgres

Рейтинг: 0Ответов: 0Опубликовано: 25.06.2023

Пытаюсь сделать авторизацию пользователя и вроде все правильно, но в консоли пишет, что введены неверные данные, прикладываю код компонента 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>
        </>
    )
}

Ответы

Ответов пока нет.