feat: rewrite auth (#364)

* feat: wip rewrite auth

* feat: restructure folders and fix stories and tests

* feat: remove auth provider and fix tests

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 { Modal } from '@/auth/components/ui/Modal';
 import { Title } from '@/auth/components/ui/Title';
-import { hasAccessToken } from '@/auth/services/AuthService';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
@@ -34,14 +33,6 @@ export function Index() {
     authFlowUserEmailState,
   );
 
-  useEffect(() => {
-    setMockMode(true);
-
-    if (hasAccessToken()) {
-      navigate('/');
-    }
-  }, [navigate, setMockMode]);
-
   const onGoogleLoginClick = useCallback(() => {
     window.location.href = process.env.REACT_APP_AUTH_URL + '/google' || '';
   }, []);
@@ -62,6 +53,10 @@ export function Index() {
     [onPasswordLoginClick],
   );
 
+  useEffect(() => {
+    setMockMode(true);
+  }, [navigate, setMockMode]);
+
   return (
     <>
       <Companies />

front/src/pages/auth/PasswordLogin.tsx

@@ -9,7 +9,7 @@ import { Logo } from '@/auth/components/ui/Logo';
 import { Modal } from '@/auth/components/ui/Modal';
 import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
-import { getTokensFromLoginToken } from '@/auth/services/AuthService';
+import { useAuth } from '@/auth/hooks/useAuth';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
@@ -47,48 +47,28 @@ export function PasswordLogin() {
   const [internalPassword, setInternalPassword] = useState(prefillPassword);
   const [formError, setFormError] = useState('');
 
-  const userLogin = useCallback(async () => {
-    const response = await fetch(
-      process.env.REACT_APP_AUTH_URL + '/password' || '',
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          email: authFlowUserEmail,
-          password: internalPassword,
-        }),
-      },
-    );
+  const { login } = useAuth();
 
-    if (!response.ok) {
-      const errorData = await response.json();
-      setFormError(errorData.message);
-      return;
+  const handleLogin = useCallback(async () => {
+    try {
+      await login(authFlowUserEmail, internalPassword);
+      setMockMode(false);
+      navigate('/');
+    } catch (err: any) {
+      setFormError(err.message);
     }
-    const { loginToken } = await response.json();
-
-    if (!loginToken) {
-      return;
-    }
-
-    await getTokensFromLoginToken(loginToken.token);
-    setMockMode(false);
-
-    navigate('/');
-  }, [authFlowUserEmail, internalPassword, navigate, setMockMode]);
+  }, [authFlowUserEmail, internalPassword, login, navigate, setMockMode]);
 
   useHotkeys(
     'enter',
     () => {
-      userLogin();
+      handleLogin();
     },
     {
       enableOnContentEditable: true,
       enableOnFormTags: true,
     },
-    [userLogin],
+    [handleLogin],
   );
 
   return (
@@ -118,7 +98,7 @@ export function PasswordLogin() {
               type="password"
             />
             <StyledButtonContainer>
-              <PrimaryButton fullWidth onClick={userLogin}>
+              <PrimaryButton fullWidth onClick={handleLogin}>
                 Continue
               </PrimaryButton>
             </StyledButtonContainer>

front/src/pages/auth/Verify.tsx

@@ -1,30 +1,33 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
-import { getTokensFromLoginToken } from '@/auth/services/AuthService';
+import { useAuth } from '@/auth/hooks/useAuth';
+import { useIsLogged } from '@/auth/hooks/useIsLogged';
 
 export function Verify() {
   const [searchParams] = useSearchParams();
-  const [isLoading, setIsLoading] = useState(false);
-
   const loginToken = searchParams.get('loginToken');
+
+  const isLogged = useIsLogged();
   const navigate = useNavigate();
 
+  const { verify } = useAuth();
+
   useEffect(() => {
     async function getTokens() {
       if (!loginToken) {
         return;
       }
-      setIsLoading(true);
-      await getTokensFromLoginToken(loginToken);
-      setIsLoading(false);
+      await verify(loginToken);
       navigate('/');
     }
 
-    if (!isLoading) {
+    if (!isLogged) {
       getTokens();
     }
-  }, [isLoading, navigate, loginToken]);
+    // Verify only needs to run once at mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return <></>;
 }