refactored authentication

src/frontend/src/App.tsx

@@ -130,13 +130,13 @@ export default function App() {
     );
   };
 
-  const { getAuthentication } = useContext(AuthContext);
+  const { isAuthenticated } = useContext(AuthContext);
   const { refreshFlows, setVersion } = useContext(FlowsContext);
   const { getTypes } = useContext(typesContext);
 
   useEffect(() => {
     // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks.
-    if (getAuthentication() === true) {
+    if (isAuthenticated === true) {
       // get data from db
       refreshFlows();
       getTypes();
@@ -145,7 +145,7 @@ export default function App() {
     getVersion().then((data) => {
       setVersion(data.version);
     });
-  }, [getAuthentication()]);
+  }, [isAuthenticated]);
 
   return (
     //need parent component with width and height

src/frontend/src/components/authAdminGuard/index.tsx

@@ -7,18 +7,12 @@ export const ProtectedAdminRoute = ({ children }) => {
     isAdmin,
     isAuthenticated,
     logout,
-    getAuthentication,
     userData,
     autoLogin,
   } = useContext(AuthContext);
-  useEffect(() => {
-    if (!isAuthenticated && !getAuthentication()) {
-      window.location.replace("/login");
-      logout();
-    }
-  }, [isAuthenticated, getAuthentication, logout, userData]);
 
-  if (!isAuthenticated && !getAuthentication()) {
+  if (!isAuthenticated) {
+    logout();
     return <Navigate to="/login" replace />;
   }
 

src/frontend/src/components/authGuard/index.tsx

@@ -3,9 +3,9 @@ import { Navigate } from "react-router-dom";
 import { AuthContext } from "../../contexts/authContext";
 
 export const ProtectedRoute = ({ children }) => {
-  const { isAuthenticated, logout, getAuthentication } =
+  const { isAuthenticated, logout} =
     useContext(AuthContext);
-  if (!isAuthenticated && !getAuthentication()) {
+  if (!isAuthenticated) {
     logout();
     return <Navigate to="/login" replace />;
   }

src/frontend/src/components/authLoginGuard/index.tsx

@@ -3,14 +3,14 @@ import { Navigate } from "react-router-dom";
 import { AuthContext } from "../../contexts/authContext";
 
 export const ProtectedLoginRoute = ({ children }) => {
-  const { getAuthentication, autoLogin } = useContext(AuthContext);
+  const { isAuthenticated, autoLogin } = useContext(AuthContext);
 
   if (autoLogin === true) {
     window.location.replace("/");
     return <Navigate to="/" replace />;
   }
 
-  if (getAuthentication()) {
+  if (isAuthenticated) {
     window.location.replace("/");
     return <Navigate to="/" replace />;
   }

src/frontend/src/contexts/authContext.tsx

@@ -15,7 +15,6 @@ const initialValue: AuthContextType = {
   logout: () => {},
   userData: null,
   setUserData: () => {},
-  getAuthentication: () => false,
   authenticationErrorCount: 0,
   autoLogin: false,
   setAutoLogin: () => {},
@@ -34,7 +33,9 @@ export function AuthProvider({ children }): React.ReactElement {
   const [refreshToken, setRefreshToken] = useState<string | null>(
     cookies.get("refresh_tkn_lflw")
   );
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(
+    cookies.get("refresh_tkn_lflw") && cookies.get("access_tkn_lflw")
+  );
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
   const [userData, setUserData] = useState<Users | null>(null);
   const [autoLogin, setAutoLogin] = useState<boolean>(false);
@@ -72,7 +73,15 @@ export function AuthProvider({ children }): React.ReactElement {
       })
       .catch((error) => {
         setAutoLogin(false);
-        if (getAuthentication() && !isLoginPage) {
+        if (isAuthenticated && !isLoginPage) {
+          getUser();
+        } else {
+          setLoading(false);
+        }
+      });
+  }, [setUserData, setLoading, autoLogin, setIsAdmin]);
+
+  function getUser(){
     getLoggedUser()
       .then((user) => {
         setUserData(user);
@@ -84,17 +93,6 @@ export function AuthProvider({ children }): React.ReactElement {
         console.log("auth context");
         setLoading(false);
       });
-        } else {
-          setLoading(false);
-        }
-      });
-  }, [setUserData, setLoading, autoLogin, setIsAdmin]);
-
-  function getAuthentication() {
-    const storedRefreshToken = cookies.get("refresh_tkn_lflw");
-    const storedAccess = cookies.get("access_tkn_lflw");
-    const auth = storedAccess && storedRefreshToken ? true : false;
-    return auth;
   }
 
   function login(newAccessToken: string, refreshToken: string) {
@@ -103,6 +101,8 @@ export function AuthProvider({ children }): React.ReactElement {
     setAccessToken(newAccessToken);
     setRefreshToken(refreshToken);
     setIsAuthenticated(true);
+    setTimeout(() => {getUser();}, 500)
+    
   }
 
   function logout() {
@@ -127,14 +127,13 @@ export function AuthProvider({ children }): React.ReactElement {
       value={{
         isAdmin,
         setIsAdmin,
-        isAuthenticated: !!accessToken,
+        isAuthenticated,
         accessToken,
         refreshToken,
         login,
         logout,
         setUserData,
         userData,
-        getAuthentication,
         authenticationErrorCount: 0,
         setAutoLogin,
         autoLogin,

src/frontend/src/pages/AdminPage/LoginPage/index.tsx

@@ -17,7 +17,7 @@ export default function LoginAdminPage() {
 
   const [inputState, setInputState] =
     useState<loginInputStateType>(CONTROL_LOGIN_STATE);
-  const { login, getAuthentication, setUserData } = useContext(AuthContext);
+  const { login, isAuthenticated, setUserData } = useContext(AuthContext);
 
   const { password, username } = inputState;
   const setErrorData = useAlertStore((state) => state.setErrorData);
@@ -35,7 +35,6 @@ export default function LoginAdminPage() {
     onLogin(user)
       .then((user) => {
         login(user.access_token, user.refresh_token);
-        getUser();
         navigate("/admin/");
       })
       .catch((error) => {
@@ -46,20 +45,6 @@ export default function LoginAdminPage() {
       });
   }
 
-  function getUser() {
-    if (getAuthentication()) {
-      setTimeout(() => {
-        getLoggedUser()
-          .then((user) => {
-            setUserData(user);
-          })
-          .catch((error) => {
-            console.log("login admin page", error);
-          });
-      }, 1000);
-    }
-  }
-
   return (
     <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
       <div className="flex w-72 flex-col items-center justify-center gap-2">

src/frontend/src/pages/loginPage/index.tsx

@@ -19,7 +19,7 @@ export default function LoginPage(): JSX.Element {
     useState<loginInputStateType>(CONTROL_LOGIN_STATE);
 
   const { password, username } = inputState;
-  const { login, getAuthentication, setUserData, setIsAdmin } =
+  const { login, isAuthenticated, setUserData, setIsAdmin } =
     useContext(AuthContext);
   const navigate = useNavigate();
   const setErrorData = useAlertStore((state) => state.setErrorData);
@@ -38,7 +38,6 @@ export default function LoginPage(): JSX.Element {
     onLogin(user)
       .then((user) => {
         login(user.access_token, user.refresh_token);
-        getUser();
         navigate("/");
       })
       .catch((error) => {
@@ -49,22 +48,6 @@ export default function LoginPage(): JSX.Element {
       });
   }
 
-  function getUser() {
-    if (getAuthentication()) {
-      setTimeout(() => {
-        getLoggedUser()
-          .then((user) => {
-            const isSuperUser = user!.is_superuser;
-            setIsAdmin(isSuperUser);
-            setUserData(user);
-          })
-          .catch((error) => {
-            console.log("login page", error);
-          });
-      }, 500);
-    }
-  }
-
   return (
     <Form.Root
       onSubmit={(event) => {

src/frontend/src/types/contexts/auth.ts

@@ -10,7 +10,6 @@ export type AuthContextType = {
   logout: () => void;
   userData: Users | null;
   setUserData: (userData: Users | null) => void;
-  getAuthentication: () => boolean;
   authenticationErrorCount: number;
   autoLogin: boolean;
   setAutoLogin: (autoLogin: boolean) => void;