Firebase Authentication works but keeps on refreshing the page

Question

So I am new to web development and Firebase as well. I have been trying to build a multi page web app in simple javascript and firebase. App looks good and works for most of the part. Yet it is really of no use as I am having following issue :

1. When I sign in through googleAuthProvider (on my index.html page), I am taken to another page which is main.html . Now til here is fine. But once the main.html is loaded, it goes into a loop of continuous refreshing.

My rationale behind this is, that somehow Firebase is trying to re-authenticate the page on loading. And so the loop happens. But why, this I am not able to debug.

I have looked over almost everything I could find on internet but no where I could find a solution which is for simple javascript based multi page web app with firebase.

Here's a link to my app if anyone is interested and kind enough to have a look.

Chatbot

Also, here is my javascript code too.

 var config = { apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", authDomain: "XXXXXXXXX.firebaseapp.com", databaseURL: "https://XXXXXXXX.firebaseio.com", projectId: "XXXXXXXXXX", storageBucket: "XXXXXXXXXX.appspot.com", messagingSenderId: "XXXXXXXXXXXX" }; firebase.initializeApp(config); //=============================================================================================== $("document").ready(function(){ const signinGoogle = document.getElementById("googleAuth"); const signOut = document.getElementById("signout"); const sendMsg = document.getElementById("send"); const messageBox = document.getElementById("chatBox"); const displayNAME = document.getElementById("dipslayName"); const storageRef = firebase.storage().ref(); var currentUser; var name; var photoUrl; //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ initApp(); //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ if(signinGoogle){ googleAuth.addEventListener('click', e=>{ firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider()).then(function(result) { // This gives you a Google Access Token. You can use it to access the Google API. var tokenGoogle = result.credential.accessToken; // The signed-in user info. var userGoogle = result.user; // ...Below line to be rmeooved if not working expectedly. // var user = firebase.auth().currentUser; }).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); }); } //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ if(signOut){ signout.addEventListener('click', e=>{ if(confirm("Do you wish to leave?")){ promise = firebase.auth().signOut().then(function(){ window.location = "index.html"; }); promise.catch(e => console.log(e.message)) } }); } //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ function initApp(){ firebase.auth().onAuthStateChanged(function(user){ if(user){ window.location = "main.html"; $("document").ready(function(){ currentUser = firebase.auth().currentUser; name = currentUser.displayName; photoUrl = currentUser.photoURL ; console.log("Current user's name is : "+name); console.log("Current user's photoUrl is : "+photoUrl); displayNAME.innerHTML = "Hi "+name; //+++++++++++Retrieving Msgs++++++++++++++++++++++++++++++++ var i=1; var firebaseRetrieveRef = firebase.database().ref().child(name+uid+"/MessageBoard"); firebaseRetrieveRef.on("child_added", snap =>{ var retrievedMsg = snap.val(); console.log("retrieved msgs is : "+retrievedMsg); $("#taskList").append("<li id='list"+i+"'><div style='width:100%'><img src='"+photoUrl+"'style='width:10px;height:10px;border-radius:5px;'/><label>"+name+"</label></div><div style='width:100%'><p>"+retrievedMsg+"</p></div></li>"); i++; }); //+++++++++++Storing Msgs++++++++++++++++++++++++++++++++ $("#send").on("click", function(){ var newMessage=messageBox.value; if(newMessage==""){ alert("Empty Message doesn't make any sense, does it?? "); } else{ var firebaseStoreRef = firebase.database().ref().child(name+uid+"/MessageBoard"); firebaseStoreRef.push().set(newMessage); messageBox.value=""; } }); //+++++++++++Clearing/deleting all tasks++++++++++++++++++++++++ $("#clear").on("click", function(){ var firebaseDeleteRef = firebase.database().ref().child(name+uid+"/MessageBoard"); firebaseDeleteRef.remove(); $( ".scrolls" ).empty(); }); //+++++++++++++++++++++++++++++++++++++++++++++++++++++++ }); } else { console.log(user+" is not logged in"); } }); } //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ }); 

Answer 1

You keep redirecting to main.html.

firebase.auth().onAuthStateChanged(function(user){     
  if(user){
  window.location = "main.html";

You keep redirecting to main.html whenever you determine the user is signed in. Make sure on main.html, you are not using the same logic and redirecting again.