feat(server): make captcha modular (#5961)

packages/frontend/core/src/components/affine/auth/sign-in-with-password.tsx

@@ -30,13 +30,15 @@ export const SignInWithPassword: FC<AuthPanelProps<'signInWithPassword'>> = ({
   const [sendingEmail, setSendingEmail] = useState(false);
 
   const onSignIn = useAsyncCallback(async () => {
-    if (isLoading) return;
+    if (isLoading || !verifyToken) return;
     setIsLoading(true);
 
     try {
       await authService.signInPassword({
         email,
         password,
+        verifyToken,
+        challenge,
       });
     } catch (err) {
       console.error(err);
@@ -44,7 +46,7 @@ export const SignInWithPassword: FC<AuthPanelProps<'signInWithPassword'>> = ({
     } finally {
       setIsLoading(false);
     }
-  }, [isLoading, authService, email, password]);
+  }, [isLoading, authService, email, password, verifyToken, challenge]);
 
   const sendMagicLink = useAsyncCallback(async () => {
     if (sendingEmail) return;

packages/frontend/core/src/components/affine/auth/use-captcha.tsx

@@ -1,9 +1,11 @@
 import { apis } from '@affine/electron-api';
 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 { ServerConfigService } from '../../../modules/cloud';
 import * as style from './style.css';
 
 type Challenge = {
@@ -27,6 +29,7 @@ const challengeFetcher = async (url: string) => {
 
   return challenge;
 };
+
 const generateChallengeResponse = async (challenge: string) => {
   if (!environment.isDesktop) {
     return undefined;
@@ -38,11 +41,18 @@ const generateChallengeResponse = async (challenge: string) => {
 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();
 
-  if (!runtimeConfig.enableCaptcha) {
+  if (!hasCaptchaFeature) {
     return null;
   }
 
@@ -66,6 +76,7 @@ export const Captcha = () => {
 export const useCaptcha = (): [string | undefined, string?] => {
   const [verifyToken] = useAtom(captchaAtom);
   const [response, setResponse] = useAtom(responseAtom);
+  const hasCaptchaFeature = useHasCaptcha();
 
   const { data: challenge } = useSWR('/api/auth/challenge', challengeFetcher, {
     suspense: false,
@@ -75,7 +86,7 @@ export const useCaptcha = (): [string | undefined, string?] => {
 
   useEffect(() => {
     if (
-      runtimeConfig.enableCaptcha &&
+      hasCaptchaFeature &&
       environment.isDesktop &&
       challenge?.challenge &&
       prevChallenge.current !== challenge.challenge
@@ -87,9 +98,9 @@ export const useCaptcha = (): [string | undefined, string?] => {
           console.error('Error getting challenge response:', err);
         });
     }
-  }, [challenge, setResponse]);
+  }, [challenge, hasCaptchaFeature, setResponse]);
 
-  if (!runtimeConfig.enableCaptcha) {
+  if (!hasCaptchaFeature) {
     return ['XXXX.DUMMY.TOKEN.XXXX'];
   }
 

packages/frontend/core/src/modules/cloud/services/auth.ts

@@ -82,27 +82,19 @@ export class AuthService extends Service {
     verifyToken: string,
     challenge?: string
   ) {
-    const searchParams = new URLSearchParams();
-    if (challenge) {
-      searchParams.set('challenge', challenge);
-    }
-    searchParams.set('token', verifyToken);
-
-    const res = await this.fetchService.fetch(
-      '/api/auth/sign-in?' + searchParams.toString(),
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          email,
-          // we call it [callbackUrl] instead of [redirect_uri]
-          // to make it clear the url is used to finish the sign-in process instead of redirect after signed-in
-          callbackUrl: `/magic-link?client=${environment.isDesktop ? appInfo?.schema : 'web'}`,
-        }),
-        headers: {
-          'content-type': 'application/json',
-        },
-      }
-    );
+    const res = await this.fetchService.fetch('/api/auth/sign-in', {
+      method: 'POST',
+      body: JSON.stringify({
+        email,
+        // we call it [callbackUrl] instead of [redirect_uri]
+        // to make it clear the url is used to finish the sign-in process instead of redirect after signed-in
+        callbackUrl: `/magic-link?client=${environment.isDesktop ? appInfo?.schema : 'web'}`,
+      }),
+      headers: {
+        'content-type': 'application/json',
+        ...this.captchaHeaders(verifyToken, challenge),
+      },
+    });
     if (!res.ok) {
       throw new Error('Failed to send email');
     }
@@ -159,12 +151,18 @@ export class AuthService extends Service {
     return await res.json();
   }
 
-  async signInPassword(credential: { email: string; password: string }) {
+  async signInPassword(credential: {
+    email: string;
+    password: string;
+    verifyToken: string;
+    challenge?: string;
+  }) {
     const res = await this.fetchService.fetch('/api/auth/sign-in', {
       method: 'POST',
       body: JSON.stringify(credential),
       headers: {
         'content-type': 'application/json',
+        ...this.captchaHeaders(credential.verifyToken, credential.challenge),
       },
     });
     if (!res.ok) {
@@ -182,4 +180,16 @@ export class AuthService extends Service {
   checkUserByEmail(email: string) {
     return this.store.checkUserByEmail(email);
   }
+
+  captchaHeaders(token: string, challenge?: string) {
+    const headers: Record<string, string> = {
+      'x-captcha-token': token,
+    };
+
+    if (challenge) {
+      headers['x-captcha-challenge'] = challenge;
+    }
+
+    return headers;
+  }
 }