new firebase.auth.RecaptchaVerifier does not work

[fayazara]

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

[Mr-Zer0]

Bro @fayazara, have you got the solution?

[lupas]

@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.

[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('+5511999999999',this.appVerifier)
      console.log(loginWithNumber)
    }
  },

[aerialsportshub]

Hi Johny,

When I'm using mounted, it gives me the below error.

[jonadeline]

@aerialsportshub The first argument of RecaptchaVerifier method should be a valid HTML id (the one of your button), if not it's throwing this error.

[PRAJINPRAKASH]

how reset the recaptchaVerifier if error occurs

window.recaptchaVerifier.render().then(function(widgetId) {
  grecaptcha.reset(widgetId);
}

[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.