{"id":18675243,"url":"https://github.com/snelsi/next-recaptcha-v3","last_synced_at":"2025-10-10T04:15:59.908Z","repository":{"id":37042692,"uuid":"493647497","full_name":"snelsi/next-recaptcha-v3","owner":"snelsi","description":"ā­ Straightforward solution for using ReCaptcha in your Next.js application","archived":false,"fork":false,"pushed_at":"2024-05-03T11:07:41.000Z","size":440,"stargazers_count":99,"open_issues_count":0,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-09-19T13:49:22.719Z","etag":null,"topics":["nextjs","react","recaptcha","recaptcha-v3"],"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/snelsi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2022-05-18T12:10:28.000Z","updated_at":"2024-09-11T08:41:29.000Z","dependencies_parsed_at":"2022-06-25T06:29:18.172Z","dependency_job_id":"9f7bb285-79c7-48eb-b163-88d057bdf836","html_url":"https://github.com/snelsi/next-recaptcha-v3","commit_stats":{"total_commits":67,"total_committers":5,"mean_commits":13.4,"dds":"0.11940298507462688","last_synced_commit":"12d67a9dd51a2ecc69bc3c522ec5af859edca77f"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snelsi%2Fnext-recaptcha-v3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snelsi%2Fnext-recaptcha-v3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snelsi%2Fnext-recaptcha-v3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snelsi%2Fnext-recaptcha-v3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/snelsi","download_url":"https://codeload.github.com/snelsi/next-recaptcha-v3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441053,"owners_count":20939239,"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":["nextjs","react","recaptcha","recaptcha-v3"],"created_at":"2024-11-07T09:23:48.999Z","updated_at":"2025-10-10T04:15:54.861Z","avatar_url":"https://github.com/snelsi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eā­ Next.js ReCaptcha V3\u003c/h1\u003e\n\nStraightforward solution for using ReCaptcha in your [Next.js](https://nextjs.org/) application.\n\n[![npm package](https://img.shields.io/npm/v/next-recaptcha-v3/latest.svg)](https://www.npmjs.com/package/next-recaptcha-v3)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/next-recaptcha-v3?style=flat-square)](https://bundlephobia.com/result?p=next-recaptcha-v3)\n![type definition](https://img.shields.io/npm/types/next-recaptcha-v3)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/snelsi/next-hubspot/blob/master/LICENSE)\n\nšŸ—œļø Tiny and Tree-Shakable\n\nšŸ„° Written in TypeScript\n\nšŸ… Highly customizable\n\nšŸ˜Ž Uses `next/script` component\n\n## Install\n\n```ssh\nnpm i next-recaptcha-v3\n```\n\n```ssh\npnpm i next-recaptcha-v3\n```\n\n```ssh\nyarn add next-recaptcha-v3\n```\n\n## Pure ESM package\n\nThis package is [pure ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). It cannot be `require()`'d from CommonJS.\n\n## Generate reCAPTCHA Key\n\nTo use ReCaptcha, you need to generate a `reCAPTCHA_site_key` for your site's domain. You can get one [here](https://www.google.com/recaptcha/intro/v3.html).\n\nYou can either add generated key as a [Next.js env variable](https://nextjs.org/docs/basic-features/environment-variables)\n\n```ssh\nNEXT_PUBLIC_RECAPTCHA_SITE_KEY=\"GTM-XXXXXXX\"\n```\n\nor pass it directly to the `ReCaptchaProvider` using `reCaptchaKey` attribute.\n\n## Getting Started\n\nWrap your application with `ReCaptchaProvider`.\nIt will load [ReCaptcha script](https://www.google.com/recaptcha/api.js) to your document.\n\n```tsx\nimport { ReCaptchaProvider } from \"next-recaptcha-v3\";\n\nconst MyApp = ({ Component, pageProps }) =\u003e (\n \u003cReCaptchaProvider reCaptchaKey=\"[GTM-XXXXXXX]\"\u003e\n \u003cComponent {...pageProps} /\u003e\n \u003c/ReCaptchaProvider\u003e\n);\n```\n\n`ReCaptchaProvider` uses [Next.js Script](https://nextjs.org/docs/basic-features/script) to add ReCaptcha script to the document.\n\n## ReCaptchaProvider Props\n\n| **Prop** | **Type** | **Default** | **Required** | **Description** |\n| --------------- | -------- | ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| reCaptchaKey | string | | ? | Your reCAPTCHA key, get one from [here](https://www.google.com/recaptcha/about) |\n| useEnterprise | boolean | false | | Set to `true` if you use [ReCaptcha Enterprise](https://cloud.google.com/recaptcha-enterprise) |\n| useRecaptchaNet | boolean | false | | Set to `true` if you want to use `recaptcha.net` to load ReCaptcha script. [docs](https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally) |\n| language | string | | | Optional [Language Code](https://developers.google.com/recaptcha/docs/language) |\n\nYou must pass `reCaptchaKey` if `NEXT_PUBLIC_RECAPTCHA_SITE_KEY` env variable is not defined.\n\nAll extra props are passed directly to the Script tag, so you can use all props from the [next/script documentation](https://nextjs.org/docs/api-reference/next/script).\n\n## Accessing global context props\n\nYou can access global `grecaptcha` object, script's loading state and other props by calling `useReCaptcha` hook:\n\n```tsx\nimport { useReCaptcha } from \"next-recaptcha-v3\";\n\nconst {\n /** reCAPTCHA_site_key */\n reCaptchaKey,\n /** Global ReCaptcha object */\n grecaptcha,\n /** If `true`, ReCaptcha script has been loaded */\n isLoaded,\n /** If `true`, an error occurred while loading ReCaptcha script */\n isError,\n /** Error received while loading ReCaptcha script */\n error,\n /** Other hook props */\n ...otherProps\n} = useReCaptcha();\n```\n\n### reCAPTCHA Enterprise\n\nIf you're using [reCAPTCHA Enterprise](https://cloud.google.com/recaptcha-enterprise), add `useEnterprise` to your `ReCaptchaProvider`. Checkout official quickstart guide [here](https://cloud.google.com/recaptcha-enterprise/docs/quickstart).\n\n```tsx\nimport { ReCaptchaProvider } from \"next-recaptcha-v3\";\n\nconst MyApp = ({ Component, pageProps }) =\u003e (\n \u003cReCaptchaProvider useEnterprise\u003e\n \u003cComponent {...pageProps} /\u003e\n \u003c/ReCaptchaProvider\u003e\n);\n```\n\n## Usage\n\nWhen invoked, ReCaptcha will analyze the user's behavior and create a one-time [token](https://developers.google.com/recaptcha/docs/v3#programmatically_invoke_the_challenge). It can only be used once and is only valid for a couple of minutes, so you should generate it just before the actual validation.\n\nSend the resulting token to the API request to your server. You can then decrypt the token using the ReCaptcha [/siteverify](https://developers.google.com/recaptcha/docs/verify) API and ignore the call if it came from a bot.\n\n1. React Hook: `useReCaptcha` (recommended approach)\n\nUse `executeRecaptcha` function returned from the `useReCaptcha` hook to generate token. Add a unique [action name](https://developers.google.com/recaptcha/docs/v3#actions) to better understand at what moment the token was generated.\n\n\u003e šŸ›ˆ Note: Actions might contain only alphanumeric characters, slashes, and underscores. Actions must not be user-specific.\n\n```tsx\nimport { useState, useCallback } from \"react\";\nimport { useReCaptcha } from \"next-recaptcha-v3\";\n\nconst MyForm = () =\u003e {\n const [name, setName] = useState(\"\");\n\n // Import 'executeRecaptcha' using 'useReCaptcha' hook\n const { executeRecaptcha } = useReCaptcha();\n\n const handleSubmit = useCallback(\n async (e) =\u003e {\n e.preventDefault();\n\n // Generate ReCaptcha token\n const token = await executeRecaptcha(\"form_submit\");\n\n // Attach generated token to your API requests and validate it on the server\n fetch(\"/api/form-submit\", {\n method: \"POST\",\n body: {\n data: { name },\n token,\n },\n });\n },\n [executeRecaptcha, name],\n );\n\n return (\n \u003cform onSubmit={handleSubmit}\u003e\n \u003cinput name=\"name\" value={name} onChange={(e) =\u003e setName(e.target.value)} /\u003e\n \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n \u003c/form\u003e\n );\n};\n```\n\n2. `ReCaptcha` component\n\nAlternatively, you can also generate token by using `ReCaptcha` component.\n\n```tsx\nimport { useEffect, useState } from \"react\";\nimport { ReCaptcha } from \"next-recaptcha-v3\";\nimport { validateToken } from \"./utils\";\n\nconst MyPage = () =\u003e {\n const [token, setToken] = useState\u003cstring\u003e(null);\n\n useEffect(() =\u003e {\n if (token) {\n // Validate token and make some actions if it's a bot\n validateToken(token);\n }\n }, [token]);\n\n return (\n \u003c\u003e\n \u003cReCaptcha onValidate={setToken} action=\"page_view\" /\u003e\n \u003ch1\u003eHello\u003c/h1\u003e\n \u003c/\u003e\n );\n};\n```\n\n3. `withReCaptcha` HOC\n\n```tsx\nimport { useEffect, useState } from \"react\";\nimport { withReCaptcha, WithReCaptchaProps } from \"next-recaptcha-v3\";\nimport { validateToken } from \"./utils\";\n\ninterface MyPageProps extends WithReCaptchaProps {}\n\nconst MyPage: React.FC\u003cMyPageProps\u003e = ({ isLoaded, executeRecaptcha }) =\u003e {\n const [token, setToken] = useState\u003cstring\u003e(null);\n\n useEffect(() =\u003e {\n if (isLoaded) {\n const generateToken = async () =\u003e {\n const newToken = await executeRecaptcha(\"page_view\");\n setToken(newToken);\n };\n generateToken();\n }\n }, [isLoaded, executeRecaptcha]);\n\n useEffect(() =\u003e {\n if (token) {\n // Validate token and make some actions if it's a bot\n validateToken(token);\n }\n }, [token]);\n\n return \u003ch1\u003eHello\u003c/h1\u003e;\n};\n\nexport default withReCaptcha(MyPage);\n```\n\n## Helpful links\n\n\u003cdetails\u003e\n \u003csummary\u003e\n List of helpful links, docs, guides and tutorials.\n \u003c/summary\u003e\n\n- [Google Developers Portal](https://developers.google.com/recaptcha/)\n- [Video: Introducing reCAPTCHA v3](https://www.youtube.com/watch?v=tbvxFW4UJdU)\n- [Blog: Introducing reCAPTCHA v3](https://developers.google.com/search/blog/2018/10/introducing-recaptcha-v3-new-way-to)\n- [What is reCAPTCHA?](https://www.google.com/recaptcha/about/)\n- [How To Add Google ReCAPTCHA V3 In A Next.Js Form](https://www.techomoro.com/how-to-add-google-recaptcha-v3-in-a-next-js-form/)\n- [Integrating reCAPTCHA v3 with Next.js](https://dev.to/sumukhakb210/integrating-recaptcha-with-nextjs-4ig6)\n- [Integrating reCAPTCHA v2 with Next.js](https://prateeksurana.me/blog/integrating-recaptcha-with-next/)\n- [Github Repo: reCAPTCHA v3 with Next.js](https://github.com/kokou2kpadenou/recaptcha3-nextjs)\n\u003c/details\u003e\n\n## TypeScript\n\nThe module is written in TypeScript and type definitions are included.\n\n## Contributing\n\nContributions, issues and feature requests are welcome!\n\n## Show your support\n\nGive a ā­ļø if you like this project!\n\n## LICENSE\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnelsi%2Fnext-recaptcha-v3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnelsi%2Fnext-recaptcha-v3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnelsi%2Fnext-recaptcha-v3/lists"}