feat: refresh captcha correctly (#8491)

fix AF-1482

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;

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 (
     <>

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, {
+  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];
     }

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,