Authentication and UI fails when button is pressed - reactjs

Question

I started to learn react-native and for now I created a few components in order to use signing in my firebase project. I already created a firebase project from firebase console and dealt with lots of errors. Finally I created my App.js as :
import React, {Component} from 'react';
import {View} from 'react-native';
//import firebase from 'firebase';
//import firebase from '#firebase/app';
import * as firebase from 'firebase';
import '#firebase/auth';
import Header from './src/components/common/Header';
import LoginForm from './src/components/LoginForm';
import CardSection from './src/components/common/CardSection';
import Button from './src/components/common/Button';
import Spinner from './src/components/common/Spinner';
class Main extends Component {
state = {loggedIn: null};
componentDidMount() {
if (!firebase.apps.length) {
firebase.initializeApp({
apiKey: 'AIzaSyCuggnPGozfGB9M1elP7yOG5kdH3Xk5BDM',
authDomain: 'digitus-trial.firebaseapp.com',
databaseURL:
'https://digitus-trial-default-rtdb.europe-west1.firebasedatabase.app',
projectId: 'digitus-trial',
storageBucket: 'digitus-trial.appspot.com',
messagingSenderId: '811615820065',
appId: '1:811615820065:web:993900aab9e5927b5a0660',
measurementId: 'G-4KSTW48LX0',
});
} else {
firebase.app();
}
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.setState({loggedIn: true});
} else {
this.setState({loggedIn: false});
}
});
}
logoutClicked() {
firebase.auth().signOut();
}
renderContent() {
switch (this.state.loggedIn) {
case true:
return (
<CardSection>
<Button onPress={this.logoutClicked.bind(this)}>Logout</Button>
</CardSection>
);
case false:
return <LoginForm />;
default:
return (
<View>
<Spinner size="large" />
</View>
);
}
}
render() {
return (
<View>
<Header headerText="Digitus Trial" />
{this.renderContent()}
</View>
);
}
}
export default Main;
My problem is when I press login button my button fade out instead of showing a indicator. And also I couldn't get any message which I already put console.log flagging. I'm working with Windows 10 and Android emulator. Can you help me out? For further information here is my form file:
import React, {Component} from 'react';
import {TextInput} from 'react-native';
import firebase from '#firebase/app';
import '#firebase/auth';
import Button from './common/Button';
import Card from './common/Card';
import CardSection from './common/CardSection';
import Spinner from './common/Spinner';
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {email: '', password: '', loading: false};
}
loginClick() {
this.setState({loading: true});
const {email, password} = this.state;
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(this.loginSuccess.bind(this))
.catch(() => {
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(this.loginSuccess.bind(this))
.catch(this.loginFail.bind(this));
});
}
onPressSignIn() {
this.setState({
loading: true,
});
}
renderCurrentState() {
const {inputStyle} = styles;
if (this.state.loading) {
return (
<Card>
<CardSection>
<TextInput
placeholder="Email"
style={inputStyle}
value={this.state.email}
onChangeText={(email) => this.setState({email})}
/>
</CardSection>
<CardSection>
<TextInput
placeholder="Password"
style={inputStyle}
value={this.state.password}
onChangeText={(password) => this.setState({password})}
/>
</CardSection>
<CardSection>
<Spinner size="large" />
</CardSection>
</Card>
);
}
return (
<Card>
<CardSection>
<TextInput
placeholder="Email"
style={inputStyle}
value={this.state.email}
onChangeText={(email) => this.setState({email})}
/>
</CardSection>
<CardSection>
<TextInput
placeholder="Password"
style={inputStyle}
value={this.state.password}
onChangeText={(password) => this.setState({password})}
/>
</CardSection>
<CardSection>
<Button onPress={() => this.onPressSignIn()}>Login</Button>
</CardSection>
</Card>
);
}
render() {
return <Card>{this.renderCurrentState()}</Card>;
}
}
//Android has no shadow property, in order to use in IOS emulator make elevation:1
const styles = {
inputStyle: {
color: '#000',
paddingRight: 5,
paddingLeft: 5,
fontSize: 18,
lineHeight: 23,
flex: 1,
},
};
export default LoginForm;

Answer 1

After several trials, I found that firebase services are too slow. For every login operation, I need to wait 30 secs or so. So my problem was solved.