Firebase Google signInWithRedirect not redirecting to specified page on successful authentication

Question

Little bit help/explanation needed with the following problem. I am using Vue and Firebase for my project.

I am trying to set up the Firebase Google sign-in by calling signInWithRedirect . Authentication itself works, however not exactly how I want it.

I need it to redirect to /dashboard after authentication takes place, but currently it redirects back to /login page after a short loading.

I understand that I have to use getRedirectResult, but I am not sure how exactly call it. Would be very grateful if someone could explain how I can write my code correctly in order to get the wanted results.

.signInWithRedirect(fb.googleProvider)
.then(credential => {
this.$store.commit("setCurrentUser", credential.user)
fb.usersCollection.doc(credential.user.uid).set({
}).then(() => {
this.$store.dispatch("fetchUserProfile")
this.updateGmailData()
this.$router.push("/dashboard")
}).catch(err => {
console.log(err)
})
}).catch(err => {
console.log(err);
});
},

I believe that my initial authentication should look something like this -

googleLogin() {
fb.auth.signInWithPopup(fb.googleProvider)
}

And after that I should set up the function for the getRedirectResult, which should push the router to the /dashboard?

How to make redirection to wait for the getRedirectResult and to redirect /dashboard after getting the needed results.

I am out of the ideas how to implement it.

Answer 1

signInWithRedirect will redirect back to the same page where sign-in will be completed. You can then use getRedirectResult() or onAuthStateChanged listener to redirect to your dashboard after user is signed in.

In your sign in button click handler, call:

// This will redirect to IdP for sign-in.
firebase.auth.signInWithRedirect(fb.googleProvider);

Then on the same page, you can set a listener:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User signed in, you can get redirect result here if needed.
    // ...
    this.$router.push("/dashboard");
    // ....
  } else {
    // Show sign in screen with button above.
  }
});

Answer 2

These one works for me:

googleLogin(){

  this.afAuth.auth.signInWithPopup(new  
  firebase.auth.GoogleAuthProvider()).then(result=>{

     console.log(result)
  }).catch(err=>{
     console.log(err)
  })
}