Firebase signInWithEmailAndPassword not firing .then() until after UI focus changes

Question

I'm using firebase .signInWithEmailAndPassword(email, password).then() for authentication in a react-native Android project.

I have the function called on an onPress button event. The authentication does take place but for some reason, the .then() does not fire unless I tap somewhere else on the screen. It will happily wait 5 mins until I tap somewhere other than the button to fire.

I can see that the auth is taking place. It's just the .then() promise that hangs until focus is shifted away from the button.

I'm using react-native 0.59.5 and firebase 5.1.0 node libraries. I've tried console.logging each step and it's clear the then() is where it fails. Strangely catch() works immediately.

export const loginUser = ({ email, password }) => {
  return dispatch => {
    dispatch({ type: LOGIN_USER })

    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(user => loginUserSuccess(dispatch, user))
      .catch(() => {
        firebase
          .auth()
          .createUserWithEmailAndPassword(email, password)
          .then(user => loginUserSuccess(dispatch, user))
          .catch(loginUserFail(dispatch))
      })
  }
}

const loginUserFail = dispatch => {
  dispatch({ type: LOGIN_USER_FAIL })
}

const loginUserSuccess = (dispatch, user) => {
  console.log('Firing success')
  dispatch({
    type: LOGIN_USER_SUCCESS,
    payload: user
  })
}

In the above example, loginUserFail will run immediately if auth fails but loginUserSuccess will wait indefinitely until I tap somewhere else in the application.

Answer 1

Do you have your remote debugger open in a Chrome browsers? Close it (debugger), reload app in simulator and it will work as expected.