Firebase Login with React Components
<p>The basic idea is to make a Firebase Login in React.</p>

<p>The components render itself, but they're not working together. The main problem is that the render function doesn't take the «new» states, after the onAuthStateChanged() method is called. What am I doing wrong? </p>

<p>Thank you a lot guys!</p>

<pre><code>var Login = React.createClass ({

  getInitialState: function(){
        return { loggedIn: 'false' };
    },

    handleLogIn: function(event){

      var email = document.getElementById('email').value;
      var password = document.getElementById('password').value;

      firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        // ERROR HANDLING
        var errorCode = error.code;
        var errorMessage = error.message; 

        // [... error handling ...]   

      });

      this.setState({ loggedIn: 'true' });

    },

  authenticateUser: function(x){

    // INITIALIZATION
    var config = {
      [ ... config stuff ... ]
    };
    firebase.initializeApp(config);

    //CHECKING IF SIGNED IN
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // USER IS SIGNED IN
        console.log('authenticateUser(): true');
        this.setState({ loggedIn: 'true' });
      }
      else {
        // USER IS SIGNED OUT
        console.log('authenticateUser(): false');
        this.setState({ loggedIn: 'false' });
      }
    });
  },

  whichWindowToShow: function() {
    if (this.state.loggedIn === 'unknown'){
      return (
        &lt;div&gt;
        &lt;Loading type='bubbles' color='#e3e3e3' /&gt;
        &lt;/div&gt;
      );
    }
    else if (this.state.loggedIn === 'true'){
      return (
        &lt;div&gt;
        &lt;Backend /&gt;
        &lt;/div&gt;
      );
    }
    else {
      return (
        &lt;div className="login_wrapper"&gt;
        &lt;div className="login_box"&gt;
        &lt;h1&gt;Member Login&lt;/h1&gt;
          &lt;div className="login_fields"&gt;
            &lt;input type="text" id="email" name="email" placeholder="mail"/&gt;
            &lt;input type="password" id="password" name="password" placeholder="password"/&gt;
            &lt;button id="signin" name="signin" onClick={this.handleLogIn}&gt;Login&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  },

  render: function() {
    this.authenticateUser();
    return (
      &lt;div&gt;
        { this.whichWindowToShow() }
      &lt;/div&gt;
    );
  }
}); // END LOGIN
</code></pre>