Closed fayazara closed 4 years ago
Bro @fayazara, have you got the solution?
@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.
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)
}
},
Hi Johny,
When I'm using mounted, it gives me the below error.
@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.
how reset the recaptchaVerifier if error occurs
window.recaptchaVerifier.render().then(function(widgetId) {
grecaptcha.reset(widgetId);
}
@fayazara
this.$fireAuth
is the Firebase Auth instance, what you need to access RecaptchaVerifier is the module, like sothis.$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
andauth.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.
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.
Steps to reproduce
What is Expected?
Recaptcha is verified
What is actually happening?
Throws a Nuxt error
this.$fireAuth.RecaptchaVerifier is not a constructor