next-recaptcha-v3 0.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 Roman Zhuravlov
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,205 @@
+<h1>⭐ Next.js ReCaptcha V3</h1>
+
+Straightforward solution for using ReCaptcha in your [Next.js](https://nextjs.org/) application.
+
+[![npm package](https://img.shields.io/npm/v/next-recaptcha-v3/latest.svg)](https://www.npmjs.com/package/next-recaptcha-v3)
+![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)
+![type definition](https://img.shields.io/npm/types/next-recaptcha-v3)
+
+🗜️ Tiny and Tree-Shakable
+
+🥰 Written in TypeScript
+
+🐅 Highly customizable
+
+😎 Uses `next/script` component
+
+## Install
+
+```ssh
+yarn add next-recaptcha-v3
+```
+
+or
+
+```ssh
+npm install next-recaptcha-v3 --save
+```
+
+## Generate reCAPTCHA Key
+
+To 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).
+
+You can either add generated key as a [Next.js env variable](https://nextjs.org/docs/basic-features/environment-variables)
+
+```ssh
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY="GTM-XXXXXXX"
+```
+
+or pass it directly to the `ReCaptchaProvider` using `reCaptchaKey` attribute.
+
+## Getting Started
+
+Wrap your application with `ReCaptchaProvider`.
+It will load [ReCaptcha script](https://www.google.com/recaptcha/api.js) to your document.
+
+```tsx
+import { ReCaptchaProvider } from "next-recaptcha-v3";
+
+const MyApp = ({ Component, pageProps }) => (
+  <ReCaptchaProvider reCaptchaKey="[GTM-XXXXXXX]">
+    <Component {...pageProps} />
+  </ReCaptchaProvider>
+);
+```
+
+`ReCaptchaProvider` uses [Next.js Script](https://nextjs.org/docs/basic-features/script) to add ReCaptcha script to the document.
+
+## ReCaptchaProvider Props
+
+| **Prop**        | **Type** | **Default** | **Required** | **Description**                                                                                                                                                  |
+| --------------- | -------- | ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| reCaptchaKey    | string   |             | No           | Your reCAPTCHA key, get one from [here](https://www.google.com/recaptcha/about)                                                                                  |
+| useEnterprise   | boolean  | false       | No           | Set to `true` if you use [ReCaptcha Enterprise](https://cloud.google.com/recaptcha-enterprise)                                                                   |
+| useRecaptchaNet | boolean  | false       | No           | 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) |
+| language        | string   |             | No           | Optional [Language Code](https://developers.google.com/recaptcha/docs/language)                                                                                  |
+
+All 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).
+
+### reCAPTCHA Enterprise
+
+If 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).
+
+```tsx
+import { ReCaptchaProvider } from "next-recaptcha-v3";
+
+const MyApp = ({ Component, pageProps }) => (
+  <ReCaptchaProvider useEnterprise>
+    <Component {...pageProps} />
+  </ReCaptchaProvider>
+);
+```
+
+## Usage
+
+When 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.
+
+Send 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.
+
+1. React Hook: `useReCaptcha` (recommended approach)
+
+Use `executeRecaptcha` function returned from the `useReCaptcha` hook to generate token. Add a unique action name to better understand at what moment the token was generated
+
+```tsx
+import { useState } from "react";
+import { useReCaptcha } from "next-recaptcha-v3";
+
+const MyForm = () => {
+  const [name, setName] = useState("");
+
+  // Import 'executeRecaptcha' using 'useReCaptcha' hook
+  const { executeRecaptcha } = useReCaptcha();
+
+  const handleSubmit = useCallback(async (e) => {
+    e.preventDefault();
+
+    // Generate ReCaptcha token
+    const token = await executeRecaptcha("form-submit");
+
+    // Attach generated token to your API requests and validate it on the server
+    fetch("/api/form-submit", {
+      method: "POST",
+      body: {
+        data: { name },
+        token,
+      },
+    });
+  }, []);
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+```
+
+2. `ReCaptcha` component
+
+Alternatively, you can also generate token by using `ReCaptcha` component.
+
+```tsx
+import { useEffect } from "react";
+import { ReCaptcha } from "next-recaptcha-v3";
+import { validateToken } from "./utils";
+
+const MyPage = () => {
+  const [token, setToken] = useState<string>(null);
+
+  useEffect(() => {
+    if (token) {
+      // Validate token and make some actions if it's a bot
+      validateToken(token);
+    }
+  }, [token]);
+
+  return (
+    <>
+      <GoogleReCaptcha onVerify={setToken} action="page-view" />
+      <h1>Hello</h1>
+    </>
+  );
+};
+```
+
+3. `withReCaptcha` HOC
+
+```tsx
+import { useEffect } from "react";
+import { withReCaptcha, WithReCaptchaProps } from "next-recaptcha-v3";
+import { validateToken } from "./utils";
+
+interface MyPageProps extends WithReCaptchaProps {}
+
+const MyPage: React.FC<MyPageProps> = ({ executeRecaptcha }) => {
+  const [token, setToken] = useState<string>(null);
+
+  useEffect(() => {
+    if (typeof executeRecaptcha === "function") {
+      const generateToken = async () => {
+        const newToken = await executeRecaptcha("page-view");
+        setToken(newToken);
+      };
+      generateToken();
+    }
+  }, [executeRecaptcha]);
+
+  useEffect(() => {
+    if (token) {
+      // Validate token and make some actions if it's a bot
+      validateToken(token);
+    }
+  }, [token]);
+
+  return <h1>Hello</h1>;
+};
+
+export default withReCaptcha(MyPage);
+```
+
+## TypeScript
+
+The module is written in TypeScript and type definitions are included.
+
+## Contributing
+
+Contributions, issues and feature requests are welcome!
+
+## Show your support
+
+Give a ⭐️ if you like this project!
+
+## LICENSE
+
+[MIT](./LICENSE)

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "next-recaptcha-v3",
+  "version": "0.0.1",
+  "description": "🤖 Next.js hook to add Google ReCaptcha to your application",
+  "license": "MIT",
+  "author": "Roman Zhuravlov",
+  "repository": "https://github.com/snelsi/next-recaptcha-v3",
+  "homepage": "https://github.com/snelsi/next-recaptcha-v3",
+  "keywords": [
+    "recaptcha",
+    "recaptcha-v3",
+    "google-recaptcha-v3",
+    "next",
+    "next.js",
+    "react",
+    "hook"
+  ],
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/esm/index.d.ts",
+  "files": [
+    "/lib"
+  ],
+  "scripts": {
+    "build": "yarn build:esm && yarn build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
+    "prettier": "prettier --write .",
+    "lint": "eslint",
+    "lint-fix": "eslint --fix",
+    "fix": "npm run prettier && npm run lint-fix",
+    "pre-commit": "npm run lint && lint-staged",
+    "post-commit": "git update-index --again"
+  },
+  "peerDependencies": {
+    "next": ">=11.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "engines": {
+    "node": ">=12.22.0"
+  },
+  "dependencies": {
+    "next": "^12.1.6",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.34",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/parser": "^5.25.0",
+    "eslint": "^8.15.0",
+    "eslint-config-next": "^12.1.6",
+    "eslint-config-prettier": "^8.5.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^12.4.1",
+    "prettier": "^2.6.2",
+    "pretty-quick": "^3.1.3",
+    "typescript": "^4.6.4"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "pretty-quick --staged"
+    ]
+  }
+}