Entonces, estoy tratando de validar si el usuario y la contraseña insertados están en la base de datos de la API; por ahora, mi código solo solicita un nombre de usuario y una contraseña y le da un token proporcionado por la API, incluso si el usuario no existe. Mi problema es cómo llamar a la API para validar si el usuario existe o no. Estoy tratando de crear un ciclo if para comunicarme con la API, pero no tengo ninguna idea. Este es mi código:

 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;