Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@hcaptcha/react-native-hcaptcha
Advanced tools
Readme
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
:
name | purpose |
---|---|
expired | passcode response expired and the user must re-verify |
error | there was an error displaying the challenge |
cancel | the user closed the challenge, or did not answer before session expired |
open | the visual challenge was opened |
Any other string returned by onMessage
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. Thus, you would want code similar to the following in your app when handling onMessage
responses that return a passcode:
this.timeoutCheck = setTimeout(() => {
this.setPasscodeExpired();
}, 120000);
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.Name | Type | Description |
---|---|---|
siteKey (required) | string | The hCaptcha siteKey |
size | string | The size of the checkbox, can be 'invisible', 'compact' or 'checkbox', Default: 'invisible' |
onMessage | Function (see here) | The callback function that runs after receiving a response, error, or when user cancels. |
languageCode | string | Default language for hCaptcha; overrides phone defaults. A complete list of supported languages and their codes can be found here |
showLoading | boolean | Whether to show a loading indicator while the hCaptcha web content loads |
loadingIndicatorColor | string | Color of the ActivityIndicator |
backgroundColor | string | The background color code that will be applied to the main HTML element |
theme | string|object | The theme can be 'light', 'dark', 'contrast' or a custom theme object (see Enterprise docs) |
rqdata | string | Hcaptcha execution options (see Enterprise docs) |
sentry | boolean | sentry error reporting (see Enterprise docs) |
jsSrc | string | The url of api.js. Default: https://js.hcaptcha.com/1/api.js (Override only if using first-party hosting feature.) |
endpoint | string | Point hCaptcha JS Ajax Requests to alternative API Endpoint. Default: https://api.hcaptcha.com (Override only if using first-party hosting feature.) |
reportapi | string | Point hCaptcha Bug Reporting Request to alternative API Endpoint. Default: https://accounts.hcaptcha.com (Override only if using first-party hosting feature.) |
assethost | string | Points loaded hCaptcha assets to a user defined asset location, used for proxies. Default: https://newassets.hcaptcha.com (Override only if using first-party hosting feature.) |
imghost | string | Points loaded hCaptcha challenge images to a user defined image location, used for proxies. Default: https://imgs.hcaptcha.com (Override only if using first-party hosting feature.) |
host | string | hCaptcha SDK host identifier. null value means that it will be generated by SDK |
url (inline component only) | string | The url domain defined on your hCaptcha. You generally will not need to change this. |
style (inline component only) | ViewStyle (see here) | The webview style |
baseUrl (modal component only) | string | The url domain defined on your hCaptcha. You generally will not need to change this. |
passiveSiteKey (modal component only) | boolean | Indicates whether the passive mode is enabled; when true, the modal won't be shown at all |
hasBackdrop (modal component only) | boolean | Defines if the modal backdrop is shown (true by default) |
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)
FAQs
hCaptcha Library for React Native (both Android and iOS)
The npm package @hcaptcha/react-native-hcaptcha receives a total of 2,763 weekly downloads. As such, @hcaptcha/react-native-hcaptcha popularity was classified as popular.
We found that @hcaptcha/react-native-hcaptcha demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.