React Native中Firebase认证注册/登录失败问题排查与解决

可能的错误原因 #

1. Firebase认证配置缺失/错误

   • 未在Firebase控制台启用「邮箱/密码」登录方式
   • Android/iOS平台配置文件（google-services.json/GoogleService-Info.plist）未正确添加或参数不匹配
   • Firebase SDK与React Native版本存在兼容性问题

2. Redux异步Action未处理异常

   • SignUp/SignIn Action中的Firebase异步调用未添加try/catch或.catch()块，导致Promise拒绝未被捕获，触发Possible Unhandled Promise Rejection警告
   • 未将具体错误信息分发到Redux状态，仅返回笼统的「Something went wrong!」

3. Redux中间件配置问题

   • 未配置redux-thunk/redux-saga等异步中间件，导致异步Action无法正确执行

4. 网络或权限问题

   • 设备无网络连接，无法访问Firebase认证服务器
   • Android/iOS应用未申请网络权限

针对性解决方法 #

1. 修复Action中的异常捕获 #

在SignUp/SignIn Action中添加完整的错误捕获逻辑，打印具体错误信息并分发失败状态：

// authActions.js
export const signUp = (email, password) => async dispatch => {
  try {
    const userCredential = await firebase.auth().createUserWithEmailAndPassword(email, password);
    dispatch({ 
      type: 'SIGNUP_SUCCESS', 
      payload: userCredential.user 
    });
  } catch (error) {
    // 打印Firebase具体错误码与信息，例如auth/email-already-in-use
    console.error('Firebase注册错误:', error.code, error.message);
    dispatch({ 
      type: 'SIGNUP_FAILURE', 
      payload: error.message || 'Something went wrong!' 
    });
  }
};

export const signIn = (email, password) => async dispatch => {
  try {
    const userCredential = await firebase.auth().signInWithEmailAndPassword(email, password);
    dispatch({ 
      type: 'SIGNIN_SUCCESS', 
      payload: userCredential.user 
    });
  } catch (error) {
    console.error('Firebase登录错误:', error.code, error.message);
    dispatch({ 
      type: 'SIGNIN_FAILURE', 
      payload: error.message || 'Something went wrong!' 
    });
  }
};

2. 验证Firebase配置 #

• 登录Firebase控制台 → 进入对应项目 → 「认证」→ 「登录方法」，确认「邮箱/密码」已启用
• 检查Android项目的android/app/google-services.json和iOS项目的GoogleService-Info.plist是否正确放置，且参数与控制台一致
• 确认Firebase SDK版本适配当前React Native版本（可参考Firebase官方文档的版本兼容说明）

3. 配置Redux异步中间件 #

如果使用redux-thunk，确保Store配置中添加了中间件：

// store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

export default store;

4. 组件中处理错误状态 #

在Welcome页面中从Redux状态获取错误信息并展示：

// WelcomeScreen.js
import { useDispatch, useSelector } from 'react-redux';
import { signUp } from '../actions/authActions';

const WelcomeScreen = () => {
  const dispatch = useDispatch();
  const authError = useSelector(state => state.auth.error);

  const handleSignUp = (email, password) => {
    dispatch(signUp(email, password));
  };

  return (
    <>
      {/* 页面其他元素 */}
      {authError && <Text style={{ color: 'red', marginTop: 10 }}>{authError}</Text>}
    </>
  );
};

export default WelcomeScreen;

5. 检查网络与权限 #

• 测试设备网络连接是否正常，可尝试访问Firebase认证相关域名（例如identitytoolkit.googleapis.com）
• Android项目在AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

内容的提问来源于stack exchange，提问作者Juan Pablo Grover Pinto