Firebase Authentication 'Access-Control-Allow-Origin' header has a value 'null'

Question

I've just started learning HTML/CSS/Javascript, and am trying to create a simple log-in page with Firebase. I am unable to log-in existing users, and whenever I attempt to sign in a user, I get the following error in the console:

Failed to load https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=...: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

My API key is displayed above instead of '...'. Firebase outputs the following error message:

Error: A network error (such as timeout, interrupted connection or unreachable host) has occurred.

Below is my code.js file that is linked to index.html:

var normal = true;

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


firebase.auth().onAuthStateChanged(function(user) {
  if(user){
    // User is signed in so display logout page
    document.getElementById("submit_button_logout").style.display = "flex";
    document.getElementById("submit_button_logout").onclick = function() {
      logout();
    }
  } else {
    // User not signed in
    // alert("Please log in or sign up.")
  }
});    

function addListeners(){
  if(normal){
    document.getElementById("sign_up_a").onclick = function() {
      switchState();
    }
    document.getElementById("sign_in_a").onclick = function() {

    }
  } else {
    document.getElementById("sign_in_a").onclick = function() {
      switchState();
    }
    document.getElementById("sign_up_a").onclick = function() {

    }
  }

  document.getElementById("submit_button").onclick = function() {
    alert("clicked")
    login();
  }
}

function switchState() {
    normal = !normal;
    if(!normal){
      document.getElementById("sign_in_a").className = "inactive";
      document.getElementById("sign_up_a").className = "";
      document.getElementById("form_header").innerHTML="<h2>Sign up for an Account</h2>";
      document.getElementById("submit_button").innerHTML="Sign Up";
      addListeners();
    } else {
      document.getElementById("sign_in_a").className = "";
      document.getElementById("sign_up_a").className = "inactive";
      document.getElementById("form_header").innerHTML="<h2>Sign in to your Account</h2>";
      document.getElementById("submit_button").innerHTML="Sign In";
      addListeners();
    }
}

function login() {
  var usr = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  firebase.auth().signInWithEmailAndPassword(usr, password).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
    alert("Error: " + errorMessage);
  });
}

function sign_up() {
  var usr = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
    alert("Error: " + errorMessage);
  })
}

function logout(){
  firebase.auth().signOut();
}

I have double checked if I have correctly set-up firebase, and this seems to be the case. My index.html file looks like this:

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>You already know</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed" rel="stylesheet">
  <!-- <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script> -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "...",
      authDomain: "...",
      databaseURL: "...",
      projectId: "...",
      storageBucket: "...",
      messagingSenderId: "..."
    };
    firebase.initializeApp(config);
  </script>
  <script src="code.js" type="text/javascript" charset="utf-8"></script>

Thanks in advance for your help in fixing this error.

Possible duplicate of [Firebase Storage and Access-Control-Allow-Origin](https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin) — Obsidian Age, Apr 05 '18 at 01:35
How are you loading index.html? Using an HTTP server? or is it using `file:///` protocol? If the latter, then that is your problem. — Jaromanda X, Apr 05 '18 at 01:37

score 1 · Accepted Answer · answered Apr 05 '18 at 15:43

I was able to get Firebase authentication working with my website. As suggested in the comments and other answers, the problem was that I was loading my index.html file with file:// protocol. As I have python installed on my machine, I opened my command prompt and went into the directory of the files used in making my website. Here, I called python -m http.server and navigated to localhost:8000 in my browser. The website works fine here.

score -1 · Answer 2 · answered Apr 05 '18 at 13:01

-1

try using some of the server like node, apache http.

answered Apr 05 '18 at 13:01

Rahul Somasundaram

578
1
6
16

Firebase Authentication 'Access-Control-Allow-Origin' header has a value 'null'

2 Answers2