4

I have experienced very strange behaviour trying to do Firebase authnetication. Even more, I made a version that works and one that 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 does not work and gives me the error stated 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 it is very simple example and both versions are pretty much the same. The only difference is that in working version email and password are hardcoded into the source, but in nonworking version there is a HTML form and a small javascript. I put alert statement to be sure that everything works as expected.

Here comes the strangest thing. Both version works in Firefox, but not in Chrome, Opera and Konqueror(I work on Linux/Fedora24). The same auth/network-request-failed A network error (such as timeout, interrupted connection or unreachable host) has occurred. is shown.

Firebase console shows that the working version really works.

I cleared Chrome cache, with no result.

Can anyne help me?

bobjan
  • 353
  • 1
  • 4
  • 11

1 Answers1

8

Resolved!

I realized it has something with Content Security Policy, tried various options, and here is the solution. First, instead of inline 

onClick="loginToFirebase();"

I had to register event listener

function initApp(){
  document.getElementById('mybutton')
        .addEventListener('click', loginToFirebase);
}

window.onload = function() {
   initApp();
 }

This was not the end of my problems, tried to specify Content Security Policy, but with no result.

After very thoroughly looking at Firebase demo code, I decided to remove <form> tag and that was it!

Hope, it will help someone :)

bobjan
  • 353
  • 1
  • 4
  • 11