React-redux-firebase: attachAuthIsReady doesn't work

[ladislavjacho]

In version 3.0.0 it seems that

reactReduxFirebase(firebaseInstance, {attachAuthIsReady: true})

doesn't work.

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import { routerMiddleware } from 'connected-react-router/immutable';

import createReducer from './reducers';

import { getFirebase, reactReduxFirebase } from 'react-redux-firebase';
import { getFirestore } from 'redux-firestore';
import firebaseInstance from './config/firebaseInstance';



import { createLogger } from 'redux-logger';

const logger = createLogger();

export default function configureStore(intState = {}, history, rrfConfig) {
  const middlewares = [
    routerMiddleware(history),
    thunk.withExtraArgument({ getFirebase, getFirestore }),
    logger
  ];

  const enhancers = [applyMiddleware(...middlewares),
    //reduxFirestore(firebaseConfig),
    //reactReduxFirebase(firebaseConfig, {attachAuthIsReady: true}),
  ];

  const store = createStore(
    createReducer(),
    intState,
    compose(
      reactReduxFirebase(firebaseInstance, {attachAuthIsReady: true}),
      ...enhancers),
  );

  // Hot reloading
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./reducers', () => {
      store.replaceReducer(createReducer());
    });
  }

  return store;

}

getting

TypeError: Object(...) is not a function

[prescottprue]

@sbtgE What is your intended use case? authIsReady was originally added for supporting SSR, but it has had a number of issues.

That said, it shouldn't cause issues, just wondering so that we can make sure it is still needed. The plan was to phase that feature out all together.

[ladislavjacho]

I wanted to render after auth will be ready, but I could definitely do that without Promise in store.

store.firebaseAuthIsReady.then(() => {
  ReactDOM.render(
    <MuiThemeProvider theme={theme}>
      <Provider store={store}>
        <ReactReduxFirebaseProvider {...rrfProps}>
          <ConnectedRouter history={history}>
            <App />
...

[mdmad7]

Sorry for resurrecting a closed issue. in v2 we use to wait to render only after auth is ready by using store.firebaseAuthIsReady promise. Without i in v3 how can we wait and render only when auth is ready?

[mapendopndc]

wondering the same thing

[mdmad7]

In the firebase state under auth you get isLoaded and isEmpty. IsLoaded can be used to hold the UI from rendering unless it sets to true. IsLoaded and isEmpty is also available under profile object in the firebase state. I think that gets set when you using Firestone to store user profile as well but use the one under the auth object and not the profile object. Profile object loads after auth object

[ladislavjacho]

@mdmad7 @mapendopndc exactly! you can also define an action which will return a promise in this particular case.

e.g. something like that:

let unsubscribe = firebase.auth().onAuthStateChanged(function (user) {
    if (user) -> store.dispatch(signInUser(user)).then(() => renderDom())
    else -> renderDom()
    unsubscribe()
})

[prescottprue]

Correct, it is best to use state for this instead of waiting to complete store creation until auth is ready (especially if you are planning to have any state persistence).

[Beamanator]

Think we could add this to the v3-migration-guide? It caused me a little bit of pain trying to find this :)

I created an intermediate component that can load a splash screen (or whatever you want) before auth loading is complete:

const mapStateToProps = (state) => ({
    authIsLoaded: state.firebase.auth && state.firebase.auth.isLoaded,
});
const WaitTillAuth = connect(mapStateToProps)(({ authIsLoaded }) => {
    if (!authIsLoaded) return <div>splash screen...</div>;
    return (
        // my components that should only loaded after auth is loaded
    );
});

const app = (
    <Provider store={store}>
        <ReactReduxFirebaseProvider {...rrfProps}>
            <BrowserRouter>
                <WaitTillAuth />
            </BrowserRouter>
        </ReactReduxFirebaseProvider>
    </Provider>
);

ReactDOM.render(app, document.getElementById("root"));

[prescottprue]

@Beamanator Added to the migration guide, thanks for pointing out it was a hang up for you