Redirection in onAuthStateChanged of Firebase authentication loads page endless
Question
I followed the instructions from Stack Overflow - How to redirect after a user signs in with Firebase authentication?
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My auth page</title>
<script defer src="/__/firebase/7.5.0/firebase-app.js"></script>
<script defer src="/__/firebase/7.5.0/firebase-auth.js"></script>
<script defer src="/__/firebase/7.5.0/firebase-database.js"></script>
<script defer src="/__/firebase/init.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- My html code -->
<script type="text/javascript" defer src="auth.js"></script>
</body>
</html>
auth.js:
function toggleSignIn() {
if (firebase.auth().currentUser) {
firebase.auth().signOut();
} else {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email.length < 4) {
alert('Please enter an email address.');
return;
}
if (password.length < 4) {
alert('Please enter a password.');
return;
}
firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
});
}
}
function initApp() {
console.log('start initApp');
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
console.log('logged in');
window.location = 'admin-console.html';
} else {
console.log('not logged in');
window.location = 'index.html'; //causes endless loop
}
});
document.getElementById('loginbutton').addEventListener('click', toggleSignIn, false);
}
window.onload = function () {
console.log('initialize app');
initApp();
};
I can see that this code goes in an endless loop. But I don't see what I missed from instructions. It seems that this instructions should work.
1 answers
solution1
1 2020-01-29 11:18:59
When you call the signInWithEmailAndPassword() method and it is successful, the user is logged in. So, if I correctly understand you functional requirement, you should not need to use onAuthStateChanged() .
You could do something along these lines:
function login() {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email.length < 4) {
alert('Please enter an email address.');
return;
}
if (password.length < 4) {
alert('Please enter a password.');
return;
}
firebase.auth().signInWithEmailAndPassword(email, password)
.then(userCredential => {
console.log("User " + userCredential.user.uid + " LOGGED IN");
window.location = 'admin-console.html';
})
.catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
//Throw an error
});
}
function logout() {
firebase.auth().signOut()
.then(() => {
console.log("User SIGNED OUT");
window.location = 'index.html';';
})
}
function initApp() {
console.log('start initApp');
document.getElementById('loginbutton').addEventListener('click', login, false);
document.getElementById('logoutbutton').addEventListener('click', logout, false);
}
window.onload = function () {
console.log('initialize app');
initApp();
};
Note that you need to add a logoutbutton button. If you want to have only one toggling button (and not one loginbutton button PLUS one logoutbutton button) you can easily adapt the above code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.