reactjs - JavaScript catch does not work as expected with an async error throwing

Question

I am working on the error handling with react and firebase user authentication. I am trying to rethrow the error from signUpWIthEmailAndPassword to handleRegisteration for UI displaying.

export const signUpWIthEmailAndPassword = async (email, password) => {
    if (email != null && password != null) {

      auth.createUserWithEmailAndPassword(email, password)
      .catch((error) => {
        console.log(error.message);
        throw error;
      })
    } else {
      window.alert("Form is incomplete! Please fill out all fields!");
    }
  }

const handleRegisteration =  async (e) => {
    console.log("in call back");

    signUpWIthEmailAndPassword(email,password)
    .catch((error) => {
      setRegisterationError(error.message);
    });
    
    e.preventDefault();
  }

However, currently I have the following error in the browser console.

I have done a lot of research today and none of them seems to work. Please let me now what is the problem here.

Thank you!

Answer 1

export const signUpWIthEmailAndPassword = async (email, password) => {
    if (email != null && password != null) {

      try {
         await auth.createUserWithEmailAndPassword(email, password);
      catch(e) {
        console.log(error.message);
        throw error;
      }
    } else {
      window.alert("Form is incomplete! Please fill out all fields!");
    }
}

Use await so your function will wait for auth.createUserWithEmailAndPassword to be resolved and catch the errors.