feat: Add captcha on sign up (#459)

* feat: Add captcha on sign up

* no need for ref

package.json

@@ -16,6 +16,7 @@
 	"dependencies": {
 		"@geist-ui/react": "^2.1.5",
 		"@geist-ui/react-icons": "^1.0.1",
+		"@hcaptcha/react-hcaptcha": "^1.4.4",
 		"@reacherhq/api": "^0.3.2",
 		"@sendinblue/client": "^3.2.2",
 		"@sentry/nextjs": "^7.24.2",

src/pages/signup.tsx

@@ -1,4 +1,5 @@
 import { Input, Link as GLink, Select, Spacer, Text } from '@geist-ui/react';
+import HCaptcha from '@hcaptcha/react-hcaptcha';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 
@@ -81,6 +82,7 @@ export default function SignUp(): React.ReactElement {
 		undefined
 	);
 	const [feedback, setFeedback] = useState<string | undefined>();
+	const [passedCatpcha, setPassedCatpcha] = useState(false);
 
 	const router = useRouter();
 	const { user, signUp } = useUser();
@@ -143,8 +145,17 @@ export default function SignUp(): React.ReactElement {
 
 			<Spacer />
 
+			<div className="text-center">
+				<HCaptcha
+					sitekey="e8cdd278-b060-4c52-9625-7719ee025d5a" // Public site key
+					onVerify={() => setPassedCatpcha(true)}
+				/>
+			</div>
+
+			<Spacer />
+
 			<SigninButton
-				disabled={loading}
+				disabled={loading || !passedCatpcha}
 				loading={loading}
 				onClick={() => {
 					handleSignup().catch(sentryException);

yarn.lock

@@ -45,6 +45,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.17.9":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/[email protected]":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
@@ -105,6 +112,13 @@
   dependencies:
     styled-jsx "3.3.0"
 
+"@hcaptcha/react-hcaptcha@^1.4.4":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@hcaptcha/react-hcaptcha/-/react-hcaptcha-1.4.4.tgz#529c55369160995115735b5fe5453daef4670f04"
+  integrity sha512-Aen217LDnf5ywbPSwBG5CsoqBLIHIAS9lhj3zQjXJuO13doQ6/ubkCWNuY8jmwYLefoFt3V3MrZmCdKDaFoTuQ==
+  dependencies:
+    "@babel/runtime" "^7.17.9"
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"
@@ -4119,6 +4133,11 @@ readable-stream@2, readable-stream@^2.0.6, readable-stream@^2.2.2:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"