Convert anonymous user to registered user with Firebase Auth for Google

Question

I'm using Firebase Auth with VueJS and I need to convert an anonymous auth user to a registered one with Google.

I'm using this code from an example:

  fromAnonymousToGoogle: function () {
  // Authenticate with the first user then save the currentUser to a local variable
    var previousUser = Firebase.auth().currentUser

  // Authenticate with a second method and get a credential
    var credential = Firebase.auth.GoogleAuthProvider()

    previousUser.link(credential)
    .catch(function (error) {
     // Linking will often fail if the account has already been linked. Handle these cases manually.
      alert(error)
    })

    // OAuth providers authenticate in an asynchronous manner, so you’ll want to perform the link account link in the callback.
    // previousUser = Firebase.auth().currentUser;
    Firebase.auth().signInWithPopup(new Firebase.auth.GoogleAuthProvider())
     .then(function (result) {
       return previousUser.link(result.credential)
     })
     .catch(function (err) {
       // Handle error
       alert(err)
     })
  },

I get this error by trying to link the account to Google:

[Vue warn]: Error in event handler for "click": "TypeError: this.ta is not a function"

I don't have a function called this.ta in my code. How to fix this error?

Answer 1

To answer you last question, the reason you're running into this error is because you're not actually getting a credential with var credential = Firebase.auth.GoogleAuthProvider() but a Provider ID. So when you're trying to link() with the provider ID, it simply isn't working (I verified running into the same error due to this section of your code).

You actually don't want to sign in the user with the Google credentials, since this would sign out your anonymous user and sign in using Google. You just want to link the current user with some Google credentials, which you can just use the linkWithPopup method to accomplish (I renamed variables to make a little more sense).

fromAnonymousToGoogle: function () {
            // Authenticate with the first user then save the currentUser to a local variable
            var anonUser = Firebase.auth().currentUser

            // Authenticate with a second method and get a credential
            var provider = new Firebase.auth.GoogleAuthProvider();

            anonUser.linkWithPopup(provider).then(function(result) {
                googleToken = result.credential;
                console.log(googleToken);
            }).catch(function(error) {
                console.error("Google sign in failed", error);
            });
    },

Having tested this out myself, this appears to be the way to approach linking them using a popup, most closely matched to your originally provided code.