I am building a small site using plain HTML and javascript, and I am using Firebase for authentication. When users go to a certain page, I would like to redirect them to another page if they are signed in. This is the code I am using to achieve that (all scripts are placed in the <head>):
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script>
const firebaseConfig = {
// ...
};
firebase.initializeApp(firebaseConfig);
firebase.auth().onAuthStateChanged((user) => {
window.location.href = "/feed";
});
</script>
This redirects the user properly, but the user briefly sees the page meant for non-authenticated users during the time it takes for Firebase to fetch the auth state and for the onAuthStateChanged callback to be fired. Is there a way I can prevent rendering of the HTML page until onAuthStateChanged is called?