用户成功登录后如何将登录页面重定向到主页？

Question

I am having a lot trouble redirecting a user from the login page to the homepage after they successfully login (with the right email and password that they created. My website is written in HTML, CSS and Javascript, and I am using firebase for authentication. I have checked everywhere but can't seem to find a solution that works. I tried the method below (the last function is my attempt at redirection) and it seemed to work, however, it causes an infinite page refresh/reload. Can someone please help me out?

function signUp() {
      
   var email = document.getElementById("email");
   var password = document.getElementById("password");

   const promise = auth.createUserWithEmailAndPassword(email.value, password.value);
   promise.catch(e => alert(e.message));

   alert("Registered");

}

function signIn() {
      
   var email = document.getElementById("email");
   var password = document.getElementById("password");

   const promise = auth.signInWithEmailAndPassword(email.value, password.value);
   promise.catch(e => alert(e.message));

   alert("Logged in " + email.value);

}

function signOut() {
   auth.signOut();
   alert("Logged out");
}

firebase.auth().onAuthStateChanged(function (user) {
   if (user) {
      var email = user.email;
      alert("Active user: " + email);
      window.location.href = "/Users/Me/Desktop/Website HTML/home.html";
   }
   else {
     alert("No active user");
     window.location.href = "/Users/Me/Desktop/Website HTML/login.html";

   }
})

Answer 1

I think the reason your code is causing infinite redirection loop is because it doesn't specify when the redirection should not happen. This example here is a sample the checks for the current page before making the redirection.

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        var email = user.email;
        alert("Active user: " + email);
        if (window.location.href.indexOf("home.html") == -1) {
            window.location.href = "/Users/Me/Desktop/Website HTML/home.html";
        }
    } else {
        alert("No active user");
        if (window.location.href.indexOf("login.html") == -1) {
            window.location.href = "/Users/Me/Desktop/Website HTML/login.html";
        }
    }
})

Answer 2

You should do the redirection on the signIn method...

const promise = auth.signInWithEmailAndPassword(email.value, password.value);

promise
  .then(() => {
    //handle your redirection here

    //add any alerts or console logs here
  })
  .catch(e => alert(e.message));

//on another note.. the alert you have here will always trigger before
//the promise resolves, so you should have it inside the 'then' method
alert("Logged in " + email.value);

and then only use the 'onAuthStateChanged' method to check for authentication

firebase.auth().onAuthStateChanged(function (user) {
 if(!user) 
 {
   alert("No active user");
   window.location.href = "/Users/Me/Desktop/Website HTML/login.html";
 }
})