Firebase error : Error (auth/network-request-failed

Question

I try to build an eCommerce app with Expo and react native but I face a network error, the google service is active on the device (simulator for android and real iPhone for IOS) and I'm connected to my Google account.

I also try to prevent the page to reload but nothing changed. After some research, all I see is I'm not the only one to face this error I don't find any valuable answer so I'm ending up here.

here my code:

const LoginScreen = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isSignedIn, setIsSignedIn] = useState(false);

  const handleCreateAccount = (e) => {
    e.preventDefault();
    createUserWithEmailAndPassword(authentification, email, password)
      .then((userCredential) => {
        console.log(userCredential);
      })
      .catch((error) => {
        console.log(error.message);
      });
  };

  const handleSignIn = (e) => {
    e.preventDefault();
    signWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        console.log("Signed in!");
        const user = userCredential.user;
        console.log(user);
      })
      .catch((error) => {
        console.log(error);
        Alert.alert(error.message);
      });
  };

      <ScrollView
        contentContainerStyle={{
          flex: 1,
          width: "100%",
          height: "100%",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <BlurView intensity={100}>
          <View style={styles.login}>
            <Image
              source={{ uri: profilePicture }}
              style={styles.profilePicture}
            />
            <Text style={{ fontSize: 17, fontWeight: "400", color: "white" }}>
              email
            </Text>
            <TextInput
              onChangeText={(text) => setEmail(text)}
              style={styles.input}
              placeholder="your@email.com"
              keyboardType="email-address"
              textContentType="emailAddress"
            />
            <Text style={{ fontSize: 17, fontWeight: "400", color: "white" }}>
              mot de passe
            </Text>
            <TextInput
              onChange={(text) => setPassword(text)}
              style={styles.input}
              placeholder="your password"
              secureTextEntry={true}
            />
            <Button
              onPress={handleSignIn}
              title="Connexion"
              buttonStyle={{
                width: 250,
                height: 40,
                borderRadius: 10,
                backgroundColor: "#00CFEB90",
                alignItems: "center",
                justifyContent: "center",
                marginVertical: 10,
                borderColor: "#fff",
                borderWidth: 2,
              }}
              type="outline"
              titleStyle={{ color: "white", fontSize: 17 }}
            />
            <Button
              onPress={handleCreateAccount}
              title="Créer un compte"
              buttonStyle={{
                width: 250,
                height: 40,
                borderRadius: 10,
                backgroundColor: "#6792F090",
                alignItems: "center",
                justifyContent: "center",
                marginVertical: 10,
                borderColor: "#fff",
                borderWidth: 2,
              }}
              type="outline"
              titleStyle={{ color: "white", fontSize: 17 }}
            />
          </View>
        </BlurView>
      </ScrollView>

So I need help.

Answer 1

The auth/network-request-failed error can be especially misleading as it seems to arise for a bunch of different reasons. I've seen it for any of the following:

1. Wrong Version of the SDK - To use auth on native devices, you need to use the native SDK, not the JavaScript SDK. Some other Firebase features may work via the JS SDK, but auth won't as it has extra security layers. Make sure you're using the correct version.
2. Emulator Issues - Your emulator can't access the internet or has stale DNS or an incorrect system time. Check and make sure your device has internet access, the clock on the device is set correctly, and that the DNS for your project resolves. For DNS you can try switching to Google's DNS (8.8.8.8) or Cloudflare's (1.1.1.1) and see if either of those help.
3. No Google Play Services - On Android, auth requires Google Play services be installed on the device emulator. See here for details.
4. Incorrect Firebase Setup - Make sure you've followed every item in the Getting Started instructions from both Expo and React Native Firebase, in particular the credentials portions and making sure that the package names match on Android and Bundle IDs match on iOS.

If none of the above work, provide the full error your getting (check both the React errors and the device-level error logs).

Answer 2

The issue is caused by the code implemented for the firebase auth.

For the Password InputText, Here the onChange prop is used which will set the TextInput-Event as the password state value.

That caused the Error as "Firebase error: Error (auth/network-request-failed)"

Because it sends the event object to the firebase API as a password which is not acceptable.

Hope you got it.

Make changes as below to solve your issue.

onChange={(text) => setPassword(text)} // will set input event as state value

To

onChangeText={(text) => setPassword(text)} // will set entered text as state value