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

packages/frontend/core/src/components/hooks/use-navigate-helper.ts

@@ -1,4 +1,4 @@
-import { toURLSearchParams } from '@affine/core/modules/navigation';
+import { toURLSearchParams } from '@affine/core/modules/navigation/utils';
 import type { DocMode } from '@blocksuite/affine/blocks';
 import { createContext, useCallback, useContext, useMemo } from 'react';
 import type { NavigateFunction, NavigateOptions } from 'react-router-dom';

packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.tsx

@@ -1,4 +1,4 @@
-import { WorkbenchLink } from '@affine/core/modules/workbench';
+import { WorkbenchLink } from '@affine/core/modules/workbench/view/workbench-link';
 import { ArrowDownSmallIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import React from 'react';