hCaptcha wrapper for React Native (Android and iOS)
npm install @hcaptcha/react-native-hcaptcha
yarn add @hcaptcha/react-native-hcaptcha
import ConfirmHcaptcha from '@hcaptcha/react-native-hcaptcha';
Full examples for expo and react-native, as well as debugging guides, are in MAINTAINER.md
See live demo in Snack.
See Example.App.js example in repo for a fully worked example implementation.
For users familiar with the hCaptcha JS API, calling show()
in this wrapper triggers an hcaptcha.execute()
call.
This means that if you are an Enterprise user with a 99.9% passive or purely passive sitekey configured, no additional work is required to get the expected behavior: either a visual challenge will be shown or a token will be returned immediately via onMessage
, in accordance with your configuration.
Also, please note the following special message strings that can be returned via onMessage
for error cases
The even returned by onMessage
with success === true
will be a passcode.
This extension is a lightweight wrapper, and does not currently attempt to manage post-verification state in the same way as the web JS API, e.g. with an on-expire callback.
In particular, if you do not plan to immediately consume the passcode returned by submitting it to your backend, you should start a timer to let your application state know that a new passcode is required when it expires.
By default, this value is 120 seconds. So, an expired
error will be emitted to onMessage
if you haven't called event.markUsed()
.
Once you've utilized hCaptcha's token, call markUsed
on the event object in onMessage
:
const onMessage = event => { if (event && event.nativeEvent.data) { if (event.nativeEvent.data === 'open') { // hCaptcha shown } else if (event.success) { captchaForm.current.hide(); const token = event.nativeEvent.data; // utilize token and call markUsed once you are done with it event.markUsed(); } else if (event.nativeEvent.data === 'challenge-closed') { captchaForm.current.hide(); } else { // handle rest errors } } }; const captchaForm = useRef(null); return ( <ConfirmHcaptcha ref={captchaForm} siteKey={siteKey} languageCode="en" onMessage={onMessage} /> );Handling errors and retry
If your app encounters an error
event, you can reset the hCaptcha SDK flow by calling `event.reset()`` to perform another attempt at verification.
Your app must have the following frameworks/libraries linked:
You must have a recent version of flipper to build this app. If you have upgraded React Native recently, your Flipper version may be out of date. This will cause compilation errors.
Your Podfile should be updated to something like:
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable these next few lines.
use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.87.0', 'Flipper-RSocket' => '1.3.1' })
post_install do |installer|
flipper_post_install(installer)
end
If you encounter build-time errors related to Flipper.
Make sure the value you pass to languageCode
is the one the user has set in your app if you allow them to override the system defaults.
Otherwise, you should pass in the preferred device locale, e.g. fetched from getLocales()
if using react-native-localize.
import Hcaptcha from '@hcaptcha/react-native-hcaptcha/Hcaptcha';
to customize the UI yourself.error
will be sent via onMessage
if it fails to load due to network issues.hasBackdrop=false
, backgroundColor
will apply only after the hCaptcha visual challenge is presented. orientation string This specifies the "orientation" of the challenge. It can be portrait
, landscape
. Default: portrait
Fully functional, but additional releases will be made in the near term.
Changes within the same major release are expected to be additive, i.e. non-breaking.
MIT License. (C) 2021 hCaptcha.
Credits: Originally forked from xuho and filipepiresg's Google reCAPTCHA v2 work. (MIT license)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4