Firebase login promise doesn't resolve until I tap anywhere on the screen

Question

I'm following this React course on Udemy and I've come across a really strange error.

I'm using Firebase to authenticate via email and password. When users tap log in, I dispatch an action called LOGIN_USER, which sets a loading state.

When login is successful, I dispatch an action called LOGIN_USER_SUCCESS to stop the loading state.

For some reason, LOGIN_USER_SUCCESS doesn't happen until I tap somewhere random on the screen.

If I remove the line dispatch({ type: LOGIN_USER }); to disable the loading state, login returns success after a couple of seconds.

My actions
-----------

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

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => loginUserSuccess(dispatch, user))
      .catch((error) => {
        console.log(error);

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

const loginUserSuccess = (dispatch, user) => {
  dispatch({
    type: LOGIN_USER_SUCCESS,
    payload: user
  });
};


const INITIAL_STATE = {
  email: '',
  password: '',
  user: null,
  error: '',
  loading: false
};


/// My reducer
---------------

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EMAIL_CHANGED:
      return { ...state, email: action.payload };
    case PASSWORD_CHANGED:
      return { ...state, password: action.payload };
    case LOGIN_USER:
      return { ...state, loading: true, error: '' };
    case LOGIN_USER_SUCCESS:
      return { ...state, ...INITIAL_STATE, user: action.payload };
    case LOGIN_USER_FAIL:
      return { ...state, error: 'Authentication Failed.', password: '', loading: false };
    default:
      return state;
  }
};

I tried .then(user => console.log(user)) and I don't see the console log until after I tap randomly anywhere on the screen.

If I do .then(console.log('foo') I see foo immediately, but the screen still hangs.

As I mentioned, I'm following a tutorial and the full source is here on GitHub. I've basically got exactly the same code.

Answer 1

I had the same issue. It seems that some firebase functions doesn't work properly in simulator or emulator. I tried running my application in iphone device and it works just fine.