feat(turnstile): Use Cloudflare Turnstile instead of Google reCAPTCHA

resolves #3313

.env.dev

@@ -32,6 +32,7 @@ NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS=0xa219c6722008aa22828b31a13ab9ba93bb91222c
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=315393900359-2r9fundftis7dc0tdeo2hf8630nfdd8h.apps.googleusercontent.com
 NEXT_PUBLIC_TWITTER_CLIENT_ID=bWF1QmMzY2JPLTB2alJiZHdsMjI6MTpjaQ
 NEXT_PUBLIC_FACEBOOK_CLIENT_ID=823885921293850
+NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=0x4AAAAAAAKiedvR5qiLUhIs
 DEBUG=false
 PLAYWRIGHT_RUNTIME_ENV=ci
 PLAYWRIGHT_TEST_BASE_URL=https://web-develop.matters.town

.env.prod

@@ -27,6 +27,7 @@ NEXT_PUBLIC_LOGBOOKS_URL=https://logbook.matters.town
 NEXT_PUBLIC_ALCHEMY_KEY=bOu-fCphi9mvePsxg968Qe-pidHQNdlT
 NEXT_PUBLIC_USDT_CONTRACT_ADDRESS=0xc2132D05D31c914a87C6611C10748AEb04B58e8F
 NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS=0x5edebbdae7b5c79a69aacf7873796bb1ec664db8
+NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=0x4AAAAAAAKVODkJMwfIxG78
 DEBUG=false
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=
 NEXT_PUBLIC_TWITTER_CLIENT_ID=cmdKbUlyd1ZZZDZYa3dTampidGo6MTpjaQ

next.config.js

@@ -49,6 +49,12 @@ const nextConfig = {
         },
       ],
     })
+    // config.resolve.alias["react"] = path.resolve("./node_modules/react");
+    config.resolve.alias= {
+      ...config.resolve.alias,
+      // "react/jsx-dev-runtime": "react/jsx-dev-runtime.js",
+      "react/jsx-runtime": "react/jsx-runtime.js"
+    }
 
     return config
   },

package.json

@@ -127,6 +127,7 @@
     "@formatjs/cli": "^6.1.3",
     "@graphql-codegen/cli": "3.3.1",
     "@graphql-codegen/client-preset": "3.0.1",
+    "@marsidev/react-turnstile": "^0.3.1",
     "@playwright/test": "^1.35.1",
     "@storybook/addon-a11y": "^7.0.26",
     "@storybook/addon-actions": "^7.0.26",
@@ -178,6 +179,7 @@
     "postcss-mixins": "^9.0.4",
     "postcss-preset-env": "^9.0.0",
     "prettier": "^3.0.0",
+    "react-turnstile": "^1.1.2",
     "storybook": "^7.0.26",
     "storybook-css-modules": "^1.0.8",
     "stylelint": "^15.10.1",
