title: react-redux-firebase login promise resolving before auth state is updated, causing render troubles
body: <p>I am using redux-form, react-redux-firebase, along with react-router-redux and react-router. </p>
  
  <p>When logging in a user with a redux-form connected form, in the onSubmit callback function, I am using the react-redux-firebase function from the <code>withFirebase</code> HOC called <code>props.firebase.login()</code>. Inside the return of this promise, I am attempting to use react-router to navigate to a "protected" view of mine.</p>
  
  <p>This all works well and looks like this:</p>
  
  <pre><code>    export default withFirebase( 
          connect(mapStateToProps, mapDispatchToProps)(
              reduxForm({
                  form: SINGLE_PAGE_FORMS.login, 
                  onSubmit: (values, dispatch, props) =&gt; {
                      const { firebase } = props;
                      const { username: email, password } = values;
  
                      firebase.login({
                          email,
                          password,
  
                      }).then(response =&gt; {
                          if(!!response) {
                              dispatch(
                                  openNotificationCenterAC({ message: 'Successfully logged in!', messageType: MESSAGE_TYPE_SUCCESS })
                              );
  
                              // The problem here with login is that the Private Route has not yet seen the Uid update and therefore 
                              // won't load a private route. I need to know the UID is in state before navigating to dashboard.
                              dispatch( push( ROUTE_OBJS.SECURED[ROUTES.DASHBOARD].path ) );
                              dispatch( reset(SINGLE_PAGE_FORMS.login) );
                          }
  
                      }).catch(error =&gt; {
                          dispatch(
                              openNotificationCenterAC({ message: error.message, messageType: MESSAGE_TYPE_ERROR })
                          );
                      });
                  },
  
              })(LoginContainerView)
          )
      );
  </code></pre>
  
  <p>The trouble (as seen in comments) is that I have switched over (today) to using a really cool new way of making some of my routes Private. I used the examples found in <a href="https://reacttraining.com/react-router/web/example/auth-workflow" rel="nofollow noreferrer">this link here</a> to create this concept.</p>
  
  <p>My Private component looks like this:</p>
  
  <pre><code>export default class PrivateRouteView extends Component {
  
      render() {
          const {
              key,
              auth,
              path,
              renderRoute,
              showErrorMessage,
  
          } = this.props;
  
          const { uid } = auth;
  
          return (
              &lt;Route
                  exact
                  key={key}
                  path={path}
                  render={
                      (!!uid &amp;&amp; isLoaded(auth) &amp;&amp; !isEmpty(auth)) ? renderRoute : 
                          props =&gt; {
  
                              return (
                                  &lt;Redirect
                                      to={{
                                          pathname: '/login',
                                          state: { from: props.location }
                                      }} /&gt;
                              );
                          }
                  } /&gt;
          );
      }
  }
  </code></pre>
  
  <p>The <code>auth</code> prop here is from the <code>withFirebase</code> HOC injection. It's attached to <code>this.props.firebase.auth</code>.</p>
  
  <p><strong>The Problem</strong></p>
  
  <p>Whenever I successfully log in, get the user data returned to me in the <code>.then</code> function of the <code>firebase.login()</code> promise... by the time I get to the dispatch of .push navigation, the PrivateRoute has re-rendered without the new auth object and never re-renders. </p>
  
  <p>I can step through and watch it. It goes:</p>
  
  <ol>
  <li>Login success</li>
  <li>Enter into <code>.then</code> function</li>
  <li>Notify user of login success</li>
  <li>Change navigation to dashboard view</li>
  <li>PrivateRoute component re-renders and see's no UID or auth</li>
  <li><code>firebase.login</code> promise entirely resolved</li>
  <li>Application state update completes and firebase.auth now has Uid and all other profile/auth objects in state </li>
  <li>Container to react-router BrowserRouter, Switch and Route's runs normally</li>
  <li>View attached to this container re-renders fine, down to the function where I return the PrivateRoute components</li>
  <li>PrivateRoute render method is never reached on the second render, the one where the <code>firebase.login</code> user data finally makes it into firebase.auth object state. So now I am authorized, however it never see's the new auth object because of no rendering...</li>
  </ol>