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.