From 7699296f11ab52dc7c5c1bd337601cc82bd118d5 Mon Sep 17 00:00:00 2001
From: EYHN <cneyhn@gmail.com>
Date: Mon, 28 Oct 2024 18:06:52 +0000
Subject: [PATCH] feat(core): captcha service (#8616)

---
 .../frontend/apps/electron/renderer/app.tsx   |  10 ++
 .../affine/auth/after-sign-in-send-email.tsx  |  36 ++---
 .../affine/auth/after-sign-up-send-email.tsx  |  34 +++--
 .../affine/auth/sign-in-with-password.tsx     |  59 +++++----
 .../src/components/affine/auth/sign-in.tsx    |  60 +++++----
 .../components/affine/auth/use-captcha.tsx    | 125 ++++--------------
 .../frontend/core/src/modules/cloud/index.ts  |  11 ++
 .../src/modules/cloud/provider/validator.ts   |  12 ++
 .../core/src/modules/cloud/services/auth.ts   |  10 +-
 .../src/modules/cloud/services/captcha.ts     |  75 +++++++++++
 .../i18n/src/i18n-completenesses.json         |   2 +-
 tests/kit/utils/cloud.ts                      |   2 +-
 12 files changed, 246 insertions(+), 190 deletions(-)
 create mode 100644 packages/frontend/core/src/modules/cloud/provider/validator.ts
 create mode 100644 packages/frontend/core/src/modules/cloud/services/captcha.ts

diff --git a/packages/frontend/apps/electron/renderer/app.tsx b/packages/frontend/apps/electron/renderer/app.tsx
index 3971c39256..bc4dce229e 100644
--- a/packages/frontend/apps/electron/renderer/app.tsx
+++ b/packages/frontend/apps/electron/renderer/app.tsx
@@ -6,6 +6,7 @@ import { Telemetry } from '@affine/core/components/telemetry';
 import { router } from '@affine/core/desktop/router';
 import { configureCommonModules } from '@affine/core/modules';
 import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
+import { ValidatorProvider } from '@affine/core/modules/cloud';
 import { I18nProvider } from '@affine/core/modules/i18n';
 import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
 import { CustomThemeModifier } from '@affine/core/modules/theme-editor';
@@ -75,6 +76,15 @@ framework.impl(ClientSchemaProvider, {
     return appInfo?.schema;
   },
 });
+framework.impl(ValidatorProvider, {
+  async validate(_challenge, resource) {
+    const token = await apis?.ui?.getChallengeResponse(resource);
+    if (!token) {
+      throw new Error('Challenge failed');
+    }
+    return token;
+  },
+});
 const frameworkProvider = framework.provider();
 
 // setup application lifecycle events, and emit application start event
diff --git a/packages/frontend/core/src/components/affine/auth/after-sign-in-send-email.tsx b/packages/frontend/core/src/components/affine/auth/after-sign-in-send-email.tsx
index d2e4b68d41..91d931660a 100644
--- a/packages/frontend/core/src/components/affine/auth/after-sign-in-send-email.tsx
+++ b/packages/frontend/core/src/components/affine/auth/after-sign-in-send-email.tsx
@@ -7,14 +7,14 @@ import {
 } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
-import { AuthService } from '@affine/core/modules/cloud';
+import { AuthService, CaptchaService } from '@affine/core/modules/cloud';
 import { Trans, useI18n } from '@affine/i18n';
-import { useService } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useEffect, useState } from 'react';
 
 import type { AuthPanelProps } from './index';
 import * as style from './style.css';
