how to use await inside then callback?-CodePudding

I want to be able to create a document with the user id once a user has signed up I found out that that best place to do this since it happens only once is when a user has signed up the issue here is it is a await function and the only place I get the user id is in then callback any idea how to syntax this..

const Signup =  (email: string, password: string) => {
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        const docRef = doc(db, 'clients', user.uid);
        const payload = { clients: [] };
        async () => await setDoc(docRef, payload);
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        //const errorMessage = error.message;
        console.log(errorCode);
        if (errorCode === 'auth/weak-password') {
          _miscContext.SetSnackBarMsg(true, 'password must be at least 6 charechters');
        }
        if (errorCode === 'auth/email-already-in-use') {
          _miscContext.SetSnackBarMsg(true, 'email already exists');
        }
      });
  };

CodePudding user response：

The idea of .catch and .then methods is to return another Promise that can be chained.

You can just return it from the callback. If the returned type of the .then function is a Promise it will be ignored, otherwise, it will be transformed to the Promise, so that's why you can chain .then and .catch methods

Also, this question: should I always use asych / await:

Let's understand what is doing async and await keywords (you need to understand this, and you will get where and why you need to use them).

async - this is just converting your function to async function (you can add async to your function and change it to the Promsie`

here is the simple example

function example() { return 1; }

console.log(example());   // log: 1

with async

async function example() { return 1; }

console.log(example());   // log: Promise {<fulfilled>: 1}

// so if the async function is just converting your function to the promise, it means you can get the value by `.then` and `.catch` methods

await - only uses inside async function, and just waiting to the Promise completing and converting the promise to the response

// just dummy example

async function example() {
   
   const responseOfPromise =  await Promise.resolve(3);

   return responseOfPromise;
   
}

Usage example of your actual function

const Signup =  (email: string, password: string) => {
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        const docRef = doc(db, 'clients', user.uid);
        const payload = { clients: [] };
       return setDoc(docRef, payload)
      })
      .then((responseOfSetDocFunction) => {
           // and here the callback argument will be returned value from previous then (returned value of setDoc function)
           console.log(responseOfSetDocFunction);
      })
      .catch((error) => {
        const errorCode = error.code;
        //const errorMessage = error.message;
        console.log(errorCode);
        if (errorCode === 'auth/weak-password') {
          _miscContext.SetSnackBarMsg(true, 'password must be at least 6 charechters');
        }
        if (errorCode === 'auth/email-already-in-use') {
          _miscContext.SetSnackBarMsg(true, 'email already exists');
        }
      });
  };