Firebase onAuthStateChange() state does not change Code Answer

I am trying to login the user to my app. I expect when the user enters details and signs in, to be redirected and to console.log(user); account details. The problem is that console just shows Not logged in even after I try to login. Regarding the overall flow of the application, when the user successfully signs in, a token is sent from the cloud function which is displayed in the console. I do not understand what am I doing wrong here.

function signIn() {
  var usernameValue = document.getElementById("sign-in-username").value;
  var passwordValue = document.getElementById("sign-in-password").value;

  fetch("http://localhost:5001/.../europe-west3/api/login", {
    method: "POST",
    mode: "cors",
    headers: {
      "Content-type": "application/json",
    },
    body: JSON.stringify({
      username: usernameValue,
      password: passwordValue,
    })
  })
    .then((res) => {
      return res.json();
    })
    .then((data) => {
      console.log(data)
    })
    .catch((error) => console.log("ERROR"));
}

The authentication state does not change.

auth.onAuthStateChanged(function (user) {
  if (user) {
    window.location.href = "user.html";
    console.log(user);
  } else {
    console.log("Not logged in");
  }
});

Answer

If you some sort of API endpoint to sign in a user, that will never have an effect on the auth state observed by the Firebase SDK. The auth state observer is only going to trigger when you also use the Firebase SDK to sign in the user. For example, it triggers when you call methods like signInWithEmailAndPassword(), or any of the methods that start with “signIn”.