So I'm trying to validate if the user and password inserted are in the API database for now my code only asks for a username and a password and gives it a token given by the API even if the user does not exist. My problem is how to call the API to validate if the user exists or not. I'm trying to create an if cycle to communicate with the API but I'm not getting anywhere thoughts? This is my code:

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import"./App.css";
const Login = () => {
  const [username, setUsername] = useState("");
  const [Password, setPassword] = useState("");
  const [error] = useState(null);
  const [loading] = useState(false);
  const navigate = useNavigate();

  const handleLogin = () => {
    console.log("name------->", username);
    console.log("pass------->", Password);


    var axios = require("axios");
    var data = JSON.stringify({
      "password": Password,
      "username": username,
    });

    var config = {
      method: "post",
      url: "https://api.secureme.pt/api/v1/auth/login",
      headers: {
        "Content-Type": "application/json",
      },
      data: data,
    };

    axios(config)
      .then(function (response) {
        console.log("token----->", response.data.token);
        sessionStorage.setItem("token", response.data.token);
        navigate("/home");
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  return (
    <div className="Login">
      <div className="title">
      Login
      </div>
      <br />
      <br />
      <div>
        Username: <br />
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        Password: <br />
        <input
          type="password"
          value={Password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <br />
      {error && <div className="error">{error}</div>}
      <input className="button"
        type="button"
        value={loading ? "Loading..." : "Login"}
        disabled={loading}
        onClick={handleLogin}
      />
    </div>
  );
};
export default Login;

CodePudding user response：

I would 100% add that logic on the server end.
So your login endpoint: https://api.secureme.pt/api/v1/auth/login, would contain logic like;

1. Get username and password.
2. Check if username and password exist in database.
3. If so, return access token.
4. If not, handle accordingly by returning a failed auth error code.

That being said, if you're persistent to do it on the front end. Without knowing what database you're using - it's difficult to share any examples.

But in your handleLogin() function, before your call the login endpoint with Axios, just before that - check if the username and password exist in the database.

To do this, obviously depending on the database - you would have to install/import relevant package(s) to make that request.

Another solution would be to have a separate endpoint on the server end that would check if the credentials exist and return a boolean.