I'm getting this error because firebase is being initialized again inside my account.js file. I want to use firebase.auth so my account.js file will show the login form when signed out and display a sign out button when signed in. Is there a correct way to do this?
Account.js
import React from 'react';
import firebase from 'firebase';
import { View, Image, TouchableOpacity, Text, TextInput } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import { Card, Button, Spinner, CardSection } from '../common';
import LoginForm from '../LoginForm';
import router from '../../config/router';
class Account extends React.Component {
state = { loggedIn: false };
componentWillMount() {
firebase.initializeApp({
apiKey: 'sksssk',
authDomain: 'ssjkjskjs',
databaseURL: 'skhskjhsk',
projectId: 'sijisj',
messagingSenderId: 'jwuduwid'
});
firebase.auth().onAuthStateChanged((user) => {
//event handler that handles either signing in or signing out
if (user) {
this.setState({ loggedIn: true });
} else {
this.setState({ loggedIn: false });
}
});
}
renderContent() {
if (this.state.loggedIn) {
return (
<Provider store={store}>
<Tabs />
<Button>
Log Out
</Button>
</Provider>
);
}
App.js
class App extends Component {
state = { loggedIn: false };
//lifecyle method for firebase initialization
componentWillMount() {
firebase.initializeApp({
apiKey: 'sksssk',
authDomain: 'ssjkjskjs',
databaseURL: 'skhskjhsk',
projectId: 'sijisj',
messagingSenderId: 'jwuduwid'
});
firebase.auth().onAuthStateChanged((user) => {
//event handler that handles either signing in or signing out
if (user) {
this.setState({ loggedIn: true });
} else {
this.setState({ loggedIn: false });
}
});
}
renderContent() {
if (this.state.loggedIn) {
return (
<Provider store={store}>
<Tabs />
</Provider>
);
}
}
render() {
return (
<Provider store={store}>
<Tabs />
</Provider>
);
}
}
export default App;