Repository files navigation

Users have recently observed a significant increase in "high risk requests" when using reCAPTCHA solution with WebView. Upon further investigation, we found that the official documentation advises against using WebView-based implementations for reCAPTCHA on iOS and Android.

Now, Google recommends using theirfirst-party solution for React Native, which is intended for enterprise use.

⚠️ We encourage you to try both the WebView-based solution and the first-party native library to determine which one best fits your needs.

You can find more details and the discussionhere.

A reCAPTCHA library for React Native (Android and iOS) that works.

Looking forReact DOM version?

Normal	Invisible

Try theOnline demo.

  yarn add react-native-recaptcha-that-works react-native-webview

Or

  npm i -S react-native-recaptcha-that-works react-native-webview

See thereact-native-webview Getting Started Guide.

WithJavaScript:

importReact,{useRef}from'react';import{View,Button}from'react-native';importRecaptchafrom'react-native-recaptcha-that-works';constApp=()=>{constrecaptcha=useRef();constsend=()=>{console.log('send!');this.recaptcha.current.open();}constonVerify=token=>{console.log('success!',token);}constonExpire=()=>{console.warn('expired!');}return(<View><Recaptcharef={recaptcha}siteKey="<your-recaptcha-public-key>"baseUrl="http://my.domain.com"onVerify={onVerify}onExpire={onExpire}size="invisible"/><Buttontitle="Send"onPress={send}/></View>);}

importReact,{useRef}from'react';import{View,Button}from'react-native';importRecaptcha,{RecaptchaRef}from"react-native-recaptcha-that-works";// ...exportconstComponent:React.FC=()=>{constrecaptcha=useRef<RecaptchaRef|null>(null);constsend=()=>{console.log('send!');recaptcha.current?.open();};constonVerify=(token:string)=>{console.log('success!',token);};constonExpire=()=>{console.warn('expired!');}return(<View><Recaptcharef={recaptcha}siteKey="<your-recaptcha-public-key>"baseUrl="http://my.domain.com"onVerify={onVerify}onExpire={onExpire}size="invisible"/><Buttontitle="Send"onPress={send}/></View>);};

For more details, see theSample Project.

Note: Iflang is not set, then device language is used.

Note: If usingsize="invisible", then challenge run automatically whenopen is called.

• I'm not a robot
• Invisible

• Overview
• Using features

This is a bug inreact-native-webview (more details#65). PR opened inreact-native-webview/react-native-webview#3615.

This package utilizes the web version ofreCAPTCHA v2, so in thesiteKey prop you need to use thesite public key from the reCAPTCHA console.

Create new reCAPTCHA v2 herehttps://www.google.com/recaptcha/admin/create

And thebaseUrl prop must be a valid domain set in theDomains section.

<RecaptchasiteKey="abc123"baseUrl="http://mysite.com"/>

New features, bug fixes and improvements are welcome! For questions and suggestions, use theissues.

The MIT License (MIT)Copyright (c) 2020 Douglas Nassif Roma Junior

See the fulllicense file.