{"id":24543851,"url":"https://github.com/douglasjunior/react-native-recaptcha-that-works","last_synced_at":"2025-05-15T14:05:18.316Z","repository":{"id":37479775,"uuid":"276777743","full_name":"douglasjunior/react-native-recaptcha-that-works","owner":"douglasjunior","description":"⚛  A reCAPTCHA bridge for React Native that works (Android and iOS)","archived":false,"fork":false,"pushed_at":"2025-05-03T00:46:05.000Z","size":4690,"stargazers_count":173,"open_issues_count":6,"forks_count":34,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-03T01:45:48.758Z","etag":null,"topics":["android","hacktoberfest","ios","react-native","recaptcha"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/douglasjunior.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"douglasjunior","patreon":"douglasjunior","custom":"paypal.me/douglasnassif"}},"created_at":"2020-07-03T01:17:44.000Z","updated_at":"2025-04-22T10:32:37.000Z","dependencies_parsed_at":"2024-09-14T14:21:42.492Z","dependency_job_id":"56cedf91-a601-4432-baf5-740814a65514","html_url":"https://github.com/douglasjunior/react-native-recaptcha-that-works","commit_stats":{"total_commits":62,"total_committers":8,"mean_commits":7.75,"dds":0.5,"last_synced_commit":"5b3d377d2b673eb3a3d6c9f2eb409271034e059d"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglasjunior%2Freact-native-recaptcha-that-works","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglasjunior%2Freact-native-recaptcha-that-works/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglasjunior%2Freact-native-recaptcha-that-works/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/douglasjunior%2Freact-native-recaptcha-that-works/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/douglasjunior","download_url":"https://codeload.github.com/douglasjunior/react-native-recaptcha-that-works/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355334,"owners_count":22057354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","hacktoberfest","ios","react-native","recaptcha"],"created_at":"2025-01-22T20:15:19.409Z","updated_at":"2025-05-15T14:05:13.304Z","avatar_url":"https://github.com/douglasjunior.png","language":"TypeScript","funding_links":["https://github.com/sponsors/douglasjunior","https://patreon.com/douglasjunior","paypal.me/douglasnassif","https://www.patreon.com/douglasjunior","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=E32BUP77SVBA2"],"categories":[],"sub_categories":[],"readme":"# reCAPTCHA for React Native (Android and iOS)\n\n[![License MIT](https://img.shields.io/badge/licence-MIT-blue.svg)](https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/LICENSE)\n[![npm version](https://img.shields.io/npm/v/react-native-recaptcha-that-works.svg)](https://www.npmjs.com/package/react-native-recaptcha-that-works)\n[![npm downloads](https://img.shields.io/npm/dt/react-native-recaptcha-that-works.svg)](#install)\n\n---\n\n## 🚨 Important Notice 🚨\n\nUsers 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.\n\nNow, Google recommends using their [first-party solution for React Native](https://github.com/GoogleCloudPlatform/recaptcha-enterprise-react-native/), which is intended for enterprise use.\n\n⚠️ We encourage you to try both the WebView-based solution and the first-party native library to determine which one best fits your needs.\n\nYou can find more details and the discussion [here](https://github.com/douglasjunior/react-native-recaptcha-that-works/issues/67#issuecomment-2604329675).\n\n---\n\nA reCAPTCHA library for React Native (Android and iOS) that works.\n\n_Looking for [React DOM version](https://github.com/douglasjunior/react-recaptcha-that-works)?_\n\n| Normal | Invisible |\n| - | - |\n| \u003cimg src='https://raw.githubusercontent.com/douglasjunior/react-native-recaptcha-that-works/master/screenshots/normal.gif' width='240' /\u003e | \u003cimg src='https://raw.githubusercontent.com/douglasjunior/react-native-recaptcha-that-works/master/screenshots/invisible.gif' width='240' /\u003e |\n\nTry the [Online demo](https://snack.expo.dev/@douglasjunior/react-native-recaptcha-that-works).\n\n## Install \n\n### Install the module \n\n```bash\n  yarn add react-native-recaptcha-that-works react-native-webview\n```\nOr\n```bash\n  npm i -S react-native-recaptcha-that-works react-native-webview\n```\n\n_See the [`react-native-webview` Getting Started Guide](https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md)._\n\n## Usage\n\nWith \u003cstrong\u003eJavaScript\u003c/strong\u003e:\n\n```jsx\nimport React, { useRef } from 'react';\nimport { View, Button } from 'react-native';\n\nimport Recaptcha from 'react-native-recaptcha-that-works';\n\nconst App = () =\u003e {\n    const recaptcha = useRef();\n\n    const send = () =\u003e {\n        console.log('send!');\n        this.recaptcha.current.open();\n    }\n\n    const onVerify = token =\u003e {\n        console.log('success!', token);\n    }\n\n    const onExpire = () =\u003e {\n        console.warn('expired!');\n    }\n\n    return (\n        \u003cView\u003e\n            \u003cRecaptcha\n                ref={recaptcha}\n                siteKey=\"\u003cyour-recaptcha-public-key\u003e\"\n                baseUrl=\"http://my.domain.com\"\n                onVerify={onVerify}\n                onExpire={onExpire}\n                size=\"invisible\"\n            /\u003e\n            \u003cButton title=\"Send\" onPress={send} /\u003e\n        \u003c/View\u003e\n    );\n}\n```\n\n\u003cdetails\u003e\n    \u003csummary\u003eOr with \u003cstrong\u003eTypeScript\u003c/strong\u003e:\u003c/summary\u003e\n  \n```tsx\nimport React, { useRef } from 'react';\nimport { View, Button } from 'react-native';\n\nimport Recaptcha, { RecaptchaRef } from \"react-native-recaptcha-that-works\";\n\n// ...\n\nexport const Component: React.FC = () =\u003e {\n    const recaptcha = useRef\u003cRecaptchaRef | null\u003e(null);\n\n    const send = () =\u003e {\n        console.log('send!');\n        recaptcha.current?.open();\n    };\n\n    const onVerify = (token: string) =\u003e {\n        console.log('success!', token);\n    };\n\n    const onExpire = () =\u003e {\n        console.warn('expired!');\n    }\n\n    return (\n        \u003cView\u003e\n            \u003cRecaptcha\n                ref={recaptcha}\n                siteKey=\"\u003cyour-recaptcha-public-key\u003e\"\n                baseUrl=\"http://my.domain.com\"\n                onVerify={onVerify}\n                onExpire={onExpire}\n                size=\"invisible\"\n            /\u003e\n            \u003cButton title=\"Send\" onPress={send} /\u003e\n        \u003c/View\u003e\n    );\n};\n```\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\nFor more details, see the [Sample Project](https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/Sample/App.tsx).\n\n## Props\n\n|Name|Value|Default|Description|\n|-|-|-|-|\n|headerComponent|`React Element`||A component to render on top of Modal.|\n|footerComponent|`React Element`||A component to render on bottom of Modal.|\n|loadingComponent|`React Element`||A custom loading component.|\n|style|[`ViewStyle`](https://reactnative.dev/docs/view-style-props)||Customize default style such as background color.|\n|modalProps|[ModalProps](https://reactnative.dev/docs/modal)||Override the Modal props.|\n|webViewProps|[WebViewProps](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md)||Override the WebView props.|\n|lang|`string`||[Language code](https://developers.google.com/recaptcha/docs/language).|\n|siteKey|`string`||(Required) Your Web reCAPTCHA site key. (The Web key must be used, not for Android)|\n|baseUrl|`string`||(Required) The URL (domain) configured in the reCAPTCHA console setup. (ex. http://my.domain.com) (See also https://github.com/douglasjunior/react-native-recaptcha-that-works/issues/34)|\n|size|`'invisible'`, `'normal'` or `'compact'`|`'normal'`|The size of the widget.|\n|theme|`'dark'` or `'light'`|`'light'`|The color theme of the widget.|\n|onLoad|`function()`||A callback function, executed when the reCAPTCHA is ready to use.|\n|onVerify|`function(token)`||(Required) A callback function, executed when the user submits a successful response. The reCAPTCHA response token is passed to your callback.|\n|onExpire|`function()`||A callback function, executed when the reCAPTCHA response expires and the user needs to re-verify. Only works if the `webview` still open after `onVerify` has been called for a long time.|\n|onError|`function(error)`||A callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry.|\n|onClose|`function()`|| A callback function, executed when the Modal is closed.|\n|recaptchaDomain|`string`|`www.google.com`|The host name of the reCAPTCHA valid api. [See detail](https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally).|\n|gstaticDomain|`string`|`www.gstatic.com`|Customize reCAPTCHA `gstatic` host.|\n|hideBadge|`boolean`|`false`|When `size = 'invisible'`, you are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. [See detail](https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed).|\n|enterprise|`boolean` (enterprise)|`false`|Use the new [reCAPTCHA Enterprise API](https://cloud.google.com/recaptcha-enterprise/docs/using-features). Note: for enterprise you need to choose the `size` [when creating the `siteKey`](https://github.com/douglasjunior/react-native-recaptcha-that-works/issues/55#issuecomment-2107089307).|\n|action|`string` (enterprise)|| An [additional parameter](https://cloud.google.com/recaptcha-enterprise/docs/actions) for specifying the action name associated with the protected element for reCAPTCHA Enterprise API.|\n\nNote: If `lang` is not set, then device language is used.\n\n## Methods\n\n|Name|Type|Description|\n|-|-|-|\n|open|`function`|Open the reCAPTCHA Modal.|\n|close|`function`|Close the reCAPTCHA Modal.|\n\nNote: If using `size=\"invisible\"`, then challenge run automatically when `open` is called.\n\n## reCAPTCHA v2 docs\n\n- [I'm not a robot](https://developers.google.com/recaptcha/docs/display)\n- [Invisible](https://developers.google.com/recaptcha/docs/invisible)\n\n## reCAPTCHA Enterprise docs\n\n- [Overview](https://cloud.google.com/recaptcha-enterprise/docs/)\n- [Using features](https://cloud.google.com/recaptcha-enterprise/docs/using-features)\n\n## Troubleshooting\n\n### WebView not loading on iOS\n\nThis is a bug in `react-native-webview` (more details https://github.com/douglasjunior/react-native-recaptcha-that-works/issues/65). PR opened in https://github.com/react-native-webview/react-native-webview/pull/3615.\n\n### reCAPTCAH `siteKey` or `baseUrl` invalid\n\nThis package utilizes the web version of **reCAPTCHA v2**, so in the `siteKey` prop you need to use the **site public key** from the reCAPTCHA console.\n\n\u003cimg src=\"https://github.com/user-attachments/assets/e121de96-d956-426b-9fc5-28fbe58903b0\" height=\"300\" /\u003e\n\n\u003e Create new reCAPTCHA v2 here https://www.google.com/recaptcha/admin/create\n\nAnd the `baseUrl` prop must be a valid domain set in the **Domains** section.\n\n![Screenshot 2024-12-02 at 08 27 13](https://github.com/user-attachments/assets/c4dbca2b-0a4d-43af-996d-3956f9b7901a)\n\n\u003e ```jsx\n\u003e \u003cRecaptcha \n\u003e    siteKey=\"abc123\"\n\u003e    baseUrl=\"http://mysite.com\"\n\u003e /\u003e\n\u003e ```\n\n## Contribute\n\nNew features, bug fixes and improvements are welcome! For questions and suggestions, use the [issues](https://github.com/douglasjunior/react-native-recaptcha-that-works/issues).\n\n\u003ca href=\"https://www.patreon.com/douglasjunior\"\u003e\u003cimg src=\"http://i.imgur.com/xEO164Z.png\" alt=\"Become a Patron!\" width=\"200\" /\u003e\u003c/a\u003e\n[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=E32BUP77SVBA2)\n\n## License\n\n```\nThe MIT License (MIT)\n\nCopyright (c) 2020 Douglas Nassif Roma Junior\n```\n\nSee the full [license file](https://github.com/douglasjunior/react-native-recaptcha-that-works/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdouglasjunior%2Freact-native-recaptcha-that-works","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdouglasjunior%2Freact-native-recaptcha-that-works","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdouglasjunior%2Freact-native-recaptcha-that-works/lists"}