I have below is a method that signs a user up with their email and password and create a document in Firebase when the user enters their info into a form and clicks submit:

const onSubmitHandler = async (e) => {
        e.preventDefault();

        try {
            const { user } = await createAuthUserWithEmailAndPassword(email, password);
            console.log(user, 'user')

            await createUserDocumentFromAuth(user, { displayName })
        }catch(err) {
            if(err === 'auth/email-already-in-use') {
                alert('Account with this email already exists');
                return;
            }else {
                console.log(err)
            }
        }
    }

For this function call:

await createUserDocumentFromAuth(user, { displayName })

where displayName can be a string, such as ElonMusk. In the actual createUserDocumentFromAuth, I am calling the setDoc method, which is one from Firebase to set a user document:

export const createUserDocumentFromAuth = async ( userAuth, additionalInfo = {} ) => {
  if(!userAuth) return;
  console.log(additionalInfo, 'additionalInfo')
  const userDocRef = doc(db, 'users', userAuth.uid);
  const userSnapshot = await getDoc(userDocRef);

  if(!userSnapshot.exists()) {
    const { displayName, email } = userAuth;
    const createdAt = new Date();
    try {
      // set the doc here
      await setDoc(userDocRef, {
        displayName,
        email,
        createdAt,
        ...additionalInfo
      });
    } catch(err) {
      console.log('err creating the user', err)
    }
  };

  return userDocRef;
}

The reason I passed { displayName } in manually is because there is a case where the server's response to createAuthUserWithEmailAndPassword(email, password) has displayName to be null, but we want the user to have a displayName registered in the database.

My question is:

1. Why does displayName only work when it is passed in as an object and not just in its normal form? For example:

await createUserDocumentFromAuth(user, { displayName })

will replace the displayName: null But not when I pass in:

await createUserDocumentFromAuth(user, displayName)

2. What is this technique called in JavaScript?

CodePudding user response：

If you look into createUserDocumentFromAuth, you'll see that it's expects two arguments userAuth and additionalInfo, both arguments are expected to be objects.

It later uses data from additionalInfo to add/overwrite anything in userAuth when calling setDoc() method.

So, I'd recommend add

console.log(userDocRef, {
        displayName,
        email,
        createdAt,
        ...additionalInfo
      });

to see what what data is being sent to setDoc()