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

.oxlintrc.json

@@ -29,7 +29,9 @@
       "rules": {
         "react/jsx-max-depth": "off",
         "typescript/no-floating-promises": "off",
-        "typescript/unbound-method": "off"
+        "typescript/unbound-method": "off",
+        "typescript/no-base-to-string": "off",
+        "restrict-template-expressions": "off"
       }
     },
     {

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 } from '@better-captcha/react/provider/recaptcha-v3';
+import { Turnstile } from '@better-captcha/react/provider/turnstile';
+
+export const CaptchaProviders = {
+  recaptchaV3: ReCaptchaV3,
+  turnstile: Turnstile,
+};

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

@@ -1,13 +1,16 @@
-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 * as Icons from '../../components/icon/index.js';
-import { useCaptcha } from '../../components/useCaptcha.js';
+
 import { get2FAToken } from '../../services/user.js';
 
+import { CaptchaProviders } from '../../components/Captcha.js';
+import getCaptchaConfig from '../../utils/getCaptchaConfig.js';
+
 // oxlint-disable-next-line max-lines-per-function
 export default function Login() {
   const { t } = useTranslation();
@@ -17,10 +20,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 +61,17 @@ export default function Login() {
       return setError(t('please input 2fa code'));
     }
 
-    const token = await execute('login');
+    const captchaToken = CaptchaProviders[captchaConfig?.provider]
+      ? 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 +166,13 @@ export default function Login() {
                 />
               </p>
             )}
-            <p className="captcha-container" />
+
+            {CaptchaProviders[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,16 @@ export default function Register() {
 
     try {
       setSubmitting(true);
-      const token = await execute('login');
+
+      const captchaToken = CaptchaProviders[captchaConfig?.provider]
+        ? 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 +148,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/services/auth.js

@@ -6,11 +6,11 @@ export const getUserInfo = () =>
     Promise.reject(new Error('get userinfo failed'));
   });
 
-export const login = ({ email, password, code, recaptchaV3, turnstile }) =>
+export const login = ({ email, password, code, recaptchaV3, turnstile, captcha }) =>
   request({
     url: 'token',
     method: 'POST',
-    body: { email, password, code, recaptchaV3, turnstile },
+    body: { email, password, code, recaptchaV3, turnstile, captcha },
   });
 
 export const logout = () => {