Handling firebase auth using a relay

Question

Handling firebase auth using a relay

I am building a React + Redux + Firebase application with webpack and trying to find the best way to handle secure routes and redirects. I tried using onEnter()with setTimeout(), as shown by many examples, but before redirecting, I still finished flashing the alternate component.

This is what I have now, and I'm trying to come up with a more elegant solution. This basically works, but an example of when it fails is that I am on /profileand go to /in the browser. It seems that since it firebase.auth()needs to be initialized again, I get a component flash HomePagebefore switching to Profile.

Firebase is initialized to firebaseClientConfig, and I pass firebase.auth()in routes.

import { auth } from './firebaseClientConfig';  

...    

export default (
<Route path="/" component={App}>    
 <IndexRoute
  getComponent={(nextState, cb) => {
    auth.onAuthStateChanged((user) => {
      if (!user) {
        return require.ensure([], require => {
          cb(null, require('./components/HomePage').default);
        });
      } else {
        return require.ensure([], require => {
          cb(null, require('./modules/Profile/Profile').default);
        });
      }
    });
  }}
/>
<Route
  path="/profile"
  getComponent={(nextState, cb) => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        return require.ensure([], require => {
          cb(null, require('./modules/Profile/Profile').default);
        });
      } else {
        return require.ensure([], require => {
          cb(null, require('./modules/Login/Login').default);
        });
      }
    });
  }}
/>
</Route>
);