Firebase and JavaScript. Adding custom user fields when creating user

Question

EDIT: This was made with Nextjs. I created a new vanilla CRA. It works like a charm there. It seems like the problem is related to Nextjs in some way.

I'm trying to create a new user document for containing additional user information, when a new user is created. I have a function which will first create a new user, and then populate a new document in my users collection.

The user gets created, however the users collection does not get populated with a new user document, containing the additional information.

const createUser = (user) => {

  fire.auth()
    .createUserWithEmailAndPassword(user.email, user.password)
    .then((registeredUser) => {
      // shows me the newly created user's id.
      console.log(registeredUser.user.uid);
      fire.firestore().collection('users')
        .add({
          uid: registeredUser.user.uid,
          firstName: user.firstName,
          lastName: user.lastName,
        }).catch((err) => {
          // No errors.
          console.log(err);
        });
    });
};

However, if I do this, where I add fire.firestore().collection('users').add({});

I will get two new documents stored in my users collection, both the empty object from the 'dummy' line, and also the document with the additional user information.

const createUser = (user) => {
  // If I'm adding this line, I get both the empty object, and the additional user info
  // stored in db.
  fire.firestore().collection('users').add({});

  fire.auth()
    .createUserWithEmailAndPassword(user.email, user.password)
    .then((registeredUser) => {
      // shows me the newly created user's id.
      console.log(registeredUser.user.uid);
      fire.firestore().collection('users')
        .add({
          uid: registeredUser.user.uid,
          firstName: user.firstName,
          lastName: user.lastName,
        }).catch((err) => {
          // No errors.
          console.log(err);
        });
    });
};

Can someone explain to me why this is happening? Why doesn't the first block of code work? How can I make the first block of code work, so that I get my additional user fields in the database?

Any help would be much appreciated.

Regards Stephan Valois

Doug Stevenson · Accepted Answer · 2020-07-11 16:57:44Z

1

It's not clear at all why you need this line to add an empty document:

fire.firestore().collection('users').add({});

I would just remove it. It doesn't seem to add any value.

Also, I would strongly urge you to use the UID of the user as the ID of the document, instead of accepting the random ID created by add(). This will make it much easier for you to location the document in the future, given only the UID of the user:

fire.firestore().collection('users').doc(registeredUser.user.uid).set({
    uid: registeredUser.user.uid,
    firstName: user.firstName,
    lastName: user.lastName,
})

answered Jul 11, 2020 at 16:57

Doug Stevenson

321k37 gold badges458 silver badges474 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stephan Bakkelund Valois Over a year ago

That's what's weird. If I remove it, the rest of the code block doesn't save the user's additional fields, only the created user. When I have that odd line, it saves both the user's additional fields, and the empty object. I will to use set instead.

Doug Stevenson Over a year ago

You should be aware that newly created users with email/password auth don't have a first or last name associated with the account yet. You have to add those to the auth profile first.

Stephan Bakkelund Valois Over a year ago

This problem might be related to Nextjs, I tried creating a new react app, with only a form and the code block. That worked. There is not a problem with the code itself..

Collectives™ on Stack Overflow

Firebase and JavaScript. Adding custom user fields when creating user

EDIT: This was made with Nextjs. I created a new vanilla CRA. It works like a charm there. It seems like the problem is related to Nextjs in some way.

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT: This was made with Nextjs. I created a new vanilla CRA. It works like a charm there. It seems like the problem is related to Nextjs in some way.

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related