登录页面无法识别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
问题原因分析
auth/weak-password错误不会在登录时触发
这个错误码是Firebase注册接口createUserWithEmailAndPassword的专属返回值,只有创建新用户时密码不符合长度要求才会触发。登录接口signInWithEmailAndPassword不校验密码强度,所以登录代码里这个分支永远不会执行。缺少
auth/user-not-found错误处理
当输入的邮箱未注册时,Firebase会返回auth/user-not-found错误,而非auth/wrong-password。auth/wrong-password仅在邮箱存在但密码错误时触发。你当前的代码没处理这个场景,所以这种情况不会弹出提示。不必要的
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
相关产品推荐
相关产品推荐

