You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

登录页面无法识别Firebase Auth部分错误,问题出在哪?

问题:登录页面仅无效邮箱提示正常,弱密码/密码不匹配无提示

我搭建了一个登录页面,希望在邮箱无效、密码过弱以及账号密码不匹配时弹出提示框,但只有无效邮箱的错误提示能正常弹出,另外两个提示没有效果。注册页面用相同逻辑的弱密码提示却能正常工作。

登录页面代码

const LoginScreen = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const incompleteForm = !email || !password
  const [invalidEmail, setInvalidEmail] = useState(false);
  const [wrongPassword, setWrongPassword] = useState(false);

  const navigation = useNavigation();

  const handleLogIn = () => {

    auth.signInWithEmailAndPassword(email, password)
    .then(userCredentials => {
      const user = userCredentials.user;
      navigation.replace('Navigation')
    })
    .catch((error) => {
      if (error.code == "auth/weak-password") {
        setTimeout(() => {
      Alert.alert(
        'Error',
        'The password must be 6 characters long or more',
        [{text: 'OK', onPress: () => navigation.navigate('Login')}],
        {cancelable: false},
      );
    }, 100);
  }
  else if (error.code == "auth/invalid-email") {
    setTimeout(() => {
      Alert.alert(
        'Error',
        'The email address is not valid',
        [{text: 'OK', onPress: () => navigation.navigate('Login')}],
        {cancelable: false},
      );
    }, 100);
  }
  else if (error.code == "auth/wrong-password") {
    setTimeout(() => {
      Alert.alert(
        'Error',
        'Incorrect email or password',
        [{text: 'OK', onPress: () => navigation.navigate('Login')}],
        {cancelable: false},
      );
    }, 100);
  }
})
  }

 return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    <KeyboardAvoidingView style = {styles.container} behavior = 'padding'>
      <View style={styles.imageContainer}>
        <Image source={require('../assets/pop1.png')} style={styles.image}/>
      </View>
      
  <View style = {styles.inputContainer}>
    <TextInput 
      placeholder = 'Email'
      value = {email}
      onChangeText = {text => setEmail(text)}
      autoCapitalize = 'none'
      autoCorrect = {false}
    />
    <TextInput 
      value = {password}
      onChangeText = {text => setPassword(text)}
      secureTextEntry
      autoCapitalize = 'none'
      autoCorrect = {false}
    />
  </View>

  <View>
    <TouchableOpacity onPress = {handleLogIn}
   disabled = {incompleteForm}>
      <Text>Log in</Text>
    </TouchableOpacity>
  </View>

</KeyboardAvoidingView>
</TouchableWithoutFeedback>
  )
}

export default LoginScreen

注册页面代码

const LoginScreen = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const incompleteForm = !email || !password

  const navigation = useNavigation();

  const handleSignUp = async() => {
    auth.createUserWithEmailAndPassword(email, password)
    .then(userCredentials => { 
      const user = userCredentials.user;
      navigation.navigate('Setup');
    })
.catch((error) => {
  if (error.code == "auth/email-already-in-use") {
    setTimeout(() => {
      Alert.alert(
        'Error',
        'The email address is already in use',
        [{text: 'OK', onPress: () => navigation.navigate('Signup')}],
        {cancelable: false},
      );
    }, 100);
  }
  else if (error.code == "auth/invalid-email") {
    setTimeout(() => {
      Alert.alert(
        'Error',
        'The email address is not valid',
        [{text: 'OK', onPress: () => navigation.navigate('Signup')}],
        {cancelable: false},
      );
    }, 100);
  } else if (error.code == "auth/weak-password") {
      setTimeout(() => {
        Alert.alert(
          'Error',
          'The password must be 6 characters long or more',
          [{text: 'OK', onPress: () => navigation.navigate('Signup')}],
          {cancelable: false},
        );
      }, 100);
  }
})
  }

  return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<KeyboardAvoidingView behavior = 'padding'>
  <StatusBar barStyle="light-content" translucent={true} />

  <View style={styles.imageContainer}>
    <Image source={require('../assets/pop.png')}/>
  </View>       
  <View style = {styles.inputContainer}>
    <TextInput 
      placeholder = 'Email'
      value = {email}
      onChangeText = {text => setEmail(text)}
      autoCapitalize = 'none'
      autoCorrect = {false}
    />
    <TextInput 
      placeholder = 'Password'
      value = {password}
      onChangeText = {text => setPassword(text)}
      secureTextEntry
      autoCapitalize = 'none'
      autoCorrect = {false}
    />
  </View>

  <View>
    <TouchableOpacity onPress = {handleSignUp} disabled = {incompleteForm}>
      <Text>Sign up</Text>
    </TouchableOpacity>
  </View>
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
  )
}

export default LoginScreen

问题原因分析
  1. auth/weak-password错误不会在登录时触发
    这个错误码是Firebase注册接口createUserWithEmailAndPassword的专属返回值,只有创建新用户时密码不符合长度要求才会触发。登录接口signInWithEmailAndPassword不校验密码强度,所以登录代码里这个分支永远不会执行。

  2. 缺少auth/user-not-found错误处理
    当输入的邮箱未注册时,Firebase会返回auth/user-not-found错误,而非auth/wrong-password。auth/wrong-password仅在邮箱存在但密码错误时触发。你当前的代码没处理这个场景,所以这种情况不会弹出提示。

  3. 不必要的setTimeout
    代码里的setTimeout完全多余,直接调用Alert.alert即可,不影响提示框弹出逻辑。


修复后的登录页面代码
const LoginScreen = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const incompleteForm = !email || !password
  const [invalidEmail, setInvalidEmail] = useState(false);
  const [wrongPassword, setWrongPassword] = useState(false);

  const navigation = useNavigation();

  const handleLogIn = () => {
    auth.signInWithEmailAndPassword(email, password)
      .then(userCredentials => {
        const user = userCredentials.user;
        navigation.replace('Navigation')
      })
      .catch((error) => {
        let errorMessage = '';
        switch(error.code) {
          case "auth/invalid-email":
            errorMessage = 'The email address is not valid';
            break;
          case "auth/wrong-password":
          case "auth/user-not-found":
            errorMessage = 'Incorrect email or password';
            break;
          default:
            errorMessage = 'Login failed, please try again';
        }

        Alert.alert(
          'Error',
          errorMessage,
          [{text: 'OK', onPress: () => navigation.navigate('Login')}],
          {cancelable: false},
        );
      })
  }

  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <KeyboardAvoidingView style={styles.container} behavior='padding'>
        <View style={styles.imageContainer}>
          <Image source={require('../assets/pop1.png')} style={styles.image}/>
        </View>
        
        <View style={styles.inputContainer}>
          <TextInput 
            placeholder='Email'
            value={email}
            onChangeText={text => setEmail(text)}
            autoCapitalize='none'
            autoCorrect={false}
          />
          <TextInput 
            value={password}
            onChangeText={text => setPassword(text)}
            secureTextEntry
            autoCapitalize='none'
            autoCorrect={false}
          />
        </View>

        <View>
          <TouchableOpacity onPress={handleLogIn} disabled={incompleteForm}>
            <Text>Log in</Text>
          </TouchableOpacity>
        </View>

      </KeyboardAvoidingView>
    </TouchableWithoutFeedback>
  )
}

export default LoginScreen

内容的提问来源于stack exchange,提问作者Mihailo

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.05 13:40:47