refactor(client): migrate captcha flow to betterCaptcha adapter model

packages/admin/package.json

@@ -36,6 +36,7 @@
     "prepublishOnly": "pnpm build"
   },
   "devDependencies": {
+    "@better-captcha/react": "^0.5.6",
     "@rematch/core": "2.2.0",
     "base-icon": "2.3.2",
     "classnames": "2.5.1",

packages/admin/src/components/Captcha.js

@@ -0,0 +1,7 @@
+import { RecaptchaV3 as Recaptcha } from '@better-captcha/react/provider/recaptcha-v3';
+import { Turnstile } from '@better-captcha/react/provider/turnstile';
+
+export const CaptchaProviders = {
+  recaptchaV3: Recaptcha,
+  turnstile: Turnstile,
+};

packages/admin/src/pages/login/index.jsx

@@ -5,9 +5,11 @@ import { Link, useNavigate } from 'react-router';
 
 import Header from '../../components/Header.jsx';
 import * as Icons from '../../components/icon/index.js';
-import { useCaptcha } from '../../components/useCaptcha.js';
+
 import { get2FAToken } from '../../services/user.js';
 
+import getCaptchaConfig from '../../utils/getCaptchaConfig.js';
+
 // oxlint-disable-next-line max-lines-per-function
 export default function Login() {
   const { t } = useTranslation();
@@ -17,10 +19,9 @@ export default function Login() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
   const [is2FAEnabled, enable2FA] = useState(false);
-  const execute = useCaptcha({
-    sitekey: window.turnstileKey ?? window.recaptchaV3Key,
-    hideDefaultBadge: true,
-  });
+  const captchaRef = useRef(null);
+
+  const captchaConfig = getCaptchaConfig();
 
   const match = location.pathname.match(/(.*?\/)ui/);
   const basePath = match && match[1] ? match[1] : '/';
@@ -59,16 +60,16 @@ export default function Login() {
       return setError(t('please input 2fa code'));
     }
 
-    const token = await execute('login');
+    await captchaRef.current?.execute?.();
+    const captchaToken = captchaRef.current.getResponse();
 
     try {
       await dispatch.user.login({
         email,
         password,
         code,
         remember,
-        recaptchaV3: window.recaptchaV3Key ? token : undefined,
-        turnstile: window.turnstileKey ? token : undefined,
+        captcha: captchaToken,
       });
     } catch {
       setError(t('email or password error'));
@@ -163,7 +164,13 @@ export default function Login() {
                 />
               </p>
             )}
-            <p className="captcha-container" />
+
+            {captchaConfig?.provider &&
+              React.createElement(CaptchaProviders[captchaConfig.provider], {
+                ...captchaConfig,
+                ref: captchaRef,
+              })}
+
             <p className="submit">
               <button type="submit" className="btn btn-l w-100 primary" disabled={loading}>
                 {t('login')}

packages/admin/src/pages/register/index.jsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router';
 
 import Header from '../../components/Header.jsx';
-import { useCaptcha } from '../../components/useCaptcha.js';
+import CaptchaProviders from '../../components/Captcha.js';
+import getCaptchaConfig from '../../utils/getCaptchaConfig.js';
 
 // oxlint-disable-next-line max-lines-per-function
 export default function Register() {
@@ -14,10 +15,9 @@ export default function Register() {
   const user = useSelector((state) => state.user);
   const [error, setError] = useState(false);
   const [submitting, setSubmitting] = useState(false);
-  const execute = useCaptcha({
-    sitekey: window.turnstileKey ?? window.recaptchaV3Key,
-    hideDefaultBadge: true,
-  });
+  const captchaRef = useRef(null);
+
+  const captchaConfig = getCaptchaConfig();
 
   useEffect(() => {
     if (user && user.objectId) {
@@ -49,14 +49,14 @@ export default function Register() {
 
     try {
       setSubmitting(true);
-      const token = await execute('login');
+      await captchaRef.current?.execute?.();
+      const captchaToken = captchaRef.current.getResponse();
       const resp = await dispatch.user.register({
         display_name: nick,
         email,
         url: link,
         password,
-        recaptchaV3: window.recaptchaV3Key ? token : undefined,
-        turnstile: window.turnstileKey ? token : undefined,
+        captcha: captchaToken,
       });
 
       if (resp && resp.verify) {
@@ -146,7 +146,13 @@ export default function Register() {
                 placeholder={t('password again')}
               />
             </p>
-            <p className="captcha-container" />
+
+            {captchaConfig?.provider &&
+              React.createElement(CaptchaProviders[captchaConfig.provider], {
+                ...captchaConfig,
+                ref: captchaRef,
+              })}
+
             <p className="submit">
               <button type="submit" disabled={submitting} className="btn btn-l w-100 primary">
                 {t('register')}

packages/admin/src/utils/getCaptchaConfig.js

@@ -0,0 +1,19 @@
+export default function () {
+  if (window.captcha) {
+    return window.captcha;
+  }
+
+  if (window.recaptchaV3Key) {
+    return {
+      provider: 'recaptchaV3',
+      sitekey: window.recaptchaV3Key,
+    };
+  }
+
+  if (window.turnstileKey) {
+    return {
+      provider: 'turnstile',
+      sitekey: window.turnstileKey,
+    };
+  }
+}

packages/client/package.json

@@ -75,12 +75,12 @@
     "autosize": "^6.0.1",
     "marked": "^17.0.2",
     "marked-highlight": "^2.2.3",
-    "recaptcha-v3": "^1.11.3",
     "vue": "^3.5.28"
   },
   "devDependencies": {
     "@babel/core": "7.29.0",
     "@babel/preset-env": "7.29.0",
+    "@better-captcha/vue": "^0.5.6",
     "@giphy/js-types": "5.1.0",
     "@types/autosize": "4.0.3",
     "@vitejs/plugin-vue": "6.0.4",