0

I'm trying to implement a register page for my React app. The idea is to use firebase auth to create the new accounts and then use their new uid's to create new documents in the firestore database. The problem is that when I try to run the function that handles this, it only runs one of my queries to the firebase services. So whatever comes first works but the second query never runs at all, no errors or anything. And since the auth query needs to go first I can't save all the information from my register form in the firestore database.

I've tried a few different async approaches but nothing works. Here's my code using redux sagas:

import { takeLatest } from 'redux-saga/effects';
import { db, auth } from '../firebase';

function* createProducerAccount (action){
    try{
        const { email, password } = action.payload.account;
        const response = yield auth.createUserWithEmailAndPassword(email, password);
        console.log(response.user.uid);
        yield db.collection("producers").doc(response.user.uid).set(action.payload.producer);
    }
    catch(error){
        console.log('Error in createProducerAccount', error);
    }
}

function* userSaga(){
    yield takeLatest('CREATE_PRODUCER', createProducerAccount);
}

export default userSaga;

Here's a different approach using .then().catch() promises:

export function createAccount(name, email, password, address, token) {
  return dispatch => {
    return auth
      .createUserWithEmailAndPassword(email, password)
      .then(res => {
        const { uid } = res.user;

        return db
          .collection("producers")
          .doc(uid)
          .set(
            {
              displayName: name,
              uid: uid,
              address: address,
              token: token.token,
              followers: [],
              email: email
            },
            { merge: true }
          );
      })
      .catch(error => {
        let errorCode = error.code;
        let errorMessage = error.message;
        console.log(`ERROR (${errorCode}): ${errorMessage}`);
      });
  };
}

Here's a list of stuff I've done to troubleshoot the issue on both approaches:

  • Tried using the .add() method instead of .set() - same issue
  • Comment out the auth.createUserWithEmailAndPassword() on sagas approach makes the firestore query work
  • I thought it might be an issue of not getting the information back on time from the server but I used manually inputted information in the query and that didn't work either
  • Tried splitting the two queries into two functions - same issue
  • Tried removing the { merge: true } from second approach - same issue
  • Even tried sacrificing my raspberry pi to the gods of programming but they only like arduinos

Please help!

billyblazedev
  • 19
  • 3
  • I think you are using the wrong approach with the `then()`, if you take a look at this [community answer](https://stackoverflow.com/questions/37602168/firebase-returning-user-object-after-account-creation), which is for plain javascript, but still, you can see that if you look for the `user` parameter returned instead of the `res` you will be able to get the value you want by doing `user.uid`, so my suggestion would be to use the same `then()` structure as that answer, which wont fit the comment word count if I was to write it. Let me know if this solves your issue. – Ralemos Jul 15 '20 at 12:39
  • Thank you for the suggestion! I actually tried putting a console.log() to see if res.user.uid actually existed and it did. I fixed the problem yesterday though, found an answer in the community with zero points and literally at the bottom of every answer and that worked!! Here's the [link](https://stackoverflow.com/a/61509126)... – billyblazedev Jul 16 '20 at 18:26

1 Answers1

1

I fixed the problem, found an answer in the community with zero points and literally at the bottom of every other answer and that worked! Here's the link...

billyblazedev
  • 19
  • 3