title: Sometimes firebase.auth().onAuthStateChanged returns user of null when I refresh the page
body: <h2>Precondition</h2>
  <p>$npm install --save firebase@4.11.0</p>
  <h2>issue</h2>
  <p>I'm using firebase authentication on my web application.
  In my app, I implemented <code>onAuthStateChanged</code> for client side js like below.</p>
  <pre><code>firebase.auth().onAuthStateChanged((user) =&gt; {
    if(user) {
      //logged in
    } else {
      //do sth
    }
  });
  </code></pre>
  <p>After login, I confirmed this method will return actual user obj, but if I refresh the page, then user might be null.
  Curiously, sometimes user won't be null.
  I'm afraid there are some limitation of calling onAuthStateChanged, but currently I have no idea.</p>
  <p>How should I deal with this issue?</p>
  <h2>update</h2>
  <p>Let me share my minimal example.</p>
  <p>My app is working with express.js.
  There are two URLs like below.
  <code>/login</code>
  <code>/main</code></p>
  <p>In the login page, I implemented authentication method.
  If the login is successfully finished, then user will be redirected to '/main'.</p>
  <pre><code>//login.js
  import firebase from 'firebase';
  var config = {...};
  firebase.initializeApp(config);
  
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider)
  .then((result) =&gt; {
    return result.user.getIdToken(true);
  }).then((idToken) =&gt; {
    if(idToken) {
      location.href = '/main';
    }
  });
  </code></pre>
  <p>In the main page, there is no login method.
  main.js is only checking whether user is logged in.</p>
  <pre><code>//main.js
  import firebase from 'firebase';
  var config = {...};
  firebase.initializeApp(config);
  
  firebase.auth().onAuthStateChanged((user) =&gt; {
    if (user) {
      //initialize main page.
    } else {
      location.href = '/login';
    }
  }
  </code></pre>
  <p>I think login status is stored on LocalStorage of web browser.
  This means that, after finishing loading of main.js, onAuthStateChanged will be automatically fired with user information, but not working as I expected.
  I'm sure that persistence of login information is correct because official document says the default setting is <code>LOCAL</code> for web client.</p>
  <p><a href="https://firebase.google.com/docs/auth/web/auth-state-persistence" rel="noreferrer">https://firebase.google.com/docs/auth/web/auth-state-persistence</a></p>
  <h3>my question</h3>
  <p>Should I implement onAuthStateChanged with another way?
  How can I ensure user is logged in after reload?</p>
  <p>e.g.</p>
  <pre><code>import $ from 'jquery';
  $(document).on('ready', () =&gt; {
    onAuthStateChanged((user) =&gt; {...});
  });
  </code></pre>
  <p>Or could you show me the correct way?</p>
  <h3>Workaround</h3>
  <p>I decided to remove session and set redirection to login page if null is returned. This is not a solution, but a workaround currently...</p>