I have a web app with two pages - index.html(using the script loginPage.js) and polls.html(using the script polls.js). The index.html just has a login form while polls.html has a signout button. Clicking the signout button calls signOut() and clicking login button calls login(). Here are the two scripts with the functions- loginPage.js
firebase.auth().onAuthStateChanged(function(user) {
if(user){
window.location="polls.html";
}
});
function login() {
var email = document.getElementById("email").value;
var password = document.getElementById("passwordLogin").value;
firebase.auth().signInWithEmailAndPassword(email, password)
.then(function () {
console.log("Logged in");
if (document.getElementById("ckbxRememberMe").checked) {
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
.catch(function (error) {
console.log(error.message);
console.log(error.code);
});
} else {
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
.catch(function (error) {
console.log(error.message);
console.log(error.code);
});
}
});
}
polls.js
firebase.auth().onAuthStateChanged(function (user) {
userGLobal = user;
if (user) {
if (!user.emailVerified) {
displayMessage("You need to verify your email before you can cast your votes.");
}
loadActivePolls();
} else {
window.location = "index.html";
}
});
function signOut() {
firebase.auth().signOut()
.catch(function(error) {
displayMessage("Couldn't sign you out.");
console.log(error.code);
console.log(error.message);
});
}
Everything works well if I don't check the "remember me" checkbox and set the persistence to "session" but checking the checkbox(thus setting the persistence to "local") induces a very strange behaviour. It causes the web app to oscillate between index.html and poll.html. I don't understand why this is happening.
EDIT: This doesn't happen when the website is hosted. The problem occurs only when the web-app is being running locally by opening index.html in a browser.