React Native Firebase Authentication Error

Question

I'm trying to create the login user account system and for some reason it is recognizing incorrect passwords after navigating to the home screen instead of before. (The code I am referring to is the the login() function). I put console log statements to determine this and 'console.log(errorCode);' is the last thing that is outputted. Can someone please explain the logic of the code I have written and why incorrect passwords are only recognized at the end? The order of console output is "Logging in" "Navigate to Home" "Login finish" "auth/wrong-password? Thanks so much.

import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  TextInput,
  KeyboardAvoidingView
} from 'react-native';
import Input from './Input';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {firebaseApp} from './App';
import {Tabs} from './Router';
import {StackNavigator, TabNavigator} from 'react-navigation';
import { Root } from './Router';

export default class LoginScreen extends Component {
  constructor(props) {
    super(props)

    this.state = {
      email: '',
      password: '',
      status: '',
      success: ''
    }

    this.login = this.login.bind(this);

  }

  login(){
    console.log("Logging in");
    var errorCode;
    var errorMessage;
    firebaseApp.auth().signInWithEmailAndPassword(this.state.email, this.state.password).catch(function(error) {
        errorCode = error.code;
        console.log(errorCode);
        errorMessage = error.message;
    });

      if (errorCode === 'auth/wrong-password') {
        console.log("Wrong password");
        alert('Wrong password.');
      } else {
        console.log("Navigate to Home");
        this.props.navigation.navigate('Home');
      }

      //console.log(error);
      console.log("Login finish");


    /*firebaseApp.auth().signInWithEmailAndPassword(this.state.email, this.state.password).catch(function(error) {
      console.log(error.code);
      console.log(error.message);
    })

    this.props.navigation.navigate('Home');

    console.log("Navigate to Home");*/
  }

  render() {
    var styles = require('./Styles');
    const {navigate} = this.props.navigation;

    return(
      <KeyboardAvoidingView behavior='padding' style={styles.loginContainer}>
        <Text style={styles.loginHeader}>PRINCETON EVENTS</Text>
        <TextInput
          style={styles.loginInput}
          placeholder="Email"
          autoCapitalize='none'
          onChangeText={(text) => this.setState({email: text})}
          value={this.state.email}
          returnKeyType='next'/>
        <TextInput
          secureTextEntry
          style={styles.loginInput} placeholder="Password"
          onChangeText={(text) => this.setState({password: text})}
          value={this.state.password}
          autoCapitalize='none'
          returnKeyType='go'/>
        <TouchableOpacity style={styles.loginButton}>
          <Text style={styles.loginText} onPress={this.login}>LOGIN</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.loginButton}
          onPress = {() => navigate('CreateAccount')}>
          <Text style={styles.loginText}> CREATE ACCOUNT </Text>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    );

}
}

Answer 1

A bit late but for the next ones, check this answer https://stackoverflow.com/a/63958584/9300663

Still working : 13/01/2021.

And for your case, you can use substr() to get rid off 'auth/' from your errorCode.

Something like that :

switch (errorCode.substr(5)) {
    case 'ERROR_EMAIL_ALREADY_IN_USE':
    case 'account-exists-with-different-credential':
    case 'email-already-in-use':
      return 'Email already used. Go to login page.';
    case 'ERROR_WRONG_PASSWORD':
    case 'wrong-password':
      return 'Wrong email/password combination.';
    case 'ERROR_USER_NOT_FOUND':
    case 'user-not-found':
      return 'No user found with this email.';
    case 'ERROR_USER_DISABLED':
    case 'user-disabled':
      return 'User disabled.';
    case 'ERROR_TOO_MANY_REQUESTS':
    case 'operation-not-allowed':
      return 'Too many requests to log into this account.';
    case 'ERROR_OPERATION_NOT_ALLOWED':
    case 'operation-not-allowed':
      return 'Server error, please try again later.';
    case 'ERROR_INVALID_EMAIL':
    case 'invalid-email':
      return 'Email address is invalid.';
    default:
      return 'Login failed. Please try again.';
  }

Answer 2

You need handle success/error cases in then and catch blocks.

firebaseApp.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
.then(function() { //Auth is successful
   this.props.navigation.navigate('Home');
}
.catch(function(error) {
    errorCode = error.code;
    errorMessage = error.message;
  if (errorCode === 'auth/wrong-password') {
    console.log("Wrong password");
    alert('Wrong password.');
  } else {
    console.log("Navigate to Home");
    this.props.navigation.navigate('Home');
  }
});