'Firebase `onAuthStateChanged` always return null user

This is my index.html:

<!DOCTYPE html>
<html lang="en-US">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
        <link rel='icon' href='favicon.ico' type='image/x-icon'/ >
        <link rel="stylesheet" href="./utilities/css/stylesTopNav.css">
        <link rel="stylesheet" href="./utilities/css/stylesLoader.css">
        <link rel="stylesheet" href="./utilities/css/stylesLogin.css">
        <title>Login</title>
        <script src="https://www.gstatic.com/firebasejs/7.2.0/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/7.2.0/firebase-firestore.js"></script>
        <script src="https://www.gstatic.com/firebasejs/7.2.0/firebase-storage.js"></script>
        <script src="https://www.gstatic.com/firebasejs/7.2.0/firebase-auth.js"></script>
    </head>

    <body style="background:url(./utilities/images/waterBGGif.gif) fixed; background-size: cover;">
        <div class="container" id="containerID">
            <label for="Email"><b>Email</b></label>
            <input id="emailID" type="text" placeholder="Enter Email" required>

            <label for="psw"><b>Password</b></label>
            <input id="passwordID" type="password" placeholder="Enter Password" required>

            <button type="submit" id="loginButtonID" onclick="loginButtonAction('')">Log In</button>
        </div>

        <script src="./utilities/js/firebase.js"> </script>
    </body>
</html>

And this is my firebase.js:

var firebaseConfig = {
    apiKey: "*******************",
    authDomain: "*******************",
    databaseURL: "*******************",
    projectId: "*******************",
    storageBucket: "*******************",
    messagingSenderId: "*******************",
    appId: "*******************"
  };
firebase.initializeApp(firebaseConfig);

var firestore = firebase.firestore();
var firestorage = firebase.storage().ref();

function logOutButtonAction() {
  const logOutBtn = document.getElementById('logoutButtonID');
  firebase.auth().signOut();
  firebaseStateChange()
}

function loginButtonAction() {
  const txtEmail = document.getElementById('emailID');
  const txtPass = document.getElementById('passwordID');
  const logInBtn = document.getElementById('loginButtonID');

  const email = txtEmail.value;
  const password = txtPass.value;
  const auth = firebase.auth();

  const promise = auth.signInWithEmailAndPassword(email, password);
  promise.catch(e => console.log(e.message));
  firebaseStateChange()
}

function firebaseStateChange() {
  firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    window.location.href = "product.html";
  } else {
    window.location.href = "index.html";
  }
  });
}

And I have added the email in Firebase Authentication:

But my firebase.auth().onAuthStateChanged(function(user) is always returning null. What I am missing here?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Firebase `onAuthStateChanged` always return null user

Sources

Related Questions