Im trying to implement recaptcha in expo web but keep getting errors. How do I implement recaptcha in expo web? Do I use html and scripts?
I've tried to use Webview (react-native-web-webview) and added config in webpack.config but keep getting error Cannot read properties of undefined (reading 'postMessage')
Note: react-native-web-webview uses iframe for web.
import WebView from 'react-native-webview';
const getWebviewContent = () => {
var originalForm = '<!DOCTYPE html><html><head><script src="https://www.google.com/recaptcha/api.js"></script></head><body><form action="[POST_URL]" method="post"><input type="hidden" value="[TITLE]"><input type="hidden" value="[DESCRIPTION]"><input type="hidden" value="[URL]"><div class="g-recaptcha" data-sitekey="<site-key>"></div><input type="submit" value="Send"/></form></body></html>'
var tmp = originalForm
.replace("[POST_URL]", "http://localhost:19006/Contact")
.replace("[TITLE]", 'title')
.replace("[DESCRIPTION]", 'description')
.replace("[URL]", 'http://localhost:19006/Contact');
return tmp;
}
<WebView
javaScriptEnabled={true}
mixedContentMode={'always'}
style={{ height: 500, width: 500 }}
source={{
html: getWebviewContent(),
baseUrl: '<domain>' // <-- SET YOUR DOMAIN HERE
}} />
I've also tried to use libraries and still getting the same error
import Recaptcha from 'react-native-recaptcha-that-works';
<Recaptcha
ref={recaptcha}
siteKey="<site-key>"
baseUrl="http://localhost:19006/Contact"
onVerify={onVerify}
onExpire={onExpire}
onError={(err) => {
alert('onError event');
console.warn(JSON.stringify(err));
}}
size="normal"
/>