Login Authentication Error 400 Bad Request when logging in

System Information
  • Strapi Version: 3.15
  • Operating System: Windows
  • Database: GRAPHQL/APOLLO 3
  • Node Version: 14.16
  • NPM Version:
  • Yarn Version: 1.22.10

Hi I’ve been able to set up the registration through strapi using react native and apollo 3 client and the users are updated onto the website however once I try to log the user in I get a error 400 BAD REQUEST and I have no idea why I’ve went through my code so many times and everything looks fine and I thought it could be something to do with roles and permissions on the strapi server side of the project but I am really unsure what to do. I’ve added a number of screenshots of my code and the strapi server side options.

Login Code:

function LoginPage({navigation}) {

      const { login } = React.useContext(AuthContext);

      const [email, setEmail] = React.useState('');

      const [password, setPassword] = React.useState('');

      const [loading, setLoading] = React.useState(false);

  return (

    <ImageBackground style={styles.background}>  

          <View style={styles.email}>

          <TextInput

          placeholder="Enter Email Address"

          placeholderTextColor="grey"

          type={email}

          onChangeText={setEmail}/>

          </View>

          <View style={styles.password}>

          <TextInput secureTextEntry={true} style={styles.default}

          autoCapitalize="none"

          autoCorrect={false}

          placeholder="Enter Password"

          placeholderTextColor="grey"

          type={password}

          onChangeText={setPassword}/>

          </View>

    {/* Login and register buttons */}

      <View style={styles.buttonContainer}>

      <LoginButton text=' Register '  onPress={() => navigation.navigate("Register")}/>

      <LoginButton text='    Login    ' onPress={async () => {

            try {

                setLoading(true);

                await login(email, password);

            } catch (e) {

                setLoading(false);

                console.log(e);

            }

        } } />

      </View>

Registration Code:

function RegistrationForm({navigation}) {

    const { register } = React.useContext(AuthContext);

    const [email, setEmail] = React.useState('');

    const [password, setPassword] = React.useState('');

    const [loading, setLoading] = React.useState(false);

    return (

        <ImageBackground style={styles.background}> 

        {/* Email and password entry boxes */}     

        <View style={styles.email}>

          <TextInput

          placeholder="Enter Email Address"

          placeholderTextColor="grey"

          type={email}

          onChangeText={setEmail}/>

          </View>

          <View style={styles.password}>

          <TextInput secureTextEntry={true} style={styles.default}

          autoCapitalize="none"

          autoCorrect={false}

          placeholder="Enter Password"

          placeholderTextColor="grey"

          type={password}

          onChangeText={setPassword}/>

          </View>

        

        <View style={styles.buttonContainer}>

        <LoginButton style={styles.buttonContainer2} text=' Sign Up ' onPress={async () => {

            try {

                setLoading(true);

                await register(email, password);

                navigation.pop();

            } catch (e) {

                setLoading(false);

                console.log(e);

            }

        } } />

App.js Code:

export default function App() {

  console.log(useDimensions());

  const[state, dispatch] = React.useReducer(

    (state, action) => {

      switch(action.type) {

        case 'SET_USER':

          return {

            ...state,

            user: {...action.payload},

          }

          default: 

          return state;

      }

    },

    {

        user: undefined,

    }

  )

  const auth = useMemo( () => ({

    login: async (email, password) => {

      const {data} = await axios.post('http://192.168.0.11:1337/auth/local', {

        identifer: email,

        password,

      });

      const user = {

        email: data.user.email,

        token: data.jwt,

      };

      dispatch(createAction('SET_USER', user ))

    },

    logout: async () => {

      console.log('logout')

    },

    register: async (email, password) => {

      await axios.post('http://192.168.0.11:1337/auth/local/register', {

        username: email,

        email,

        password,

      })

    },

  }),

   [],

  )

  console.log(state.user)

  return (

  <AuthContext.Provider value={auth}>

      <NavigationContainer>

       <AuthNavigator/>

      </NavigationContainer>

  </AuthContext.Provider>  

    

  );

}

Strapi Options:
For strapi I have users being created into the users section and is showing username, email but not password for some reason? Only shows confirmed next to email.

My admin panel includes 1 super admin and the authenticated users has 2 users as I signed them up using the register form that is working.

Error:

I would validate this is sending as application/json and not form-data or x-www-forum-urlencoded

How would I change this? Sorry I’m really new to strapi and mobile development and was following tutorials on YouTube and Udemy

You may need to JSON.stringify() that object with the identifier/password.

Hi I was suggested change it to this in order to get the form data but it doesn’t seem to be working and I’m still getting the same error when I try to sign in

const auth = useMemo(() => ({
login: async (email, password) => {
  const bodyFormData = new FormData();
  bodyFormData.append('identifer', email);
  bodyFormData.append('password', password);

  const {data} = await axios({
    method: 'POST',
    url: 'http://192.168.0.11:1337/auth/local',
    data: bodyFormData,
    headers: { "Content-Type": "multipart/form-data" },
  });

Unless you are uploading a file, you shouldn’t use multipart/form-data

Hello. I have the same problem. I was unable to fix this using the Content-Type header set to ‘application/json’. What is common between my case and yours is that we are connecting to Strapi via LAN. I wonder if this is what causes the problem.

The 400 (Bad Request) status code indicates that the server cannot or will not process the request because the received syntax is invalid, nonsensical, or exceeds some limitation on what the server is willing to process. It means that the request itself has somehow incorrect or corrupted and the server couldn’t understand it. The server is refusing to service the request because the entity of the request is in a format not supported by the requested resource for the requested method . Therefore, it prevents the website from being properly displayed. The main thing to understand is that the 400 Bad Request error is a client-side error.

The cause of 400 Bad Request error can be a wrongly written URL or a URL that contains unrecognizable characters. Another cause of the error might be an invalid or expired cookie. Also, if you try to upload a file that’s too large. If the server is programmed with a file size limit, then you might encounter a 400 error.