Login logic in React via Django Rest_auth requires password although submitted in body

Question

I implemented Django rest_auth to use it as authentication backend for my app. This works find when testing via Postman. However, if I now send a login POST request from the client (React) it returns

Success: {password: Array(1)}password: Array(1)0: "This field is required."length: 1[[Prototype]]: Array(0)[[Prototype]]: Object

When I log the transmitted formData in the submitHandler I get

{username: 'admin', password: 'test'}
password: "test"
username: "admin"

which to me looks fine. I'm not sure how to debug this and where the bug might be.

import {Fragment, useState, useReducer} from "react";
import {Link} from "react-router-dom";

// Initiate Form reducer
const formReducer = (state, event) => {
    return {
        ...state,
        [event.name]: event.value
    }
};

const Login = () => {

    const [formData, setFormData] = useReducer(formReducer, {});
    const [logging, setLogging] = useState(false);

    const submitHandler = event => {
        console.log(formData)
        event.preventDefault();
        setLogging(true);

        fetch('http://127.0.0.1:8000/api/user/auth/login/', {
            method: 'POST',
            body: JSON.stringify({formData}),
            headers: {'Content-Type': 'application/json'},
        })
            .then(res => res.json())
            .then(result => {
                console.log('Success:', result);
            })
    };

    return (
        <Fragment>
        <form onSubmit={submitHandler}>
            <div className="text-lg text-sx-purple-dark text-center mb-4">Login to your Salaryx Account</div>
            <div>
                <div className="relative top-3 left-4 pl-2 pr-2 text-sx-purple-dark-soft bg-sx-white-plain w-max">Username*</div>
                <input
                    type="text"
                    className="w-full mb-4 h-auto text-sm rounded md indent-2 outline-0 border-sx-pink border-2 focus:border-2 focus:border-sx-purple border-solid h-12"
                    autoCapitalize="none"
                    autoComplete="username"
                    autoFocus={true}
                    name="username"
                    required={true}
                    onChange={changeHandler}
                >
                </input>
            </div>

            <div>
                <div className="relative top-3 left-4 pl-2 pr-2 text-sx-purple-dark-soft bg-sx-white-plain w-max">Password*</div>
                <input
                    type="password"
                    className="w-full mb-4 h-auto text-sx-purple-dark-soft text-sm rounded md indent-2 outline-0 border-sx-pink border-2 focus:border-2 focus:border-sx-purple border-solid h-12"
                    autoComplete="current-password"
                    name="password"
                    required={true}
                    onChange={changeHandler}
                >
                </input>
                <Link className="" to="/auth/password_change/">
                    <div className="text-center text-xs opacity-40 flex justify-end relative -top-4">Forgot Password?</div>
                </Link>
            </div>
            <button className="bg-sx-pink w-full p-2 rounded hover:opacity-70" type="submit">Log In</button>
            <Link className="" to="/auth/signup">
                <div className="opacity-40 mt-2 text-center text-sm">No account yet? Sign Up!</div>
            </Link>
        </form>
        </Fragment>
    )
}

export default Login

Answer 1

You are creating a new object in the argument here:

body: JSON.stringify({formData}),

Resulting in body being:

{"obj":{"username":"username","password":"password"}}

Remove the curly brackets, and it should help.