I am trying to implement persistent login for my application. I am facing error
No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)
I tried solving it by looking into the existing issues but does not quite fit into this use case. I have initialised my firebase from App.js and then after navigating to SplashScreen (AuthStack based on a state) I am calling an action creator from ComponentDidMount inside of SplashScreen. In that action creator I am checking the Auth State(if user returns non null then I am updating the state to move to AppStack).
App.js
class App extends Component {
componentDidMount() {
const firebaseConfig = {
apiKey: 'AIzaSyDOpO3TjIN4lCCufMZWKs7eZYd86SJB0o8',
authDomain: 'vocabs-a3f7e.firebaseapp.com',
databaseURL: 'https://vocabs-a3f7e.firebaseio.com',
projectId: 'vocabs-a3f7e',
storageBucket: 'vocabs-a3f7e.appspot.com',
messagingSenderId: '938659592890',
appId: '1:938659592890:web:7d309f3751892982066083',
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
}
render() {
return (
<Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}>
<NavigationContainer>
<MainRoute />
</NavigationContainer>
</Provider>
);
}
Splash screen
class SplashScreen extends Component {
componentDidMount() {
setTimeout(this.renderSignInForm, 1000);
//this.renderSignInForm();
}
renderSignInForm = () => {
console.log('inside async');
this.props.persistantSignIn();
//const userData = this.checkUser();
if (this.props.userData) {
console.log('hit user true' + this.props.userData);
} else {
// No user is signed in.
console.log('hit user false' + this.props.userData);
this.props.navigation.navigate('SignInForm');
}
};
render(){
return(
/*some Code Here*/
);
}
ActionCreator
export const persistantSignIn = () => {
return (dispatch) => {
firebase
.auth()
.onAuthStateChanged.then((userData) => {
console.log(userData);
dispatch({
type: PERSISTANT_SIGN_IN,
payload: userData,
});
})
.catch((error) => {
console.log('something is wronggggggggg');
throw error;
});
};
};
MainRoute.js
class MainRoute extends Component {
render() {
return this.props.isSignedIn ? <AppStack /> : <AuthStack />;
}
}