Strapi login/register and authentication-CodePudding

I have a peculiar problem here guys. While working with strapi (first timer), I'm attempting to set up login and register, but I keep running into the same error, until I used the exact code example from the documentation, even then it only works on a condition.

When I do this, it works. that is when I hardcode the identifier and password. it works and I get the jwt.

 function fetchLogin(){
        await axios
                .post(url, {
                    identifier: "user",
                    password: "123456"
                })
                .then((response) => {
                    // Handle success.
                    console.log('Well done!');
                    console.log('User profile', response.data.user);
                    setUser(response.data.user)
                    console.log('User token', response.data.jwt);
                    setUserToken(response.data.jwt)
                })
                .catch((error) => {
                    // Handle error.
                    console.log('An error occurred:', error.response);
                    setLoginError(error.response)
                }); 
    }

But I used the input fields from the client, and I collect the correct data, I get an error. Here.

function fetchLogin(data){
        console.log(data)
        await axios
                .post(url, {
                    data
                })
                .then((response) => {
                    // Handle success.
                    console.log('Well done!');
                    console.log('User profile', response.data.user);
                    setUser(response.data.user)
                    console.log('User token', response.data.jwt);
                    setUserToken(response.data.jwt)
                })
                .catch((error) => {
                    // Handle error.
                    console.log('An error occurred:', error.response);
                    setLoginError(error.response)
                }); 
    }
//Heres the function that collects the input
const LoginSubmit = (e) =>{
        e.preventDefault()
        const data = {
            identifier: login.email,
            password: login.password 
        }
        const details = JSON.stringify(data)
        fetchLogin(details)
    }
// useState
const [login, setLogin]  = useState({
        email: '',
        password: ""
    })
// input fields
<div className="input-group input-group-sm mb-3">
                                        <span className="input-group-text" id="inputGroup-sizing-sm">Password</span>
                                        <input type="password" className="form-control"
                                         aria-label="Sizing example input" 
                                         value={login.password} 
                                         onChange={(e)=> setLogin({...login, password: e.target.value})}
                                         aria-describedby="inputGroup-sizing-sm"/>
                                    </div>

Everything checks out when I log data to console, but I get a validation error

 POST http://localhost:1337/api/auth/local 400 (Bad Request)
An error occurred: {data: {…}, status: 400, statusText: 'Bad Request', headers: {…}, config: {…}, …}

//the error message
errors: Array(2)
0: {path: Array(1), message: 'identifier is a required field', name: 'ValidationError'}
1: {path: Array(1), message: 'password is a required field', name: 'ValidationError'}

What I'm I doing wrong?

CodePudding user response：

should remove Json.Stringfy in LoginSubmit when call fetchLogin and use spread operator. Body of request must be {id:"", password:""}, not like {data: "{id:"",password:""}"}

so should use spread operator {...}, it do unpack elements of an object/array

ex:

const data = {name:"foo"}
const newData = {
    ...data,
    color: 'black'
};
//newData is {name: "foo",color:'black'};

solution:

//data is {identifier: "user",password: "123456"}  
function fetchLogin(data){
    await axios.post(url, { ...data })

equal:

function fetchLogin(data){
        await axios.post(url, {identifier: "user",password: "123456"})