捕获来自 Firebase.auth() 的错误响应以显示给用户

Question

我正在使用 React Native/Firebase/Redux 构建一个简单的登录系统。我正在尝试找出如何捕获因登录尝试失败而发生的错误。

这是我的 authscreen.js:

const [alertShowing, setAlertShowing] = useState(false);
const [alertMessage, setAlertMessage] = useState('');
...

  function handleLogin() {
    const response = dispatch(login(email, password));
    console.log(response);
  }

actions.js:

export const login = (email, password) => {
  return async (dispatch) => {
    try {
      const response = await Firebase.auth().signInWithEmailAndPassword(email, password);
      dispatch(getUser(response.user.uid));
    } catch (e) {
        return e;
    }
  };
};

我上面的 console.log(response) 正确地向我显示了错误消息，但这显然对用户不是很有用。另请注意，我可以使用正确的凭据正确登录。

我在 handleLogin() 中真正想做的是检查响应是否有误，如果是，setlAlertShowing(true) 和 setAlertMessage 返回我从useDispatch 挂钩，以便我可以很好地向用户显示它。

我该怎么办？ TIA.

Answer 1

Firebase 错误消息专为开发人员设计，对标准用户不友好。解决方案是识别身份验证错误代码并与 user-friendly 消息进行映射。

错误代码列表https://firebase.google.com/docs/auth/admin/errors

您可以使用这样的函数将 authError 映射到有意义的错误消息。

function mapAuthCodeToMessage(authCode) {
  switch (authCode) {
    case "auth/invalid-password":
      return "Password provided is not corrected";

    case "auth/invalid-email":
      return "Email provided is invalid";

    // Many more authCode mapping here...

    default:
      return "";
  }
}

以后再用

export const login = (email, password) => {
  return async (dispatch) => {
    try {
      const response = await Firebase.auth().signInWithEmailAndPassword(email, password);
      dispatch(getUser(response.user.uid));
    } catch (e) {
        dispatch({type:"authError",message:mapAuthCodeToMessage(e.code)}));

    }
  };
};

捕获来自 Firebase.auth() 的错误响应以显示给用户

Capture error response from Firebase.auth() for display to user

javascript

react-native

firebase-authentication

react-redux