From 13b24eb823f429890cbb9db3f26ae218a220ea7c Mon Sep 17 00:00:00 2001
From: darkskygit <darksky.graphite@toeverything.info>
Date: Tue, 15 Oct 2024 09:10:28 +0000
Subject: [PATCH] feat: refresh captcha correctly (#8491)

fix AF-1482
---
 .../affine/auth/sign-in-with-password.tsx        | 13 +++++++++++--
 .../core/src/components/affine/auth/sign-in.tsx  | 12 ++++++++++--
 .../src/components/affine/auth/use-captcha.tsx   | 16 ++++++++++------
 .../frontend/i18n/src/i18n-completenesses.json   |  2 +-
 4 files changed, 32 insertions(+), 11 deletions(-)

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 d12ee752c9..ff2505625a 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
@@ -25,7 +25,7 @@ export const SignInWithPassword: FC<AuthPanelProps<'signInWithPassword'>> = ({
 
   const [password, setPassword] = useState('');
   const [passwordError, setPasswordError] = useState(false);
-  const [verifyToken, challenge] = useCaptcha();
+  const [verifyToken, challenge, refreshChallenge] = useCaptcha();
   const [isLoading, setIsLoading] = useState(false);
   const [sendingEmail, setSendingEmail] = useState(false);
 
@@ -43,10 +43,19 @@ export const SignInWithPassword: FC<AuthPanelProps<'signInWithPassword'>> = ({
     } catch (err) {
       console.error(err);
       setPasswordError(true);
+      refreshChallenge?.();
     } finally {
       setIsLoading(false);
     }
-  }, [isLoading, authService, email, password, verifyToken, challenge]);
+  }, [
+    isLoading,
+    verifyToken,
+    authService,
+    email,
+    password,
+    challenge,
+    refreshChallenge,
+  ]);
 
   const sendMagicLink = useAsyncCallback(async () => {
     if (sendingEmail) return;
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 fee26bac26..1d11642271 100644
--- a/packages/frontend/core/src/components/affine/auth/sign-in.tsx
+++ b/packages/frontend/core/src/components/affine/auth/sign-in.tsx
@@ -29,7 +29,7 @@ export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
   const authService = useService(AuthService);
   const [searchParams] = useSearchParams();
   const [isMutating, setIsMutating] = useState(false);
-  const [verifyToken, challenge] = useCaptcha();
+  const [verifyToken, challenge, refreshChallenge] = useCaptcha();
   const [email, setEmail] = useState('');
 
   const [isValidEmail, setIsValidEmail] = useState(true);
@@ -53,6 +53,7 @@ export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
           // 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,
@@ -82,7 +83,14 @@ export const SignIn: FC<AuthPanelProps<'signIn'>> = ({
     }
 
     setIsMutating(false);
-  }, [authService, challenge, email, setAuthState, verifyToken]);
+  }, [
+    authService,
+    challenge,
+    email,
+    refreshChallenge,
+    setAuthState,
+    verifyToken,
+  ]);
 
   return (
     <>
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 44f94d2b83..08b3939fcd 100644
--- a/packages/frontend/core/src/components/affine/auth/use-captcha.tsx
+++ b/packages/frontend/core/src/components/affine/auth/use-captcha.tsx
@@ -73,15 +73,19 @@ export const Captcha = () => {
   );
 };
 
-export const useCaptcha = (): [string | undefined, string?] => {
+export const useCaptcha = (): [string | undefined, string?, (() => void)?] => {
   const [verifyToken] = useAtom(captchaAtom);
   const [response, setResponse] = useAtom(responseAtom);
   const hasCaptchaFeature = useHasCaptcha();
 
-  const { data: challenge } = useSWR('/api/auth/challenge', challengeFetcher, {
-    suspense: false,
-    revalidateOnFocus: false,
-  });
+  const { data: challenge, mutate } = useSWR(
+    '/api/auth/challenge',
+    challengeFetcher,
+    {
+      suspense: false,
+      revalidateOnFocus: false,
+    }
+  );
   const prevChallenge = useRef('');
 
   useEffect(() => {
@@ -106,7 +110,7 @@ export const useCaptcha = (): [string | undefined, string?] => {
 
   if (BUILD_CONFIG.isElectron) {
     if (response) {
-      return [response, challenge?.challenge];
+      return [response, challenge?.challenge, mutate];
     } else {
       return [undefined, challenge?.challenge];
     }
diff --git a/packages/frontend/i18n/src/i18n-completenesses.json b/packages/frontend/i18n/src/i18n-completenesses.json
index 15d69be757..03d2fdeec2 100644
--- a/packages/frontend/i18n/src/i18n-completenesses.json
+++ b/packages/frontend/i18n/src/i18n-completenesses.json
@@ -2,7 +2,7 @@
   "ar": 87,
   "ca": 6,
   "da": 7,
-  "de": 33,
+  "de": 32,
   "en": 100,
   "es-AR": 14,
   "es-CL": 16,