How to use await in a passthrough function

I'm trying to use await inside a function I think it's a passthrough function.

I'm creating a user with 'createUserWithEmailAndPassword' then passing the 'cred' object into what to do if the user is created successfully. If the user is created succesfully the code then writes the user info and sets place holders for further signup info in the database ready for the user to comeplete sign up.

The problem is, the page is refreshing to the next phase of sign up (a different page) before the database writes are being completed.

I have no idea how to get await to work inside the '.then()' section and if the database writes arent in that part where the 'cred' object is being fed the 'cred.user.uid' won't work which is integral

Here is my code:

        await createUserWithEmailAndPassword(auth, email, password)
          .then((cred) => {
            console.log('User Created:', cred.user);

            //Create Stand-In User Doc
            setDoc(doc(db, 'users', cred.user.uid, 'userInfo', 'signupInfo'), {
              dob: dob,
              signupAge: age,
              tosAccepted: true,
            });

            setDoc(doc(db, 'users', cred.user.uid, 'technical', 'signup'), {
              passedGo: false,
              userDetailsComplete: false,
              phoneNoComplete: false,
              initialized: false
            });

            signupForm.reset();
            document.querySelector('#accCreated').removeAttribute('style', 'display: none;');
          })

I have tried putting the database updates outside of the .then() section but I need the 'cred' data for it to work.

I have also tried creating a async function iniside the .then() section but that also cuts the contents of the function off from the 'cred' object

I have also tried putting the database updates inside the 'onAuthStateChanged' function hoping that would provide the 'cred' info / uid etc. But that didnt work. I don't think the user is logged in at sign up

Combining await with then is not the way to go. await lets you specifically skip the then part of the asynchronous function and store the return of said function into a variable.

const cred = await createUserWithEmailAndPassword(auth, email, password);
console.log('User Created:', cred.user);

Now, assuming that setDoc is also async, you'd need to await those, too, so the reset doesn't get triggerd before it's done.

await setDoc(...);
await setDoc(...);
signupForm.reset();

But to answer your other question: You can make a then function async like this:

.then(async (cred) => { ... })