feat: optimize sign in experience (#4099)

apps/core/src/components/affine/auth/after-sign-in-send-email.tsx

@@ -22,11 +22,7 @@ export const AfterSignInSendEmail = ({
   const t = useAFFiNEI18N();
   const loginStatus = useCurrentLoginStatus();
 
-  const { resendCountDown, allowSendEmail, signIn } = useAuth({
-    onNoAccess: useCallback(() => {
-      setAuthState('noAccess');
-    }, [setAuthState]),
-  });
+  const { resendCountDown, allowSendEmail, signIn } = useAuth();
   if (loginStatus === 'authenticated') {
     onSignedIn?.();
   }

apps/core/src/components/affine/auth/after-sign-up-send-email.tsx

@@ -21,11 +21,7 @@ export const AfterSignUpSendEmail: FC<AuthPanelProps> = ({
   const t = useAFFiNEI18N();
   const loginStatus = useCurrentLoginStatus();
 
-  const { resendCountDown, allowSendEmail, signUp } = useAuth({
-    onNoAccess: useCallback(() => {
-      setAuthState('noAccess');
-    }, [setAuthState]),
-  });
+  const { resendCountDown, allowSendEmail, signUp } = useAuth();
 
   if (loginStatus === 'authenticated') {
     onSignedIn?.();

apps/core/src/components/affine/auth/sign-in.tsx

@@ -16,7 +16,7 @@ import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-s
 import { emailRegex } from '../../../utils/email-regex';
 import type { AuthPanelProps } from './index';
 import * as style from './style.css';
-import { useAuth } from './use-auth';
+import { INTERNAL_BETA_URL, useAuth } from './use-auth';
 
 function validateEmail(email: string) {
   return emailRegex.test(email);
@@ -31,12 +31,14 @@ export const SignIn: FC<AuthPanelProps> = ({
   const t = useAFFiNEI18N();
   const loginStatus = useCurrentLoginStatus();
 
-  const { resendCountDown, allowSendEmail, signIn, signUp, signInWithGoogle } =
-    useAuth({
-      onNoAccess: useCallback(() => {
-        setAuthState('noAccess');
-      }, [setAuthState]),
-    });
+  const {
+    isMutating: isSigningIn,
+    resendCountDown,
+    allowSendEmail,
+    signIn,
+    signUp,
+    signInWithGoogle,
+  } = useAuth();
 
   const { trigger: verifyUser, isMutating } = useMutation({
     mutation: getUserQuery,
@@ -55,16 +57,20 @@ export const SignIn: FC<AuthPanelProps> = ({
 
     setIsValidEmail(true);
     const { user } = await verifyUser({ email });
-
     setAuthEmail(email);
+
     if (user) {
+      const res = await signIn(email);
+      if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) {
+        return setAuthState('noAccess');
+      }
       setAuthState('afterSignInSendEmail');
-
-      await signIn(email);
     } else {
+      const res = await signUp(email);
+      if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) {
+        return setAuthState('noAccess');
+      }
       setAuthState('afterSignUpSendEmail');
-
-      await signUp(email);
     }
   }, [email, setAuthEmail, setAuthState, signIn, signUp, verifyUser]);
 
@@ -112,7 +118,7 @@ export const SignIn: FC<AuthPanelProps> = ({
           size="extraLarge"
           data-testid="continue-login-button"
           block
-          loading={isMutating}
+          loading={isMutating || isSigningIn}
           disabled={!allowSendEmail}
           icon={
             allowSendEmail || isMutating ? (

apps/core/src/components/affine/auth/use-auth.ts

@@ -7,7 +7,7 @@ import { useCallback } from 'react';
 import { signInCloud } from '../../../utils/cloud-utils';
 
 const COUNT_DOWN_TIME = 60;
-const INTERNAL_BETA_URL = `https://community.affine.pro/c/insider-general/`;
+export const INTERNAL_BETA_URL = `https://community.affine.pro/c/insider-general/`;
 
 function handleSendEmailError(
   res: SignInResponse | undefined | void,
@@ -20,21 +20,16 @@ function handleSendEmailError(
       type: 'error',
     });
   }
-  // if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) {
-  //   pushNotification({
-  //     title: 'Sign up error',
-  //     message: `You don't have early access permission\nVisit ${INTERNAL_BETA_URL} for more information`,
-  //     type: 'error',
-  //   });
-  // }
 }
 
 type AuthStoreAtom = {
   allowSendEmail: boolean;
   resendCountDown: number;
+  isMutating: boolean;
 };
 
 export const authStoreAtom = atom<AuthStoreAtom>({
+  isMutating: false,
   allowSendEmail: true,
   resendCountDown: COUNT_DOWN_TIME,
 });
@@ -46,6 +41,7 @@ const countDownAtom = atom(
       const countDown = get(authStoreAtom).resendCountDown;
       if (countDown === 0) {
         set(authStoreAtom, {
+          isMutating: false,
           allowSendEmail: true,
           resendCountDown: COUNT_DOWN_TIME,
         });
@@ -53,6 +49,7 @@ const countDownAtom = atom(
         return;
       }
       set(authStoreAtom, {
+        isMutating: false,
         resendCountDown: countDown - 1,
         allowSendEmail: false,
       });
@@ -60,18 +57,19 @@ const countDownAtom = atom(
   }
 );
 
-export const useAuth = ({ onNoAccess }: { onNoAccess: () => void }) => {
+export const useAuth = () => {
   const pushNotification = useSetAtom(pushNotificationAtom);
   const [authStore, setAuthStore] = useAtom(authStoreAtom);
   const startResendCountDown = useSetAtom(countDownAtom);
 
   const signIn = useCallback(
     async (email: string) => {
-      setAuthStore(() => ({
-        allowSendEmail: false,
-        resendCountDown: COUNT_DOWN_TIME,
-      }));
-      startResendCountDown();
+      setAuthStore(prev => {
+        return {
+          ...prev,
+          isMutating: true,
+        };
+      });
 
       const res = await signInCloud('email', {
         email: email,
@@ -81,20 +79,27 @@ export const useAuth = ({ onNoAccess }: { onNoAccess: () => void }) => {
 
       handleSendEmailError(res, pushNotification);
 
-      if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) {
-        onNoAccess();
-      }
+      setAuthStore({
+        isMutating: false,
+        allowSendEmail: false,
+        resendCountDown: COUNT_DOWN_TIME,
+      });
+
+      startResendCountDown();
+
+      return res;
     },
-    [onNoAccess, pushNotification, setAuthStore, startResendCountDown]
+    [pushNotification, setAuthStore, startResendCountDown]
   );
 
   const signUp = useCallback(
     async (email: string) => {
-      setAuthStore({
-        allowSendEmail: false,
-        resendCountDown: COUNT_DOWN_TIME,
+      setAuthStore(prev => {
+        return {
+          ...prev,
+          isMutating: true,
+        };
       });
-      startResendCountDown();
 
       const res = await signInCloud('email', {
         email: email,
@@ -104,11 +109,17 @@ export const useAuth = ({ onNoAccess }: { onNoAccess: () => void }) => {
 
       handleSendEmailError(res, pushNotification);
 
-      if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) {
-        onNoAccess();
-      }
+      setAuthStore({
+        isMutating: false,
+        allowSendEmail: false,
+        resendCountDown: COUNT_DOWN_TIME,
+      });
+
+      startResendCountDown();
+
+      return res;
     },
-    [onNoAccess, pushNotification, setAuthStore, startResendCountDown]
+    [pushNotification, setAuthStore, startResendCountDown]
   );
 
   const signInWithGoogle = useCallback(() => {
@@ -118,6 +129,7 @@ export const useAuth = ({ onNoAccess }: { onNoAccess: () => void }) => {
   return {
     allowSendEmail: authStore.allowSendEmail,
     resendCountDown: authStore.resendCountDown,
+    isMutating: authStore.isMutating,
     signUp,
     signIn,
     signInWithGoogle,