I am trying to implement reCaptcha v3 into my site and am currently using React.js and Firebase for Authentication. I was using reCaptcha (v2?) before with Firebase's built in auth method firebase.auth.RecaptchaVerifier
following the same method as this SO post. Besides my own need for a reCaptcha, Firebase requires it sometimes for their authentication purposes for Registering/Signing In.
I am unsure on how to use this react-recaptcha-v3 library and implement it with the firebase.auth.RecaptchaVerifier
method as I did before. Is there a way I can pass the token directly to Firebase for their authentication purposes? Or maybe I am using the verifyCallback
from react-recaptcha-v3
callback function wrong in firebase.auth.RecaptchaVerifier
? Maybe reCaptcha v3 is not available with firebase.auth.RecaptchaVerifier
yet? Maybe I should just use the reCaptcha v2 invisible version to achieve the desired effect?
react-recaptcha-v3 example code:
import React, { Component } from 'react';
import { ReCaptcha } from 'react-recaptcha-v3'
class ExampleComponent extends Component {
verifyCallback = (recaptchaToken) => {
// Here you will get the final recaptchaToken!!!
console.log(recaptchaToken, "<= your recaptcha token")
// do something with the token?
}
render() {
return (
<div>
<ReCaptcha
sitekey="your_site_key"
action='action_name'
verifyCallback={this.verifyCallback}
/>
</div>
);
};
};
export default ExampleComponent;
Current RecaptchaVerifier usage:
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha', {
'callback': (response) => {
// reCAPTCHA solved, allow.
},
'expired-callback': () => {
// Response expired. Ask user to solve reCAPTCHA again.
window.recaptchaVerifier.clear()
}
})
window.recaptchaVerifier.render()