Example of use

[EdwinJDiaz]

hello can you help me if I'm using the component correctly, I can not render the view of the captcha

"react-native-recaptcha-v3": "0.0.13",

import ReCaptcha from 'react-native-recaptcha-v3'

onReady(value) {
console.log("Captcha value:", value);
}
onExecute(value) {
console.log("Captcha value:", value);
}

<ReCaptcha
containerStyle={{height:200}}
siteKey='SITEKEY'
url='DOMAIN'
action='verify'
reCaptchaType={2}
onReady={this.onReady.bind(this)}
onExecute={this.onExecute.bind(this)}

      />

[acsant]

Hi Edwin!
Could you try changing the containerStyle It seems like you're providing the correct props for everything else. See if the ReCaptcha appears with its default styles?

Let me know how that goes!
Akash

[acsant]

Hey! I just realized and I should've probably documented this better. The normal reCaptcha is meant to use for firebase projects only since firebase doesn't yet support reCaptcha v3. So you may have to pass in a firebase config that you can find in your firebase console. Let me know if you need help finding the configs on the console. I can definitely help you with that. Otherwise for just react-native projects, I would recommend using the invisible recaptcha which uses the new v3.

[ribuluo000]

Otherwise for just react-native projects, I would recommend using the invisible recaptcha which uses the new v3.

@acsant Could you please provide a demo on react-native using the invisible recaptcha? Thanks.

[acsant]

@ribuluo000

<ReCaptcha 
          siteKey="_<SITE_KEY>_"
          url='_<URL you registered on admin console>_'
          action='_<ACTION_NAME>_'
          onExecute={this.captureResponseToken} // I use this function to save the response token 
        />

[ozturkilgim]

Can you please share the function captureResponseToken() ?
I need help for using the token to verify firebase auth applicationVerifier.

[ozturkilgim]

I have an error like:
" signInWithPhoneNumber failed: Second argument "applicationVerifier" must be an implementation of firebase.auth.ApplicationVerifier. "

I got token "message" from funct onExecute but I couldn't define ApplicationVerifier.

[naveedshahji]

@ozturkilgim have you solved the problem, I am facing same issue.

[acsant]

@ozturkilgim @naveedshahji
Here's the function I use to capture the response token:

captureResponseToken (responseToken) {
    this.submissionToken = responseToken;
  }

Also it might help binding that function to the current class's context by doing

this.captureResponseToken = this.captureResponseToken.bind(this);

in the constructor of your class. Make sure that you're saving a non-null response token as a result.

[naveedshahji]

@ozturkilgim thanks, please can you paste the code of full example here, I try it but maybe i am missing something.

[acsant]

@naveedshahji
Here's what I have in my render block:

render() {
   <ReCaptcha
         siteKey="<SITE_KEY>"
         url='<API_URL>'
         action='verify'
         onExecute={this.captureResponseToken}
         containerStyle={styles.recaptchaContainer}
       />
}

[naveedshahji]

@ozturkilgim MY RENDER BLOCK
render() {

return (
  
  <ReCaptcha 
      // containerStyle={{flex:1,height:200}}
      siteKey="6LfENxETAAAAAKUDuj-.............."
      url='............................firebaseio.com'
      action='verify'
      onExecute={this.captureResponseToken} // I use this function to save the response token 
    />
);

}
and I am using samsung tablet, I am getting the complete blank white screen. unable to see recaptcha, May be I missing style, but I tried different style but unable to see it.

[SteponasIvasovas]

My ReCaptcha isn't rendered either, here's my code
<ReCaptcha containerStyle={styles.recaptcha} siteKey={config.SITE_KEY} url={config.RECAPTCHA_URL} action="verify" reCaptchaType={1} />

and here's rendered output:

containerStyle:
recaptcha: { height: 200, width: '100%', marginTop: 'auto', borderWidth: 1, },

any ideas what I am doing wrong ? is it possible that it might not render if domain url is incorrect?

[MeherBa]

@ozturkilgim have you solved the problem ? i faced the same issue. But i used recaptcha v2 ( images challenge ) with firebase.auth.RecaptchaVerifier and worked fine when signInWithPhoneNumber.is it possible to signIn with recaptcha v3 without solving challenges?

[ilgimozturkk]

I couldn't solve it then I changed my way. I think its an important deficiency of expo.

[acsant]

