signInSuccessWithAuthResult callback does not work consistently with async code

[REQUIRED] Describe your environment

• Operating System version: Windows 10
• Browser version: Chrome 88.0.4324.146 x64
• Firebase UI version: 4.7.3
• Firebase SDK version: 8.2.6

[REQUIRED] Describe the problem

Async code within signInSuccessWithAuthResult does not always finish, or the auth callback isn’t finished yet when the async code starts (not 100% sure which one).

Steps to reproduce:

1. Create Firebase UI widget with signInSuccessWithAuthResult callback and async code within.
2. Sign up for a new user account with Google
3. Watch as async code does not always finish running.

Relevant Code:

callbacks: {
  signInSuccessWithAuthResult: (authResult) => {
    const uid = authResult.user.uid;
    console.log("uid: " + uid);

    // Add a new document to Firestore
    db.collection("users")
      .doc(uid)
      .set({
        createdAt: firebase.firestore.FieldValue.serverTimestamp(),
        processed: false,
      })
      .then(() => {
        console.log("in promise");
        // Redirect to sign up step 2
        this.$router.push({ name: "Sign Up 2" });
      })
      .catch((error) => {
        console.error("Error adding document: ", error);
      });
    console.log("end of auth callback");
  },
},

It looks like the auth result does not finalize before the write to Firestore starts. I get this error sometimes (yes, my rules are set up correctly and sometimes I get the “in promise” line). But notice how it prints the error (or “in promise”) after the “end of auth callback” log.

When it gets the error:

When it successfully writes:

[davidstackio]

@bojeil-google @yingqi-chen Thank you both for helping me get to the bottom of this. It looks like it’s working as expected now. The main problem was not explicitly returning false like this:

...
console.log("end of auth callback");
return false;

As an aside, the async/await syntax did not work (I didn’t even get the “in promise” print out), so I left it with the then syntax.

[bojeil-google]

I think one good practice if you want to run your own async logic on success and redirect is to do something similar to what @yingqi-chen described. You just return false. This means firebaseui will run the callback and since it returns false, it will not redirect to a signInSuccessUrl, thus not interrupting your success logic. You also have to ensure that no other redirect in your own logic interrupts your own logic.