Firebase Authentication FirebaseNetworkException: A network error (such as timeout, interrupted connection or unreachable host) has occurred

Question

I\'m creating an authentication workflow for my android app. I\'m allowing users to sign in with username/password and various OAuth providers. I\'m validating emails and pa

Answer 1

It can also happen when google play services are not running. Try to launch play store and check if it is working. If not reboot of device issue.And also compare the google play services using in the project and google play services in the device are same if not update google play services.

This is just a minor but possible case where it gives the exception.

Answer 2

changing from <form></form> to <div></div> solved this problem:

"A network error (such as timeout, interrupted connection or unreachable host) has occurred in a form element in the HTML. Small bug."

Answer 3

If you do this check in form onSumbit handler, you need to preventDefault before sending a request.

This is a snippet (React) that works:

class LoginComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
        };
        this.login = this.login.bind(this);
        this.handleLoginChange = this.handleLoginChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
    }

    handleLoginChange(event) {
        this.setState({
            email: event.target.value,
            password: this.state.password,
        });
    }

    handlePasswordChange(event) {
        this.setState({
            email: this.state.email,
            password: event.target.value,
        });
    }

    login(event) {
        event.preventDefault();
        firebase.auth()
            .signInWithEmailAndPassword(this.state.email, this.state.password)
            .then(function(user) {
                      window.alert('OK' + user);
                  },
                  function(error) {
                      window.alert('ERR' + error);
                  });
    }

    render() {
        return (
            <form onSubmit={this.login}>
                <TextField hintText="login" value={this.state.email} onChange={this.handleLoginChange} /><br/>
                <TextField hintText="password" type="password" value={this.state.password} onChange={this.handlePasswordChange} /><br/>
                <RaisedButton type="submit" label="Login" primary={true} />
            </form>
        )
    }
}

Answer 4

Check your rewrites in firebase.json, make sure you don't rewrite auth provider url /__/

{
  "database": {
    "rules": "database.rules.json"
  },
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "!/__/**",
        "destination": "/index.html"
      },
      {
        "source": "**/!(*.js|*.html|*.css|*.json|*.svg|*.png|*.jpg|*.jpeg)",
        "destination": "/index.html"
      }
    ]
  }
}

Also it could be service worker problem. See https://github.com/Polymer/polymer-cli/issues/290

Answer 5

In your AndroidManifest.xml add, it works for me

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>