How can I find if firebaseAuthIsReady with v3.0.0?

Question

What is the alternative in react-redux-firebase with v3.0.0 to find out if auth is ready - to render for the first time? Problem in this case is that store doesn't contain firebaseAuthIsReady or am I missing something?

//ReactReduxFirebaseProvider v3.0.0
const rrfConfig = { 
  userProfile: 'users',
  attachAuthIsReady: true,
  firebaseStateName: 'firebase'
}

//const store = configureStore(initialState, history, rrfConfig);
const store = configureStore(initialState, history);


const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance
}

const MOUNT_NODE = document.getElementById('root')
//store.firebaseAuthIsReady.then(() => {
  ReactDOM.render(
    <MuiThemeProvider theme={theme}>
      <Provider store={store}>
        <ReactReduxFirebaseProvider {...rrfProps}>
          <ConnectedRouter history={history}>
            <App />
          </ConnectedRouter>
        </ReactReduxFirebaseProvider>
      </Provider>
    </MuiThemeProvider>,
    MOUNT_NODE
  );

mapStateToProps auth from firebase - state.firebase.auth, and then you can use isLoaded(this.props.auth) function from rrf — sbtgE, Feb 11 '19 at 19:47

score 5 · Answer 1 · answered Dec 16 '19 at 20:01

 //For React Redux Firebase v3.0.*      
        import React from 'react';
        import ReactDOM from 'react-dom';
        import App from './App';
        import { createStore, applyMiddleware, compose } from 'redux';
        import { Provider, useSelector } from 'react-redux';
        import thunk from 'redux-thunk';
        import rootReducer from './myproject/rootReducer';
        import { createFirestoreInstance } from 'redux-firestore';
        import { ReactReduxFirebaseProvider, isLoaded } from 'react-redux-firebase';
        import firebase from './myproject/config/fbConfig';       

           const rrfConfig = {}

           const store = createStore(
               rootReducer, 
                compose(
                 applyMiddleware(thunk)   // if you are using thunk 
                  )
            )

            const rrfProps = {
                  firebase,
                  config: rrfConfig,
                  dispatch: store.dispatch,
                  createFirestoreInstance
               }

           function AuthIsLoaded({ children }) {
                    const auth = useSelector(state => state.firebase.auth)
                    if (!isLoaded(auth)) return <div>Loading Screen...</div>;
                        return children
                }

    ReactDOM.render(<Provider store={store}><ReactReduxFirebaseProvider {...rrfProps}>
                     <AuthIsLoaded><App /> </AuthIsLoaded></ReactReduxFirebaseProvider>
            </Provider>, document.getElementById('root'));

See react-redux-firebase Doc: Wait For Auth To Load on http://react-redux-firebase.com/

score -1 · Answer 2 · edited Nov 15 '19 at 08:19

-1

import { isLoaded, isEmpty } from 'react-redux-firebase';

See: http://react-redux-firebase.com/docs/recipes/auth.html

edited Nov 15 '19 at 08:19

Shree

18,997
28
86
133

answered Nov 15 '19 at 08:08

user12377247

1

AWIXOR · Answer 3 · 2020-06-23T15:08:35.633

-1

The way of implementing that is the new versions is mentioned here in their docs: http://react-redux-firebase.com/docs/recipes/auth.html#wait-for-auth-to-load

import the isLoaded from "react-redux-firebase" like this:
```
import { isLoaded } from "react-redux-firebase"
```

create a function that returns a loader spin or something while the data is not loaded yet:

function AuthIsLoaded({ children }) {  
const auth = useSelector((state) => state.firebase.auth);   if
(!isLoaded(auth))
    return (
      <Wrapper>
        <Loader />
      </Wrapper>
    );   
return children; }

wrap your app inside the AuthIsLoaded component like this:
```
<AuthIsLoaded>
    <App />
</AuthIsLoaded>
```

and this will work just like the firebaseAuthReady function.

edited Jun 23 '20 at 15:08

answered Jun 23 '20 at 14:26

AWIXOR

58
10

When answers go through the review queues one of the options for marking something as very low quality (should be deleted) is when an answer consists of only a link and would be useless to someone in the future if that link were to break. The way to fix this is to make sure that the answer is self contained, and uses the link only to provide additional information. – Jason Aller Jun 23 '20 at 14:51
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/26492419) – i_like_robots Jun 23 '20 at 14:59
understood, changes have made! – AWIXOR Jun 23 '20 at 15:10

How can I find if firebaseAuthIsReady with v3.0.0?

3 Answers3