How do I redirect my login page to the homepage after successful sign in by user?

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";

   }
})

Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — zohaib khaliq, Apr 22 '21 at 21:59

score 0 · Answer 1 · answered Apr 22 '21 at 20:47

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";
        }
    }
})

Thank you so much! I used the solution from Martin for my Signup and Login, and it worked great, however, my logout bit continued to loop and so I used your solution for my logout function, and all is very well! I am so grateful to you both, as I struggled with this issue for much too long — Ayo Bola, Apr 23 '21 at 00:52

score 0 · Answer 2 · answered Apr 22 '21 at 20:53

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";
 }
})

Oh, I cannot tell you how grateful I am! Thank you so very much! — Ayo Bola, Apr 23 '21 at 00:41

How do I redirect my login page to the homepage after successful sign in by user?

2 Answers2