Chained promises not working

[evtlucas]

[REQUIRED] Describe your environment

• Operating System version: Ubuntu 18.04
• Browser version: Firefox 76.0.1
• Firebase SDK version: 7.14.6
• Firebase Product: firestore (auth, database, storage, etc)

[REQUIRED] Describe the problem

I'm trying to create a document inside a collection called users from "then" inside fb.auth.createUserWithEmailAndPassword. There is a doc.set inside this "then". The second "then" is not working, and it makes the page freezes. If I make some change in the code, the "reactivitity" unfreezes the page and I can get the document created after I click on a link that calls fb.auth.signOut. It seems that the inner "then" promise is pending.

Steps to reproduce:

Relevant Code:

signup () {
  this.performingRequest = true
  return fb.auth.createUserWithEmailAndPassword(this.signupForm.email, this.signupForm.password).then(user => {
    this.$store.commit('setCurrentUser', user.user)
    // create user obj
    const userProfile = {
      name: this.signupForm.name,
      title: this.signupForm.title
    }
    const promise = fb.usersCollection.doc(user.user.uid).set(userProfile)
    return promise.then(() => {
      this.$store.dispatch('fetchUserProfile')
      this.performingRequest = false
      this.$router.push('/dashboard')
    }).catch(err => {
      this.performingRequest = false
      console.log(err)
      this.errorMsg = err.message
    })
  }).catch(err => {
    this.performingRequest = false
    console.log(err)
    this.errorMsg = err.message
  })
}

https://stackblitz.com/fork/firebase-issue-sandbox

// TODO(you): code here to reproduce the problem

[tylerhahn]

I ran into this error as well.
In order to this working again, I had to use async awaits instead of .then();

[evtlucas]

Thanks for the help! It worked!

Here is the solution:

  async signup () {
      this.performingRequest = true
      await fb.auth.createUserWithEmailAndPassword(this.signupForm.email, this.signupForm.password).then(user => {
        this.$store.commit('setCurrentUser', user.user)
      })
      const user = this.$store.getters.getCurrentUser
      const userProfile = {
        name: this.signupForm.name,
        title: this.signupForm.title
      }
      fb.usersCollection.doc(user.uid).set(userProfile).then(() => {
        this.$store.dispatch('fetchUserProfile')
        this.performingRequest = false
        this.$router.push('/dashboard')
      }).catch(err => {
        this.performingRequest = false
        console.log(err)
        this.errorMsg = err.message
      })
    }