feat: auth race condition & optimize ApolloFactory & too many pageview (#602)

front/src/pages/auth/CreateProfile.tsx

@@ -9,7 +9,6 @@ import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
 import { currentUserState } from '@/auth/states/currentUserState';
-import { isMockModeState } from '@/auth/states/isMockModeState';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
@@ -39,7 +38,6 @@ const StyledButtonContainer = styled.div`
 
 export function CreateProfile() {
   const navigate = useNavigate();
-  const [, setMockMode] = useRecoilState(isMockModeState);
   const onboardingStatus = useOnboardingStatus();
 
   const [currentUser] = useRecoilState(currentUserState);
@@ -93,11 +91,10 @@ export function CreateProfile() {
   );
 
   useEffect(() => {
-    setMockMode(true);
     if (onboardingStatus !== OnboardingStatus.OngoingProfileCreation) {
       navigate('/');
     }
-  }, [onboardingStatus, navigate, setMockMode]);
+  }, [onboardingStatus, navigate]);
 
   return (
     <>

front/src/pages/auth/CreateWorkspace.tsx

@@ -2,12 +2,10 @@ import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
 
 import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
-import { isMockModeState } from '@/auth/states/isMockModeState';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
@@ -36,7 +34,6 @@ const StyledButtonContainer = styled.div`
 `;
 
 export function CreateWorkspace() {
-  const [, setMockMode] = useRecoilState(isMockModeState);
   const navigate = useNavigate();
   const onboardingStatus = useOnboardingStatus();
 
@@ -82,11 +79,10 @@ export function CreateWorkspace() {
   );
 
   useEffect(() => {
-    setMockMode(true);
     if (onboardingStatus !== OnboardingStatus.OngoingWorkspaceCreation) {
       navigate('/auth/create/profile');
     }
-  }, [onboardingStatus, navigate, setMockMode]);
+  }, [onboardingStatus, navigate]);
 
   return (
     <>

front/src/pages/auth/Index.tsx

@@ -10,7 +10,6 @@ import { HorizontalSeparator } from '@/auth/components/ui/HorizontalSeparator';
 import { Logo } from '@/auth/components/ui/Logo';
 import { Title } from '@/auth/components/ui/Title';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
-import { isMockModeState } from '@/auth/states/isMockModeState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { isDemoModeState } from '@/client-config/states/isDemoModeState';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
@@ -34,7 +33,6 @@ const StyledFooterNote = styled(FooterNote)`
 export function Index() {
   const navigate = useNavigate();
   const theme = useTheme();
-  const [, setMockMode] = useRecoilState(isMockModeState);
   const [authProviders] = useRecoilState(authProvidersState);
   const [demoMode] = useRecoilState(isDemoModeState);
 
@@ -67,9 +65,8 @@ export function Index() {
   );
 
   useEffect(() => {
-    setMockMode(true);
     setAuthFlowUserEmail(demoMode ? 'tim@apple.dev' : '');
-  }, [navigate, setMockMode, setAuthFlowUserEmail, demoMode]);
+  }, [navigate, setAuthFlowUserEmail, demoMode]);
 
   return (
     <>

front/src/pages/auth/PasswordLogin.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
@@ -9,7 +9,6 @@ import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
-import { isMockModeState } from '@/auth/states/isMockModeState';
 import { isDemoModeState } from '@/client-config/states/isDemoModeState';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
@@ -51,12 +50,11 @@ const StyledErrorContainer = styled.div`
 
 export function PasswordLogin() {
   const navigate = useNavigate();
-  const [isDemoMode] = useRecoilState(isDemoModeState);
 
+  const [isDemoMode] = useRecoilState(isDemoModeState);
   const [authFlowUserEmail, setAuthFlowUserEmail] = useRecoilState(
     authFlowUserEmailState,
   );
-  const [, setMockMode] = useRecoilState(isMockModeState);
   const [internalPassword, setInternalPassword] = useState(
     isDemoMode ? 'Applecar2025' : '',
   );
@@ -69,15 +67,10 @@ export function PasswordLogin() {
     },
   });
 
-  useEffect(() => {
-    setMockMode(true);
-  }, [setMockMode]);
-
   const workspaceInviteHash = useParams().workspaceInviteHash;
 
   const handleSubmit = useCallback(async () => {
     try {
-      setMockMode(false);
       if (data?.checkUserExists.exists) {
         await login(authFlowUserEmail, internalPassword);
       } else {
@@ -101,7 +94,6 @@ export function PasswordLogin() {
     signUpToWorkspace,
     authFlowUserEmail,
     internalPassword,
-    setMockMode,
     navigate,
     data?.checkUserExists.exists,