next-recaptcha-v3 1.1.2 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -4
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -112,7 +112,9 @@ Send the resulting token to the API request to your server. You can then decrypt
|
|
|
112
112
|
|
|
113
113
|
1. React Hook: `useReCaptcha` (recommended approach)
|
|
114
114
|
|
|
115
|
-
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
|
|
115
|
+
Use `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.
|
|
116
|
+
|
|
117
|
+
> 🛈 Actions may only contain alphanumeric characters and slashes, and must not be user-specific.
|
|
116
118
|
|
|
117
119
|
```tsx
|
|
118
120
|
import { useState } from "react";
|
|
@@ -128,7 +130,7 @@ const MyForm = () => {
|
|
|
128
130
|
e.preventDefault();
|
|
129
131
|
|
|
130
132
|
// Generate ReCaptcha token
|
|
131
|
-
const token = await executeRecaptcha("
|
|
133
|
+
const token = await executeRecaptcha("form_submit");
|
|
132
134
|
|
|
133
135
|
// Attach generated token to your API requests and validate it on the server
|
|
134
136
|
fetch("/api/form-submit", {
|
|
@@ -170,7 +172,7 @@ const MyPage = () => {
|
|
|
170
172
|
|
|
171
173
|
return (
|
|
172
174
|
<>
|
|
173
|
-
<ReCaptcha onValidate={setToken} action="
|
|
175
|
+
<ReCaptcha onValidate={setToken} action="page_view" />
|
|
174
176
|
<h1>Hello</h1>
|
|
175
177
|
</>
|
|
176
178
|
);
|
|
@@ -192,7 +194,7 @@ const MyPage: React.FC<MyPageProps> = ({ loaded, executeRecaptcha }) => {
|
|
|
192
194
|
useEffect(() => {
|
|
193
195
|
if (loaded) {
|
|
194
196
|
const generateToken = async () => {
|
|
195
|
-
const newToken = await executeRecaptcha("
|
|
197
|
+
const newToken = await executeRecaptcha("page_view");
|
|
196
198
|
setToken(newToken);
|
|
197
199
|
};
|
|
198
200
|
generateToken();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next-recaptcha-v3",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"description": "🤖 Next.js hook to add Google ReCaptcha to your application",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Roman Zhuravlov",
|
|
@@ -43,21 +43,21 @@
|
|
|
43
43
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
44
44
|
"@rollup/plugin-typescript": "^11.0.0",
|
|
45
45
|
"@types/node": "^18.13.0",
|
|
46
|
-
"@types/react": "^18.0.
|
|
46
|
+
"@types/react": "^18.0.28",
|
|
47
47
|
"@types/react-dom": "^18.0.10",
|
|
48
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
49
|
-
"@typescript-eslint/parser": "^5.
|
|
50
|
-
"eslint": "^8.
|
|
48
|
+
"@typescript-eslint/eslint-plugin": "^5.52.0",
|
|
49
|
+
"@typescript-eslint/parser": "^5.52.0",
|
|
50
|
+
"eslint": "^8.34.0",
|
|
51
51
|
"eslint-config-next": "^13.1.6",
|
|
52
52
|
"eslint-config-prettier": "^8.6.0",
|
|
53
53
|
"husky": "^8.0.3",
|
|
54
|
-
"lint-staged": "^13.1.
|
|
54
|
+
"lint-staged": "^13.1.2",
|
|
55
55
|
"next": "^13.1.6",
|
|
56
|
-
"prettier": "^2.8.
|
|
56
|
+
"prettier": "^2.8.4",
|
|
57
57
|
"pretty-quick": "^3.1.3",
|
|
58
58
|
"react": "^18.2.0",
|
|
59
59
|
"react-dom": "^18.2.0",
|
|
60
|
-
"rollup": "^3.
|
|
60
|
+
"rollup": "^3.15.0",
|
|
61
61
|
"rollup-plugin-node-externals": "^5.1.2",
|
|
62
62
|
"typescript": "^4.9.5"
|
|
63
63
|
},
|