I have a flask backend running with an api to handle logins with jwt’s. The flask function is as follows:
@user.route('/login')
# @cross_origin()
def login():
email = request.args.get("email", None)
password = request.args.get("password", None)
stored_user = User.query.get(email)
if stored_user != None and check_password_hash(stored_user.password, password):
print('logged in')
access_token = create_access_token(identity=email)
resp = jsonify({'login': True, 'Error': 'User Authentication Success'})
set_access_cookies(resp, access_token)
return "hello", 200
print("failed to login")
return jsonify({'login': False, 'Error': 'User Authentication Failed'})
It appears to create the token without issue, and respond successfully. The problem arises from the react frontend. Which at the moment is as follows:
import React, { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";
import Stack from "react-bootstrap/Stack";
import Button from "react-bootstrap/Button";
export default function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [response, setResponse] = useState({})
function validate(email, password) {
if (email.length > 0 && password.length > 0) {
return true
}
return false
}
function submit() {
if (validate(email, password)) {
var api_url = "http://localhost:5000/api/user/login?email=" + email + "&password=" + password
console.log("The url:", api_url)
fetch(api_url)
.then(res => {
console.log("res:", res)
return res.json()
})
.then(res => setResponse(res))
.catch(err => console.log(err))
} else {
console.log("login does not meet requirements")
}
}
useEffect(() => {
console.log(3)
if (Object.keys(response).length === 0) {
console.log("no response")
} else {
if (response.login === false) {
// display "incorrect email or password"
console.log("response:", response)
console.log("incorrect login")
} else {
// redirect to wherever
console.log("logged in")
}
}
}, [response])
return (
<div className="Login">
<Form onSubmit={submit}>
<Stack gap={3}>
<Form.Group controlId="email">
<Form.Label>Email</Form.Label>
<Form.Control
autoFocus
size="lg"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</Form.Group>
<Form.Group controlId="password">
<Form.Label>Password</Form.Label>
<Form.Control
size="lg"
type="password"
value={password}
onChange={(p) => setPassword(p.target.value)}
/>
</Form.Group>
<Button size="lg" type="submit">
Login
</Button>
</Stack>
</Form>
</div>
)
}
The HTML awaits a submit action, at which it executes the submit function. The submit function awaits a response via fetch from the flask api point /login. To handle fetch being “async”, I await the return and set response to the response. When response is changed, the useEffect function is executed logging the appropriate message. The problem is that I am: a) always when logging in with valid credentials, b) sometimes when logging in with invalid credentials which throw the correct response at other times; receiving this error thrown by the fetch catch:
Why am I receiving this error, and if appropriate, where is my logic mistaken?
I at first thought this was a CORS error but am not receiving a CORS error message in google console.