title: How to remove the new firebase onAuthStateChanged listener in react
body: <p>I'm implementing firebase auth in a react web app with react-router.</p>
  
  <p>A user signs in (at /signin) with either Facebook or Google using the popup sign in, then if successful I route to the main app (/). In the main app component I listen for an auth state change:</p>
  
  <pre><code>  componentWillMount() {
      this.authListener = this.authListener.bind(this);
      this.authListener();
    }
  </code></pre>
  
  <p>authListener listens for the auth change:</p>
  
  <pre><code>authListener() {
      firebase.auth().onAuthStateChanged((user) =&gt; {
        if (user) {
          console.log('user changed..', user);
          this.setState({
            User: {
              displayName: user.displayName
            }
          });
        } else {
          // No user is signed in.
          browserHistory.push('/signin');
        }
      });
    }
  </code></pre>
  
  <p>Everything works fine, except when I sign out (and go back to /signin) and sign in again using facebook or google. Then I get an error saying:</p>
  
  <blockquote>
    <p>Warning: setState(...): Can only update a mounted or mounting
    component.</p>
  </blockquote>
  
  <p>I suspect that the onAuthStateChanged listener from the now unmounted previous logged in state app is still running.</p>
  
  <p>Is there a way to remove the onAuthStateChanged listener when the App component unmounts?</p>