-import { Captcha, useCaptcha } from './use-captcha';
+import { Captcha } from './use-captcha';
 
 export const AfterSignInSendEmail = ({
   setAuthData: setAuth,
@@ -37,21 +37,23 @@ export const AfterSignInSendEmail = ({
 
   const t = useI18n();
   const authService = useService(AuthService);
+  const captchaService = useService(CaptchaService);
 
-  const [verifyToken, challenge] = useCaptcha();
+  const verifyToken = useLiveData(captchaService.verifyToken$);
+  const needCaptcha = useLiveData(captchaService.needCaptcha$);
+  const challenge = useLiveData(captchaService.challenge$);
 
   const onResendClick = useAsyncCallback(async () => {
     setIsSending(true);
     try {
-      if (verifyToken) {
-        setResendCountDown(60);
-        await authService.sendEmailMagicLink(
-          email,
-          verifyToken,
-          challenge,
-          redirectUrl
-        );
-      }
+      setResendCountDown(60);
+      captchaService.revalidate();
+      await authService.sendEmailMagicLink(
+        email,
+        verifyToken,
+        challenge,
+        redirectUrl
+      );
     } catch (err) {
       console.error(err);
       notify.error({
@@ -59,7 +61,7 @@ export const AfterSignInSendEmail = ({
       });
     }
     setIsSending(false);
-  }, [authService, challenge, email, redirectUrl, verifyToken]);
+  }, [authService, captchaService, challenge, email, redirectUrl, verifyToken]);
 
   const onSignInWithPasswordClick = useCallback(() => {
     setAuth({ state: 'signInWithPassword' });
@@ -89,8 +91,10 @@ export const AfterSignInSendEmail = ({
           <>
             <Captcha />
             <Button
-              style={!verifyToken ? { cursor: 'not-allowed' } : {}}
-              disabled={!verifyToken || isSending}
+              style={
+                !verifyToken && needCaptcha ? { cursor: 'not-allowed' } : {}
+              }
+              disabled={(!verifyToken && needCaptcha) || isSending}
               variant="plain"
               size="large"
               onClick={onResendClick}
diff --git a/packages/frontend/core/src/components/affine/auth/after-sign-up-send-email.tsx b/packages/frontend/core/src/components/affine/auth/after-sign-up-send-email.tsx
index 04c9c257a2..7509b70bea 100644
--- a/packages/frontend/core/src/components/affine/auth/after-sign-up-send-email.tsx
+++ b/packages/frontend/core/src/components/affine/auth/after-sign-up-send-email.tsx
@@ -7,15 +7,16 @@ import {
 } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
+import { CaptchaService } from '@affine/core/modules/cloud';
 import { Trans, useI18n } from '@affine/i18n';
-import { useService } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import type { FC } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
 import { AuthService } from '../../../modules/cloud';
 import type { AuthPanelProps } from './index';
 import * as style from './style.css';
-import { Captcha, useCaptcha } from './use-captcha';
+import { Captcha } from './use-captcha';
 
 export const AfterSignUpSendEmail: FC<
   AuthPanelProps<'afterSignUpSendEmail'>
@@ -36,19 +37,22 @@ export const AfterSignUpSendEmail: FC<
   const t = useI18n();
   const authService = useService(AuthService);
 
-  const [verifyToken, challenge] = useCaptcha();
+  const captchaService = useService(CaptchaService);
+
+  const verifyToken = useLiveData(captchaService.verifyToken$);
+  const needCaptcha = useLiveData(captchaService.needCaptcha$);
+  const challenge = useLiveData(captchaService.challenge$);
 
   const onResendClick = useAsyncCallback(async () => {
     setIsSending(true);
     try {
-      if (verifyToken) {
-        await authService.sendEmailMagicLink(
-          email,
-          verifyToken,
-          challenge,
-          redirectUrl
-        );
-      }
+      captchaService.revalidate();
+      await authService.sendEmailMagicLink(
+        email,
+        verifyToken,
+        challenge,
+        redirectUrl
+      );
       setResendCountDown(60);
     } catch (err) {
       console.error(err);
@@ -57,7 +61,7 @@ export const AfterSignUpSendEmail: FC<
       });
     }
     setIsSending(false);
-  }, [authService, challenge, email, redirectUrl, verifyToken]);
+  }, [authService, captchaService, challenge, email, redirectUrl, verifyToken]);
 
   return (
     <>
@@ -79,8 +83,10 @@ export const AfterSignUpSendEmail: FC<
           <>
             <Captcha />
             <Button
-              style={!verifyToken ? { cursor: 'not-allowed' } : {}}
-              disabled={!verifyToken || isSending}
+              style={
+                !verifyToken && needCaptcha ? { cursor: 'not-allowed' } : {}
+              }
+              disabled={(!verifyToken && needCaptcha) || isSending}
               variant="plain"
               size="large"
               onClick={onResendClick}
diff --git a/packages/frontend/core/src/components/affine/auth/sign-in-with-password.tsx b/packages/frontend/core/src/components/affine/auth/sign-in-with-password.tsx
index cad1014991..1c4508c51c 100644
--- a/packages/frontend/core/src/components/affine/auth/sign-in-with-password.tsx
+++ b/packages/frontend/core/src/components/affine/auth/sign-in-with-password.tsx
@@ -6,15 +6,15 @@ import {
 } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
-import { AuthService } from '@affine/core/modules/cloud';
+import { AuthService, CaptchaService } from '@affine/core/modules/cloud';
 import { useI18n } from '@affine/i18n';
-import { useService } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
 
 import type { AuthPanelProps } from './index';
 import * as styles from './style.css';
-import { useCaptcha } from './use-captcha';
+import { Captcha } from './use-captcha';
 
 export const SignInWithPassword: FC<AuthPanelProps<'signInWithPassword'>> = ({
   setAuthData,
@@ -26,15 +26,20 @@ export const SignInWithPassword: FC<AuthPanelProps<'signInWithPassword'>> = ({
 
   const [password, setPassword] = useState('');
   const [passwordError, setPasswordError] = useState(false);
-  const [verifyToken, challenge, refreshChallenge] = useCaptcha();
+  const captchaService = useService(CaptchaService);
+
+  const verifyToken = useLiveData(captchaService.verifyToken$);
+  const needCaptcha = useLiveData(captchaService.needCaptcha$);
+  const challenge = useLiveData(captchaService.challenge$);
   const [isLoading, setIsLoading] = useState(false);
   const [sendingEmail, setSendingEmail] = useState(false);
 
   const onSignIn = useAsyncCallback(async () => {
-    if (isLoading || !verifyToken) return;
+    if (isLoading) return;
     setIsLoading(true);
 
     try {
+      captchaService.revalidate();
       await authService.signInPassword({
         email,
         password,
@@ -44,33 +49,31 @@ export const SignInWithPassword: FC<AuthPanelProps<'signInWithPassword'>> = ({
     } catch (err) {
       console.error(err);
       setPasswordError(true);
-      refreshChallenge?.();
     } finally {
       setIsLoading(false);
     }
   }, [
     isLoading,
     verifyToken,
+    captchaService,
     authService,
     email,
     password,
     challenge,
-    refreshChallenge,
   ]);
 
   const sendMagicLink = useAsyncCallback(async () => {
     if (sendingEmail) return;
     setSendingEmail(true);
     try {
-      if (verifyToken) {
-        await authService.sendEmailMagicLink(
-          email,
-          verifyToken,
-          challenge,
-          redirectUrl
-        );
-        setAuthData({ state: 'afterSignInSendEmail' });
-      }
+      captchaService.revalidate();
+      await authService.sendEmailMagicLink(
+        email,
+        verifyToken,
+        challenge,
+        redirectUrl
+      );
+      setAuthData({ state: 'afterSignInSendEmail' });
     } catch (err) {
       console.error(err);
       notify.error({
@@ -82,6 +85,7 @@ export const SignInWithPassword: FC<AuthPanelProps<'signInWithPassword'>> = ({
   }, [
     sendingEmail,
     verifyToken,
+    captchaService,
     authService,
     email,
     challenge,
@@ -139,21 +143,24 @@ export const SignInWithPassword: FC<AuthPanelProps<'signInWithPassword'>> = ({
             {t['com.affine.auth.forget']()}
           </a>
         </div>
-        <div className={styles.sendMagicLinkButtonRow}>
-          <a
-            data-testid="send-magic-link-button"
-            className={styles.linkButton}
-            onClick={sendMagicLink}
-          >
-            {t['com.affine.auth.sign.auth.code.send-email.sign-in']()}
-          </a>
-        </div>
+        {(verifyToken || !needCaptcha) && (
+          <div className={styles.sendMagicLinkButtonRow}>
+            <a
+              data-testid="send-magic-link-button"
+              className={styles.linkButton}
+              onClick={sendMagicLink}
+            >
+              {t['com.affine.auth.sign.auth.code.send-email.sign-in']()}
+            </a>
+          </div>
+        )}
+        {!verifyToken && needCaptcha && <Captcha />}
         <Button
           data-testid="sign-in-button"
           variant="primary"
           size="extraLarge"
           style={{ width: '100%' }}
-          disabled={isLoading}
+          disabled={isLoading || (!verifyToken && needCaptcha)}
           onClick={onSignIn}
         >
           {t['com.affine.auth.sign.in']()}
diff --git a/packages/frontend/core/src/components/affine/auth/sign-in.tsx b/packages/frontend/core/src/components/affine/auth/sign-in.tsx
index 9d339f2dc8..6cc58ba1aa 100644
--- a/packages/frontend/core/src/components/affine/auth/sign-in.tsx
+++ b/packages/frontend/core/src/components/affine/auth/sign-in.tsx
@@ -2,9 +2,10 @@ import { notify } from '@affine/component';
 import { AuthInput, ModalHeader } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
+import { CaptchaService } from '@affine/core/modules/cloud';
 import { Trans, useI18n } from '@affine/i18n';
 import { ArrowRightBigIcon } from '@blocksuite/icons/rc';
-import { useService } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import type { FC } from 'react';
 import { useState } from 'react';
@@ -15,7 +16,7 @@ import { emailRegex } from '../../../utils/email-regex';
 import type { AuthPanelProps } from './index';
 import { OAuth } from './oauth';
 import * as style from './style.css';
-import { Captcha, useCaptcha } from './use-captcha';
+import { Captcha } from './use-captcha';
 
 function validateEmail(email: string) {
   return emailRegex.test(email);
@@ -30,7 +31,11 @@ export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
   const authService = useService(AuthService);
   const [searchParams] = useSearchParams();
   const [isMutating, setIsMutating] = useState(false);
-  const [verifyToken, challenge, refreshChallenge] = useCaptcha();
+  const captchaService = useService(CaptchaService);
+
+  const verifyToken = useLiveData(captchaService.verifyToken$);
+  const needCaptcha = useLiveData(captchaService.needCaptcha$);
+  const challenge = useLiveData(captchaService.challenge$);
   const [email, setEmail] = useState('');
 
   const [isValidEmail, setIsValidEmail] = useState(true);
@@ -49,29 +54,16 @@ export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
       const { hasPassword, registered } =
         await authService.checkUserByEmail(email);
 
-      if (verifyToken) {
-        if (registered) {
-          // provider password sign-in if user has by default
-          //  If with payment, onl support email sign in to avoid redirect to affine app
-          if (hasPassword) {
-            refreshChallenge?.();
-            setAuthState({
-              state: 'signInWithPassword',
-              email,
-            });
-          } else {
-            await authService.sendEmailMagicLink(
-              email,
-              verifyToken,
-              challenge,
-              redirectUrl
-            );
-            setAuthState({
-              state: 'afterSignInSendEmail',
-              email,
-            });
-          }
+      if (registered) {
+        // provider password sign-in if user has by default
+        //  If with payment, onl support email sign in to avoid redirect to affine app
+        if (hasPassword) {
+          setAuthState({
+            state: 'signInWithPassword',
+            email,
+          });
         } else {
+          captchaService.revalidate();
           await authService.sendEmailMagicLink(
             email,
             verifyToken,
@@ -79,10 +71,22 @@ export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
             redirectUrl
           );
           setAuthState({
-            state: 'afterSignUpSendEmail',
+            state: 'afterSignInSendEmail',
             email,
           });
         }
+      } else {
+        captchaService.revalidate();
+        await authService.sendEmailMagicLink(
+          email,
+          verifyToken,
+          challenge,
+          redirectUrl
+        );
+        setAuthState({
+          state: 'afterSignUpSendEmail',
+          email,
+        });
       }
     } catch (err) {
       console.error(err);
@@ -96,10 +100,10 @@ export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
     setIsMutating(false);
   }, [
     authService,
+    captchaService,
     challenge,
     email,
     redirectUrl,
-    refreshChallenge,
     setAuthState,
     verifyToken,
   ]);
@@ -125,7 +129,7 @@ export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
           onEnter={onContinue}
         />
 
-        {verifyToken ? (
+        {verifyToken || !needCaptcha ? (
           <Button
             style={{ width: '100%' }}
             size="extraLarge"
diff --git a/packages/frontend/core/src/components/affine/auth/use-captcha.tsx b/packages/frontend/core/src/components/affine/auth/use-captcha.tsx
index 08b3939fcd..fee59ba1c3 100644
--- a/packages/frontend/core/src/components/affine/auth/use-captcha.tsx
+++ b/packages/frontend/core/src/components/affine/auth/use-captcha.tsx
@@ -1,120 +1,45 @@
-import { apis } from '@affine/electron-api';
+import { CaptchaService } from '@affine/core/modules/cloud';
 import { Turnstile } from '@marsidev/react-turnstile';
 import { useLiveData, useService } from '@toeverything/infra';
-import { atom, useAtom, useSetAtom } from 'jotai';
-import { useEffect, useRef } from 'react';
-import useSWR from 'swr';
+import { useCallback, useEffect } from 'react';
 
-import { ServerConfigService } from '../../../modules/cloud';
 import * as style from './style.css';
 
-type Challenge = {
-  challenge: string;
-  resource: string;
-};
-
-const challengeFetcher = async (url: string) => {
-  if (!BUILD_CONFIG.isElectron) {
-    return undefined;
-  }
-
-  const res = await fetch(url);
-  if (!res.ok) {
-    throw new Error('Failed to fetch challenge');
-  }
-  const challenge = (await res.json()) as Challenge;
-  if (!challenge || !challenge.challenge || !challenge.resource) {
-    throw new Error('Invalid challenge');
-  }
-
-  return challenge;
-};
-
-const generateChallengeResponse = async (challenge: string) => {
-  if (!BUILD_CONFIG.isElectron) {
-    return undefined;
-  }
-
-  return await apis?.ui?.getChallengeResponse(challenge);
-};
-
-const captchaAtom = atom<string | undefined>(undefined);
-const responseAtom = atom<string | undefined>(undefined);
-
-const useHasCaptcha = () => {
-  const serverConfig = useService(ServerConfigService).serverConfig;
-  const hasCaptcha = useLiveData(serverConfig.features$.map(r => r?.captcha));
-  return hasCaptcha || false;
-};
-
 export const Captcha = () => {
-  const setCaptcha = useSetAtom(captchaAtom);
-  const [response] = useAtom(responseAtom);
-  const hasCaptchaFeature = useHasCaptcha();
+  const captchaService = useService(CaptchaService);
+  const hasCaptchaFeature = useLiveData(captchaService.needCaptcha$);
+  const isLoading = useLiveData(captchaService.isLoading$);
+  const verifyToken = useLiveData(captchaService.verifyToken$);
+  useEffect(() => {
+    if (hasCaptchaFeature) {
+      captchaService.revalidate();
+    }
+  }, [captchaService, hasCaptchaFeature]);
+
+  const handleTurnstileSuccess = useCallback(
+    (token: string) => {
+      captchaService.verifyToken$.next(token);
+    },
+    [captchaService]
+  );
 
   if (!hasCaptchaFeature) {
     return null;
   }
 
-  if (BUILD_CONFIG.isElectron) {
-    if (response) {
-      return <div className={style.captchaWrapper}>Making Challenge</div>;
-    } else {
-      return <div className={style.captchaWrapper}>Verified Client</div>;
-    }
+  if (isLoading) {
+    return <div className={style.captchaWrapper}>Loading...</div>;
+  }
+
+  if (verifyToken) {
+    return <div className={style.captchaWrapper}>Verified Client</div>;
   }
 
   return (
     <Turnstile
       className={style.captchaWrapper}
       siteKey={process.env.CAPTCHA_SITE_KEY || '1x00000000000000000000AA'}
-      onSuccess={setCaptcha}
+      onSuccess={handleTurnstileSuccess}
     />
   );
 };
-
-export const useCaptcha = (): [string | undefined, string?, (() => void)?] => {
-  const [verifyToken] = useAtom(captchaAtom);
-  const [response, setResponse] = useAtom(responseAtom);
-  const hasCaptchaFeature = useHasCaptcha();
-
-  const { data: challenge, mutate } = useSWR(
-    '/api/auth/challenge',
-    challengeFetcher,
-    {
-      suspense: false,
-      revalidateOnFocus: false,
-    }
-  );
-  const prevChallenge = useRef('');
-
-  useEffect(() => {
-    if (
-      BUILD_CONFIG.isElectron &&
-      hasCaptchaFeature &&
-      challenge?.challenge &&
-      prevChallenge.current !== challenge.challenge
-    ) {
-      prevChallenge.current = challenge.challenge;
-      generateChallengeResponse(challenge.resource)
-        .then(setResponse)
-        .catch(err => {
-          console.error('Error getting challenge response:', err);
-        });
-    }
-  }, [challenge, hasCaptchaFeature, setResponse]);
-
-  if (!hasCaptchaFeature) {
-    return ['XXXX.DUMMY.TOKEN.XXXX'];
-  }
-
-  if (BUILD_CONFIG.isElectron) {
-    if (response) {
-      return [response, challenge?.challenge, mutate];
-    } else {
-      return [undefined, challenge?.challenge];
-    }
-  }
-
-  return [verifyToken];
-};
diff --git a/packages/frontend/core/src/modules/cloud/index.ts b/packages/frontend/core/src/modules/cloud/index.ts
index 810c0c216c..e989138a2b 100644
--- a/packages/frontend/core/src/modules/cloud/index.ts
+++ b/packages/frontend/core/src/modules/cloud/index.ts
@@ -6,8 +6,10 @@ export {
   isNetworkError,
   NetworkError,
 } from './error';
+export { ValidatorProvider } from './provider/validator';
 export { WebSocketAuthProvider } from './provider/websocket-auth';
 export { AccountChanged, AuthService } from './services/auth';
+export { CaptchaService } from './services/captcha';
 export { FetchService } from './services/fetch';
 export { GraphQLService } from './services/graphql';
 export { InvoicesService } from './services/invoices';
@@ -38,8 +40,10 @@ import { UserCopilotQuota } from './entities/user-copilot-quota';
 import { UserFeature } from './entities/user-feature';
 import { UserQuota } from './entities/user-quota';
 import { DefaultFetchProvider, FetchProvider } from './provider/fetch';
+import { ValidatorProvider } from './provider/validator';
 import { WebSocketAuthProvider } from './provider/websocket-auth';
 import { AuthService } from './services/auth';
+import { CaptchaService } from './services/captcha';
 import { CloudDocMetaService } from './services/cloud-doc-meta';
 import { FetchService } from './services/fetch';
 import { GraphQLService } from './services/graphql';
@@ -75,6 +79,13 @@ export function configureCloudModule(framework: Framework) {
     .service(ServerConfigService)
     .entity(ServerConfig, [ServerConfigStore])
     .store(ServerConfigStore, [GraphQLService])
+    .service(CaptchaService, f => {
+      return new CaptchaService(
+        f.get(ServerConfigService),
+        f.get(FetchService),
+        f.getOptional(ValidatorProvider)
+      );
+    })
     .service(AuthService, [FetchService, AuthStore, UrlService])
     .store(AuthStore, [FetchService, GraphQLService, GlobalState])
     .entity(AuthSession, [AuthStore])
diff --git a/packages/frontend/core/src/modules/cloud/provider/validator.ts b/packages/frontend/core/src/modules/cloud/provider/validator.ts
new file mode 100644
index 0000000000..dea1a861e8
--- /dev/null
+++ b/packages/frontend/core/src/modules/cloud/provider/validator.ts
@@ -0,0 +1,12 @@
+import { createIdentifier } from '@toeverything/infra';
+
+export interface ValidatorProvider {
+  /**
+   * Calculate a token based on the server's challenge and resource to pass the
+   * challenge validation.
+   */
+  validate: (challenge: string, resource: string) => Promise<string>;
+}
+
+export const ValidatorProvider =
+  createIdentifier<ValidatorProvider>('ValidatorProvider');
diff --git a/packages/frontend/core/src/modules/cloud/services/auth.ts b/packages/frontend/core/src/modules/cloud/services/auth.ts
index 76525c4362..21eab59ca3 100644
--- a/packages/frontend/core/src/modules/cloud/services/auth.ts
+++ b/packages/frontend/core/src/modules/cloud/services/auth.ts
@@ -113,7 +113,7 @@ export class AuthService extends Service {
 
   async sendEmailMagicLink(
     email: string,
-    verifyToken: string,
+    verifyToken?: string,
     challenge?: string,
     redirectUrl?: string // url to redirect to after signed-in
   ) {
@@ -137,7 +137,7 @@ export class AuthService extends Service {
         }),
         headers: {
           'content-type': 'application/json',
-          ...this.captchaHeaders(verifyToken, challenge),
+          ...(verifyToken ? this.captchaHeaders(verifyToken, challenge) : {}),
         },
       });
     } catch (e) {
@@ -224,7 +224,7 @@ export class AuthService extends Service {
   async signInPassword(credential: {
     email: string;
     password: string;
-    verifyToken: string;
+    verifyToken?: string;
     challenge?: string;
   }) {
     track.$.$.auth.signIn({ method: 'password' });
@@ -234,7 +234,9 @@ export class AuthService extends Service {
         body: JSON.stringify(credential),
         headers: {
           'content-type': 'application/json',
-          ...this.captchaHeaders(credential.verifyToken, credential.challenge),
+          ...(credential.verifyToken
+            ? this.captchaHeaders(credential.verifyToken, credential.challenge)
+            : {}),
         },
       });
       this.session.revalidate();
diff --git a/packages/frontend/core/src/modules/cloud/services/captcha.ts b/packages/frontend/core/src/modules/cloud/services/captcha.ts
new file mode 100644
index 0000000000..4a8166ea02
--- /dev/null
+++ b/packages/frontend/core/src/modules/cloud/services/captcha.ts
@@ -0,0 +1,75 @@
+import {
+  catchErrorInto,
+  effect,
+  fromPromise,
+  LiveData,
+  onComplete,
+  onStart,
+  Service,
+} from '@toeverything/infra';
+import { EMPTY, mergeMap, switchMap } from 'rxjs';
+
+import type { ValidatorProvider } from '../provider/validator';
+import type { FetchService } from './fetch';
+import type { ServerConfigService } from './server-config';
+
+export class CaptchaService extends Service {
+  needCaptcha$ = this.serverConfigService.serverConfig.features$.map(
+    r => r?.captcha || false
+  );
+  challenge$ = new LiveData<string | undefined>(undefined);
+  isLoading$ = new LiveData(false);
+  verifyToken$ = new LiveData<string | undefined>(undefined);
+  error$ = new LiveData<any | undefined>(undefined);
+
+  constructor(
+    private readonly serverConfigService: ServerConfigService,
+    private readonly fetchService: FetchService,
+    public readonly validatorProvider?: ValidatorProvider
+  ) {
+    super();
+  }
+
+  revalidate = effect(
+    switchMap(() => {
+      return fromPromise(async signal => {
+        if (!this.needCaptcha$.value) {
+          return {};
+        }
+        const res = await this.fetchService.fetch('/api/auth/challenge', {
+          signal,
+        });
+        const data = (await res.json()) as {
+          challenge: string;
+          resource: string;
+        };
+        if (!data || !data.challenge || !data.resource) {
+          throw new Error('Invalid challenge');
+        }
+        if (this.validatorProvider) {
+          const token = await this.validatorProvider.validate(
+            data.challenge,
+            data.resource
+          );
+          return {
+            token,
+            challenge: data.challenge,
+          };
+        }
+        return { challenge: data.challenge, token: undefined };
+      }).pipe(
+        mergeMap(({ challenge, token }) => {
+          this.verifyToken$.next(token);
+          this.challenge$.next(challenge);
+          return EMPTY;
+        }),
+        catchErrorInto(this.error$),
+        onStart(() => {
+          this.verifyToken$.next(undefined);
+          this.isLoading$.next(true);
+        }),
+        onComplete(() => this.isLoading$.next(false))
+      );
+    })
+  );
+}
diff --git a/packages/frontend/i18n/src/i18n-completenesses.json b/packages/frontend/i18n/src/i18n-completenesses.json
index 7d370ccc22..3536bab369 100644
--- a/packages/frontend/i18n/src/i18n-completenesses.json
+++ b/packages/frontend/i18n/src/i18n-completenesses.json
@@ -10,7 +10,7 @@
   "fr": 75,
   "hi": 2,
   "it": 1,
-  "ja": 99,
+  "ja": 100,
   "ko": 89,
   "pl": 0,
   "pt-BR": 97,
diff --git a/tests/kit/utils/cloud.ts b/tests/kit/utils/cloud.ts
index 29d2a9b92d..9e4c70a162 100644
--- a/tests/kit/utils/cloud.ts
+++ b/tests/kit/utils/cloud.ts
@@ -189,7 +189,7 @@ export async function loginUser(
   }
   await page.waitForTimeout(200);
   await page.getByTestId('sign-in-button').click();
-  await page.waitForTimeout(200);
+  await page.waitForTimeout(500);
   if (config?.afterLogin) {
     await config.afterLogin();
   }