'How to find whether user has signed up before login, in react, node and mariadb

I am new to react and mariaDB and this is my first attempt. I have created a sign up and sign in form in a single page. I used reactjs for frontend and node for backend and used mariaDB as database. I was able to insert username and password to databse when sign up. Now I want to check whether user has signed up when user try to login. I want to display an error as Wrong combination when username and password is not matched with registered users. I tried to display it, but it doesn't work.

here is my app.js in client side ,

import React, { useState } from 'react';
import './App.css';
import Axios from "axios";
function App() {
  const [usernameReg,setUsernameReg]= useState("");
  const [passwordReg,setPasswordReg]= useState("");


  const [username,setUsername]= useState("");
  const [password,setPassword]= useState("");
  const [loginStatus,setLoginStatus]= useState("");

  const register = () => {
    
    Axios.post("http://localhost:3001/register", {
  
      username:usernameReg,
      password:passwordReg,
    }).then((response) => {
      console.log(response);
    });
    };
      
    const login = () => {
    
      Axios.post("http://localhost:3001/login", {
    
        username:username,
        password:password,
      }).then((response) => {
        if(response.data.message){
          setLoginStatus(response.data.message);
        }
        else{
          setLoginStatus(response.data[0].username);
        }

      });
      };

  return (
    <div className="App">
      <div className='registration'>

        <label>Username</label>
        <br/>
        <input type="text" onChange={(e)=>{
        setUsernameReg(e.target.value)
        }}>
        </input>
        <br/>
        <label>Password</label>
        <br/>
        <input type="text" onChange={(e)=>{
        setPasswordReg(e.target.value)
        }}>
        </input>
        <br/>
        <button onClick={register}>Register</button>
        <br/>
      </div>
      <div className='login'>
<br/>
        <label>Username</label>
        <br/>
        <input type="text"
        onChange={(e)=>{
          setUsername(e.target.value)
          }}
        
        ></input>
        <br/>
        <label>Password</label>
        <br/>
        <input type="text"
        onChange={(e)=>{
          setPassword(e.target.value)
          }}
        
        ></input>
        <br/>
        <button onClick={login}>Login</button>
      </div>
      <h1>{loginStatus}</h1>
    </div>
  );
}

export default App;


here is my index.js in server side

const express = require("express");
const mariadb = require("mariadb");
const cors = require("cors");
const bodyParser = require("body-parser");

const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.json());


const db = mariadb.createPool({
  user: "root",
  host: "localhost",
  password: "NishR",
  database: "pedro",
});
app.post("/register", async (req, res) => {
 
  
    const username= req.body.username;
    const password = req.body.password;
     db.query(
        "INSERT INTO user (username,PASSWORD) VALUES(?,?)",
        [username,password],
        (err,result)=>{
            console.log(err);
        }
      );
      
    
  }
  );
  app.post("/login", async (req, res) => {
 
  
    const username= req.body.username;
    const password = req.body.password;
     db.query(
        "SELECT * FROM  user WHERE username=? AND password=?",
        [username,password],
        (err,result)=>{
            if (err){
            res.send({err:err});
            }
            if(result.length>0){
                res.send(result);
            }else{
                res.send({message:"wrong combination"});
            }
        }
      );
      
    
  }
  );



app.listen(3001, () => {
    console.log("Server is running");
  });

please help me to find the error.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source