new firebase.auth.RecaptchaVerifier does not work

Version

@nuxtjs/firebase: 6.1.1 firebase: 7.21.1 nuxt: 2.14.5

Trying to use the phone auth and it requires us to use the Firebase recaptcha, as per the official docs, we are to use the below syntax to initialise the Recaptcha Verifier.

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

Steps to reproduce

1. Use the Nuxt Firebase’s Authentication shortcut to initialise the above method

<script>
export default {
  mounted() {
    window.recaptchaVerifier = new this.$fireAuth.RecaptchaVerifier(
      "sign-in-button",
      {
        size: "invisible",
        callback: function (response) {
          // reCAPTCHA solved, allow signInWithPhoneNumber.
          onSignInSubmit();
        },
      }
    );
  },
};
</script>

What is Expected?

Recaptcha is verified

What is actually happening?

Throws a Nuxt error this.$fireAuth.RecaptchaVerifier is not a constructor

[jhonyjss]

This worked for me !

<button type="submit" class="btn btn-primary" id="recaptcha-container">LOGIN</button>

 mounted () {
      this.appVerifier = new this.$fireModule.auth.RecaptchaVerifier('recaptcha-container', {
        'size': 'invisible',
        'callback': (response) => {
          console.log('workrs')
          // reCAPTCHA solved, allow signInWithPhoneNumber.
          // onSignInSubmit();
        }
      });
    },
  
  methods: {
    async login () {
      const loginWithNumber = await this.$fire.auth.signInWithPhoneNumber('[phone]',this.appVerifier)
      console.log(loginWithNumber)
    }
  },

[srijaydeathwish]

@fayazara this.$fireAuth is the Firebase Auth instance, what you need to access RecaptchaVerifier is the module, like so this.$fireAuthObj.RecaptchaVerifier.

See https://firebase.nuxtjs.org/guide/usage#general-usage

If you closely look at the official docs there is a difference between auth().something and auth.something - this is what the difference between $fireAuthObj and $fireAuth is.

Let me know if that helped.

Thanks to @fayazara, I figured out what I was doing wrong as well. If anyone is using @nuxtjs/firebase module, to use recaptcha you need to do “this.$fireModule.auth.RecaptchaVerifier” and for signinWithPhoneNumber it is “this.$fire.auth.signInWithPhoneNumber”.

$fireModule being the keyword for Recaptcha.