@ozturkilgim have you solved the problem ? i faced the same issue. But i used recaptcha v2 ( images challenge ) with firebase.auth.RecaptchaVerifier and worked fine when signInWithPhoneNumber.is it possible to signIn with recaptcha v3 without solving challenges?

Hi @ozturkilgim. I believe that recaptcha-v3 was initially experimental and has recently been released as a stable. Because of this, I believe that firebase doesn't yet have support for it. Someone feel free to correct me if I am wrong.

[sarangvasishth]

@MeherBa I am also trying to use recaptcha with firebase.auth.RecaptchaVerifier. Did you use react-native ??

[MeherBa]

@sarangvasishth here is an official blog for how you can do it Guard your web content from abuse, and for the mobile part use webview

[sarangvasishth]

@MeherBa yeah, I have worked on it and created a response token using ""https://www.google.com/recaptcha/api.js" and site key, and verified response using "https://recaptcha.google.com/recaptcha/api/siteverify" and secret key. I assumed either response token or JSON object received after verifying recaptcha would work as a second argument (Appverifier) to function "signInWithPhoneNumber", but they don't.

It would be really helpful, if you can tell me your implementation of firebase.auth.RecaptchaVerifier, which the link that you gave doesn't discuss.

[sirmong]

this could help you to move forward with captcha response:
/////////////////////////////////////////////////////////////////
const verifier = 'RESPONSE_FROM_CAPTCHA'

const captchaVerifier = {
type: 'recaptcha',
verify: () => Promise.resolve(this.state.verifier)
}

try {
const confirmationResult = await firebase
.auth()
.signInWithPhoneNumber(phoneNumber, captchaVerifier)
//SMS has been sent
this.setState({ confirmationResult, isSmsSent: true })
} catch (e) {
console.warn(e)
}

//with confirmationResult and SMS code you can register user

[pooja-chothe]

I want to call recaptcha on button click how we can do that. Please provide example if anyone know.

[kingeke]

I want to call recaptcha on button click how we can do that. Please provide example if anyone know.
@pooja-chothe hey, did you find the solution?

[kingeke]

@acsant please how can i fire the onExecute function like on a button click, i'm using v3 and non of the functions are firing, the onReady and onExecute

   <ReCaptcha ref={this.recaptchaRef} containerStyle={{ height: 50, width: '100%', marginTop: 'auto', borderWidth: 1, }} siteKey={recaptchaKey} url='URL' onExecute={(token) => this.captureResponseToken(token)} reCaptchaType={1} onReady={() => console.log('capcha is ready')} />

 onReady = (token) => {
        console.log('from ready')
        console.log(token)
    }

    captureResponseToken = (token) => {
        console.log(token)
    }

[ghost]

@acsant please how can i fire the onExecute function like on a button click, i'm using v3 and non of the functions are firing, the onReady and onExecute

   <ReCaptcha ref={this.recaptchaRef} containerStyle={{ height: 50, width: '100%', marginTop: 'auto', borderWidth: 1, }} siteKey={recaptchaKey} url='URL' onExecute={(token) => this.captureResponseToken(token)} reCaptchaType={1} onReady={() => console.log('capcha is ready')} />

 onReady = (token) => {
        console.log('from ready')
        console.log(token)
    }

    captureResponseToken = (token) => {
        console.log(token)
    }

Hi,
I had to add this to MessageWebView.js on react-native 0.60.4

facebook/react-native#10865 (comment)

[Polombo98]

@kingeke Did you find any solution?

[kingeke]

@Polombo98 no I didn't.

[egpayawal]

I'm having the same issue, how to fire the onExecute? @acsant

[PrantikMondal]

@ozturkilgim @naveedshahji
Here's the function I use to capture the response token:

captureResponseToken (responseToken) {
    this.submissionToken = responseToken;
  }

Also it might help binding that function to the current class's context by doing

this.captureResponseToken = this.captureResponseToken.bind(this);

in the constructor of your class. Make sure that you're saving a non-null response token as a result.

I am not receiving any response using this code.

My code is :
<ReCaptcha
siteKey="My_SITE_KEY"
url='https://www.google.com/recaptcha/api/My_SITE_KEY'
action='verify'
reCaptchaType={1}
onExecute={(token) => this.captureResponseToken(token)} // I use this function to
save the response token but not receiving any
/>

captureResponseToken = (token) => {
    console.log(token)
}

Am i doing something wrong?