Firebase authentication failed with auth / network-request error Network error (e.g. timeout
I experienced very strange behavior while trying to do Firebase authetication. Moreover, I have created a version that works and the other does not. First, the version that works:
<!doctype html>
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyDapkNCu9UwitvO84PwQHnUQ6e4g6UK7JM",
authDomain: "********.firebaseapp.com",
databaseURL: "https://*******.firebaseio.com",
projectId: "********",
storageBucket: "********.appspot.com",
messagingSenderId: "582605565305"
};
firebase.initializeApp(config);
</script>
</head>
<body>
<script>
firebase.auth().signInWithEmailAndPassword("myemail@abc.xyz", "mypassword").catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert(errorCode + " " + errorMessage);
// ...
});
</script>
</body>
</html>
And now the version that doesn't work and gives me the error indicated in the title of this question.
<!doctype html>
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyDapkNCu9UwitvO84PwQHnUQ6e4g6UK7JM",
authDomain: "**********.firebaseapp.com",
databaseURL: "https://*********.firebaseio.com",
projectId: "**********",
storageBucket: "**********.appspot.com",
messagingSenderId: "582605565305"
};
firebase.initializeApp(config);
</script>
<script src="myfirebase.js"></script>
</head>
<body>
<form name="myform">
<span class="prm">Email</span><input type="text" name="email"></br>
<span class="prm">Password</span><input type="password" name="password" ></br>
<input type="image" src="some.png" onClick="loginToFirebase();">
</form>
</body>
</html>
And myfirebase.js
function loginToFirebase(){
var myform = document.forms.myform;
if(myform){
alert("trying to log as:" + myform.email.value + " and:" + myform.password.value);
firebase.auth().signInWithEmailAndPassword(myform.email.value, myform.password.value).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert(errorCode + " " + errorMessage);
// ...
});
}
}
As you can see, this is a very simple example and both versions are almost the same. The only difference is that in the working version the email and password are hardcoded into the source code, but in the non-working version there is an HTML form and a little javascript. I have put a warning to make sure everything is working as expected.
Here's the strangest thing. Both versions work in Firefox, but not Chrome, Opera and Konqueror (I'm on Linux / Fedora24). The same auth/network-request-failed A network error (such as timeout, interrupted connection or unreachable host) has occurred.
.
The Firebase console shows that the production version is actually working.
I have cleared my Chrome cache with no result.
Can anyone help me?
source to share
Resolved!
I realized that it has something with content security policy, tried different options and here is the solution. First, instead of inline
onClick="loginToFirebase();"
I had to register an event listener
function initApp(){
document.getElementById('mybutton')
.addEventListener('click', loginToFirebase);
}
window.onload = function() {
initApp();
}
This is not the end of my problems, I tried to specify the content security policy, but no result.
After going through the Firebase demo code very carefully, I decided to remove the tag <form>
and it was!
Hope this helps someone :)
source to share