4

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()
4
  • I'm looking to rig up a similar flow in a Vue app. How did this unfold? Any luck?
    – krry
    Commented Jan 24, 2021 at 10:19
  • @krry negative, still waiting for this support to be added, still using Recaptcha v2 :/ Commented Jan 26, 2021 at 1:22
  • Any chance you got to make this work?
    – mikegross
    Commented Jun 11 at 13:11
  • @mikegross unfortunately not, but stopped using Firebase for projects a few years ago so the support for v3 invisible recaptcha may have been added by now, but recaptcha enterprise was a solution I recently added to my Next.js apps, and worked decently well. Commented Jun 13 at 0:40

0