1

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

1 Answer 1

1
+50

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.