When a user registers, where (server or client) should I submit a new user entry in Cloud Firestore?

Question

I have a signup page where a user can create an account by entering email, password and clicking submit. The onClick of the submit button is:

onClick={async () => {
   await firebase.auth().createUserWithEmailAndPassword(email, password).then(function() {
      // If successful, take user to home page
      Router.push('/');
   }).catch(function(error) {
      throw error;
   });
}}

This code runs on the client-side (I checked by doing console.log and seeing that the message appears only on the F12 client/browser console and not the host console).

Now, after the user registers, I want to submit a user entry in Cloud Firestore (so I can save/update the user's data such as subscriptions, friends...whatever). This is the code I'll use for this: (copied from the Firestore documentation)

const docRef = db.collection('users').doc('steve');

await docRef.set({
  uid: 'a8934jbsa'
  first: 'Steve',
  last: 'McGarrett',
  born: 1977
});

My problem is that I don't know where to put this. I can think of two solutions:

1. Client-side where I'll have to submit the database entry above Router.push('/'); and this means that I'll have to import and initialize firebase-admin on a /page js file but I'm not sure this is safe.
2. Server-side where I'll have to do getServerSideProps() on every page, load the cookies, get the stored JWT token, decode it and check if a user entry with that UID exists.

I'm relatively new with Next.js and I can't think of other ways to do this.

====================================================

SOLUTION:

I used the admin firebase on the client-side and not in getServerSideProps. That caused an error. So I used firebase.firestore()... instead of admin.firestore()...

Answer 1

I would recommend you to go with Server-side.

As well explained in this article here, the best option usually is to use Server-side to handle the data and manage your database, as it's much safer than using it via Client-side - which is one of your worries - and it's usually faster as well. Using this method, you can control better the data being send and the addition to the database.

Considering the fact that you don't have much experience as you mentioned, I would recommend you to check documentation for examples - which are usually for Server-side - so you can get more information. You can access, for example, this tutorial here, with details and examples of using Firestore on Server-side with Node.js.