@@ -186,7 +188,7 @@
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^4.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "webpack-merge": "^5.9.0"
   },
   "overrides": {

src/components/Forms/EmailSignUpForm/Init.tsx

@@ -1,6 +1,8 @@
+import type { TurnstileInstance } from '@marsidev/react-turnstile'
+import { Turnstile } from '@marsidev/react-turnstile'
 import { useFormik } from 'formik'
 import _pickBy from 'lodash/pickBy'
-import { useContext } from 'react'
+import { useContext, useRef } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
 import {
@@ -18,7 +20,7 @@ import {
   IconLeft20,
   LanguageContext,
   Media,
-  ReCaptchaContext,
+  // ReCaptchaContext,
   TextIcon,
   useMutation,
 } from '~/components'
@@ -59,9 +61,8 @@ const Init: React.FC<FormProps> = ({
 
   const isNormal = authFeedType === 'normal'
   const isWallet = authFeedType === 'wallet'
-  const { token, refreshToken } = useContext(ReCaptchaContext)
+  const turnstileRef = useRef<TurnstileInstance>(null)
 
-  // const { token, refreshToken } = useContext(ReCaptchaContext)
   const [sendCode] = useMutation<SendVerificationCodeMutation>(
     SEND_CODE,
     undefined,
@@ -93,7 +94,12 @@ const Init: React.FC<FormProps> = ({
         const redirectUrl = signupCallbackUrl(email)
         await sendCode({
           variables: {
-            input: { email, type: 'register', token, redirectUrl },
+            input: {
+              email,
+              type: 'register',
+              token: turnstileRef.current?.getResponse(),
+              redirectUrl,
+            },
           },
         })
 
@@ -104,16 +110,22 @@ const Init: React.FC<FormProps> = ({
 
         const [messages, codes] = parseFormSubmitErrors(error as any)
         setFieldError('email', intl.formatMessage(messages[codes[0]]))
-
-        if (refreshToken) {
-          refreshToken()
-        }
       }
     },
   })
 
   const InnerForm = (
     <Form id={formId} onSubmit={handleSubmit}>
+      <Turnstile
+        // {...props}
+        ref={turnstileRef}
+        options={{ size: 'invisible' }}
+        siteKey={process.env.NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY!}
+        // onError={() => setStatus('error')}
+        // onExpire={() => setStatus('expired')}
+        // onSuccess={token => { setToken(token); setStatus('solved') }}
+      />
+
       <Form.Input
         label={<FormattedMessage defaultMessage="Email" />}
         type="email"

src/views/ArticleDetail/AppreciationButton/index.tsx

@@ -1,10 +1,12 @@
 import { useQuery } from '@apollo/react-hooks'
-import { useContext, useState } from 'react'
+import type { TurnstileInstance } from '@marsidev/react-turnstile'
+import { Turnstile } from '@marsidev/react-turnstile'
+import { useContext, useRef, useState } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 
 import { APPRECIATE_DEBOUNCE, EXTERNAL_LINKS, Z_INDEX } from '~/common/enums'
 import {
-  ReCaptchaContext,
+  // ReCaptchaContext,
   toast,
   Tooltip,
   Translate,
@@ -41,7 +43,10 @@ const AppreciationButton = ({
   disabled,
 }: AppreciationButtonProps) => {
   const viewer = useContext(ViewerContext)
-  const { token, refreshToken } = useContext(ReCaptchaContext)
+
+  const turnstileRef = useRef<TurnstileInstance>(null)
+  // const { token, refreshToken } = useContext(ReCaptchaContext)
+
   const { data, client } = useQuery<ClientPreferenceQuery>(CLIENT_PREFERENCE, {
     variables: { id: 'local' },
   })
@@ -67,9 +72,9 @@ const AppreciationButton = ({
         variables: {
           id: article.id,
           amount,
-          token,
+          token: turnstileRef.current?.getResponse(),
         },
-      }).then(refreshToken)
+      }) // .then(refreshToken)
     } catch (e) {
       console.error(e)
     }
@@ -87,7 +92,7 @@ const AppreciationButton = ({
         variables: {
           id: article.id,
           amount: 1,
-          token,
+          token: turnstileRef.current?.getResponse(),
           superLike: true,
         },
         update: (cache) => {
@@ -216,13 +221,21 @@ const AppreciationButton = ({
   // Appreciable
   if (canAppreciate && !disabled) {
     return (
-      <AppreciateButton
-        onClick={appreciate}
-        count={appreciatedCount > 0 ? appreciatedCount : undefined}
-        total={total}
-        isSuperLike={isSuperLike}
-        superLiked={superLiked}
-      />
+      <>
+        <Turnstile
+          ref={turnstileRef}
+          options={{ size: 'invisible' }}
+          siteKey={process.env.NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY!}
+          scriptOptions={{ appendTo: 'body' }}
+        />
+        <AppreciateButton
+          onClick={appreciate}
+          count={appreciatedCount > 0 ? appreciatedCount : undefined}
+          total={total}
+          isSuperLike={isSuperLike}
+          superLiked={superLiked}
+        />
+      </>
     )
   }