0
votes

I'm using VueJS and Firebase Auth (NPM - Version 5.6.0). I need to convert an anonymous user into an registered user with Google as a provider. I tried the recently updated sample from the Firebase docs:

        anonymousToGoogle: function () {
      var googleUser
      var provider
      var credential = firebase.auth.GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token)
      firebase.auth.currentUser.linkWithRedirect(provider)
      firebase.auth().currentUser.linkAndRetrieveDataWithCredential(credential).then(function (usercred) {
        var user = usercred.user
        console.log('Anonymous account successfully upgraded', user)
      }, function (error) {
        console.log('Error upgrading anonymous account', error)
      })
    }
  }

Button (uses the VuetifyJS framework):

<v-btn block @click="anonymousToGoogle()">CONVERT - Login with Google</v-btn>

The console shows this error after clicking the button:

[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'getAuthResponse' of undefined"

1
How do you set googleUser?Renaud Tarnec
@RenaudTarnec Good question, maybe the official Google Firebase docs are missing something? firebase.google.com/docs/auth/web/…Tom
What I mean is how do you get the value of googleUser within the anonymousToGoogle function? Either you would have it store in the Vue.js component and you would do something like this.googleUser or you have it in a Vuex store, or you should pass it as an argument of the function. But for the moment it seems it is not initialized, hence the error you get when you do googleUser.getAuthResponse()Renaud Tarnec

1 Answers

2
votes

You can just call linkWithRedirect on the anonymous user.

// Assuming you previously signed in anonymously.
firebase.auth().signInAnonymously().then(function(result) {
  var provider = new firebase.auth.GoogleAuthProvider();
  // Page will redirect to google and then back. You can get back
  // result via getRedirectResult().
  return firebase.auth().currentUser.linkWithRedirect(provider);
}).catch(function(error) {
  // Error occurred.
});