Internal Error when creating new user with Firebase Auth in React

Question

I am working with Firebase for authentication in my application, and below is the function I am calling on my form. Before I had added the .then() with the updateProfile inside, it was working fine. However, now when I create a new user, the user's email and password is stored, but I get the error Internal error: Too much recursion and the displayName is never set.

const handleSignUp = useCallback(
    async (event) => {
      event.preventDefault();
      const { fullName, email, password } = event.target.elements;
      try {
        await app
          .auth()
          .createUserWithEmailAndPassword(email.value, password.value)
          .then((result) => {
            const user = app.auth().currentUser;
            return user.updateProfile({
              displayName: fullName,
            });
          });
      } catch (error) {
        alert(error);
      }
      history.push("/dashboard");
    },
    [history]
  );

I've tried different ways of calling updateProfile (using the function argument & the user variable as in the example below. I am still getting this error.

Is there a way to write this code to avoid that recursion error?

Louis Coulet Louis Coulet · Accepted Answer · 2020-09-13T09:14:14

First, I suggest you to choose between using async/await or then to handle promises.
Second, you can use createUserWithEmailAndPassword return value, as such:

const userCredentials = await app.auth().createUserWithEmailAndPassword(email.value, password.value);
const user = userCredentials.user;
await user.updateProfile({ displayName: fullName });

The relevant documentation: https://firebase.google.com/docs/reference/js/firebase.auth.Auth#createuserwithemailandpassword

Internal Error when creating new user with Firebase Auth in React

1 Answers