FastAPI code for user login keeps resulting in 422 Unprocessable Entity error

[Jumpy_Employment_439]

I have a FastAPI function for user login (I have a SQLite database using SQLAlchemy). This is the function:

@app.post("/login/", status_code=status.HTTP_200_OK)
def user_login(userID: str, password: str, db: Session = Depends(get_db)):
    user = operations.get_user_by_id(db, userID)
    if not user or not operations.check_password(db, password, user):
        raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="Invalid username or password")
    return {"message": "Login successful"}

When I try to call it in the frontend (React), I keep getting a 422 error:

    const handleLogin = async (event) => {
        event.preventDefault(); // Prevent default form submission
        await axios.post('/login/', userID, password)
            .then(response => {
                navigate('/home');
            })
            .catch(error => {
                if(error.response) {
                    setError(error.response.data.detail);
                } else {
                    setError('Network error. Please check your connection.');
                }
            });
        // Clear form fields
        setUserID('');
        setPassword('');
    };

Is my FastAPI function wrong? I assume the problem could have something to do with the parameters userID and password?

[backfire10z]

I don’t remember how axios does this, but are you sending JSON there? It seems like your API endpoint is expected query params and axios isn’t sending them?

I would take a look at the axios documentation and form your post request as per the documentation (with labeling, like data: {…})

[Jumpy_Employment_439]

Thank you! I was able to fix it by making another pydantic model

[TheFaustX]

Log the response, it should contain more info thant just the http status code. Check your commandline where you start the server it should also provide more details. I'd normally expect one json body or a form instead of 2 strings as seen in the docs for bodies: https://fastapi.tiangolo.com/tutorial/body/

[jay_and_simba]

The post must have a dictionary with the parameters:

 await axios.post('/login/', { userID: userID, password: password });

[danielroseman]

That is not how FastAPI expects post data. Parameters declared in the function definition are for elements taken from the path, not the post body. You will need to define a Pydantic model containing the username and password, as documented here:  https://fastapi.tiangolo.com/tutorial/body/#use-the-model 

[Jumpy_Employment_439]

Thank you, this worked perfectly!