Links in recaptcha web view not working?

misterharsh commented 2 years ago

What version of React Native? react: "^16.13.1", react-native: "^0.63.4"
What version of React Native WebView? react-native-webview": "^10.10.2", react-native-modal: "^11.5.6"
What version of the library? react-native-recaptcha-that-works: "^1.3.0"
iOS/Android version? using the iPhone 5s/8/13 simulator + Pixel 3 API 28/Pixel 4 API 30 emulator
Did the problem happen after updating React Native? haven't upgraded RN since installing the library
Are you using the library for the first time? yes
It's a bug? Provide a link to a minimal reproduction case.

This might be an issue with the Recaptcha from google itself, since it's being injected into a WebView.

For visuals, the recaptcha works for both android & iOS. The redo button also resets the images correctly.

For the audio,

on android, the audio clip doesn't seem to play even though the button clicks and highlights.
on iOS, the audio clip plays and also resets when you click on that redo button.

For the info, it seems to take a few clicks for it to pop up, but the links dont work on either platform.

I looked over the source code of the library and it's just injecting the recaptcha from <script src="https://${validHost}/recaptcha/api.js?hl={{lang}}" async defer></script> into

<body>
  <div class="container">
    <span id="recaptcha-container"></span>
  </div>
</body>

I'd expect clicking on the Learn more link (or other similar links in the info messages) to open a web browser in the web view and redirect to said links. But nothing happens on click, or multiple clicks.

douglasjunior commented 2 years ago

Navigation is blocked to prevent user to navigate outside the template page.

What we can do, is to create a prop to customize the onShouldStartLoadWithRequest and onNavigationStateChange.

What you think?

misterharsh commented 2 years ago

yeh I think the onShouldStartLoadWithRequest could work since im guessing the redirect links are based on google's recaptcha.

<WebView
  source={{ uri: 'https://reactnative.dev' }}
  onShouldStartLoadWithRequest={(request) => {
    // Only allow navigating within this website
    return request.url.startsWith('https://reactnative.dev');
  }}
/>

douglasjunior commented 2 years ago

Done!

https://github.com/douglasjunior/react-native-recaptcha-that-works/releases/tag/1.3.1

douglasjunior / react-native-recaptcha-that-works

Links in recaptcha web view not working? #29