title: firebase on auth state change only working if page loads after user is signed in
body: <p>I am using onAuthStateChange to load data based on auth state.</p>
  
  <p>When a user is logged in, newsitems are loaded.
  When a user is logged out, newsitems are removed from the page.</p>
  
  <pre><code>firebase.auth().onAuthStateChanged(firebaseUser =&gt; {
  
     if(firebaseUser){
        // update Newsitems
        firebase.database().ref('news').once('value', function(snap){
           snap.forEach(snapChild =&gt; {
               addNewsItemToHTML(snapChild.val(), snapChild.key)
           })
        })
     }
     if(!firebaseUser){
        document.getElementById('newsitems').innerHTML = '';
        document.getElementById('admin').innerHTML = '';
     }
  });
  </code></pre>
  
  <p>This works if the user is logged in when the page loads. I can log out and log in and the newsitems disappear and appear appropriately.</p>
  
  <p>But if the user is not logged in when the page loads, the newsitems will not appear if I log in. The news items only appear after refreshing the page.</p>
  
  <p>I have researched this for hours and I can't find the answer. I think that because there is no user when the page loads, the reference is not created. Can anyone help?</p>