Firebase authentication with Redux-Saga not working

Question

I am trying to create a new user using firebase auth. I am using redux-saga to make the above call.

Below is my saga.js:

import { takeLatest, put } from 'redux-saga/effects';
import { SIGN_UP, AUTHENTICATION_FAILED, SIGN_UP_SUCCESS} from '../actions/index';
import firebase from 'firebase';


function* signUp(action){
    console.log("about to call authentication"); // This being printed
    firebase.auth().createUserWithEmailAndPassword(action.user.email, action.user.password)
            .then(function*(result){
                    console.log("success"); // Not being loged
                    yield put({SIGN_UP_SUCCESS, user: action.user});
            }).catch(function*(error){
                    console.log("failed"); //Not being loged
                    let error_message = { code: error.code, message: error.message};
                    yield put({AUTHENTICATION_FAILED, error: error_message});
            });
}

function* rootSaga(){
  yield takeLatest(SIGN_UP, signUp);
}

export  default rootSaga;

The code inside then and catch is not being executed, Sign Up generator function is being called. Can anyone please tell me what I am doing wrong?

Psychotherapy

Answer 1

A more redux-saga idiomatic way of writing the code would look like this:

function* signUp(action){
  try {
    const auth = firebase.auth()
    const result = yield call(
      [auth, auth.createUserWithEmailAndPassword],
      action.user.email,
      action.user.password
    )

    yield put({ type: SIGN_UP_SUCCESS, user: action.user });
  } catch (error) {
    const error_message = { code: error.code, message: error.message };

    yield put({ type: AUTHENTICATION_FAILED, error: error_message });
  }
}

Please see https://redux-saga.js.org/docs/api/#callcontext-fn-args for call's documentation.

Burdette

Answer 2

The problem in your code above is that you are passing generators as handlers of the then and catch. They should be just functions since there is no any code to iterate over them. What happens is that you get a generator iterator created.

You are of course free to use promises but I'll suggest to follow the redux-saga way and pass your createUserWithEmailAndPassword to yield call.

Repast