fix(core): fix sign in with email (#9108)

packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx

@@ -16,6 +16,7 @@ import {
   type SetStateAction,
   useCallback,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 
@@ -32,7 +33,8 @@ export const SignInWithEmailStep = ({
   changeState: Dispatch<SetStateAction<SignInState>>;
   close: () => void;
 }) => {
-  const [resendCountDown, setResendCountDown] = useState(60);
+  const initialSent = useRef(false);
+  const [resendCountDown, setResendCountDown] = useState(0);
 
   const email = state.email;
 
@@ -72,7 +74,7 @@ export const SignInWithEmailStep = ({
     }
   }, [close, loginStatus, t]);
 
-  const onResendClick = useAsyncCallback(async () => {
+  const sendEmail = useAsyncCallback(async () => {
     if (isSending || (!verifyToken && needCaptcha)) return;
     setIsSending(true);
     try {
@@ -102,6 +104,13 @@ export const SignInWithEmailStep = ({
     verifyToken,
   ]);
 
+  useEffect(() => {
+    if (!initialSent.current && (verifyToken || !needCaptcha)) {
+      initialSent.current = true;
+      sendEmail();
+    }
+  }, [initialSent, needCaptcha, sendEmail, verifyToken]);
+
   const onSignInWithPasswordClick = useCallback(() => {
     changeState(prev => ({ ...prev, step: 'signInWithPassword' }));
   }, [changeState]);
@@ -139,7 +148,7 @@ export const SignInWithEmailStep = ({
             disabled={isSending}
             variant="plain"
             size="large"
-            onClick={onResendClick}
+            onClick={sendEmail}
           >
             {t['com.affine.auth.sign.auth.code.resend.hint']()}
           </Button>

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

@@ -57,7 +57,6 @@ export const SignInWithPasswordStep = ({
   const needCaptcha = useLiveData(captchaService.needCaptcha$);
   const challenge = useLiveData(captchaService.challenge$);
   const [isLoading, setIsLoading] = useState(false);
-  const [sendingEmail, setSendingEmail] = useState(false);
 
   const loginStatus = useLiveData(authService.session.status$);
 
@@ -100,20 +99,9 @@ export const SignInWithPasswordStep = ({
     challenge,
   ]);
 
-  const sendMagicLink = useAsyncCallback(async () => {
+  const sendMagicLink = useCallback(() => {
-    if (sendingEmail) return;
+    changeState(prev => ({ ...prev, step: 'signInWithEmail' }));
-    setSendingEmail(true);
+  }, [changeState]);
-    try {
-      changeState(prev => ({ ...prev, step: 'signInWithEmail' }));
-    } catch (err) {
-      console.error(err);
-      notify.error({
-        title: 'Failed to send email, please try again.',
-      });
-      // TODO(@eyhn): handle error better
-    }
-    setSendingEmail(false);
-  }, [sendingEmail, changeState]);
 
   return (
     <>