Detect when Auth store actions are complete?

[jrsamuel]

I am using the Auth.initialize option in my nuxt.config.js file as follows

        initialize: {
          onAuthStateChangedMutation: 'SetUser',
          // onAuthStateChangedAction: 'Login'
        }

And in the store, I do a simple mutation as follows

export const mutations = {
    SetUser(state, { authUser }) {
        if (!authUser) {
            state.user = null
        } else {
            const { uid, displayName } = authUser
            state.user = { uid, displayName }
        }
    }
}

I await the login and then redirect as follows

let res = await this.$fireAuth.signInWithPopup(provider)
console.log(this.$store.state.user)
this.$router.push("/bank")

The '/bank' page has a middleware navigation guard that checks to see if the user has been set in the store. Since the mutation is asynchronous, the redirect fails because the user isn't set. The console log returns null.

Since this module is calling the mutation 'behind the scenes', I don't know how to detect when the mutation is complete so I can wait to fire the redirect.

Hope that is clear... any ideas on how to do this?

Thanks for any help anyone can provide.

[yaojiach]

I'm experiencing this same behavior.

[lupas]

Hey you two

Try doing it with a watch() function like mentioned here.

Let me know if that works for you.

[yaojiach]

Confirming this worked for me. Thanks you!

[jrsamuel]

Worked for me as well.

I looked through previous issues before I posted but I guessed I missed this one. Sorry.

Still might be nice to have some callback to reference instead of having to use a watcher for this. But this will work.

Thanks for the help.