feat: Add authentication store and create useLogoutHook (#2763)

* feat: add authentication store and create useLogoutHook

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Cristhian Zanforlin Lousa <72977554+Cristhianzl@users.noreply.github.com>

src/frontend/src/controllers/API/queries/auth/use-logout.ts

@@ -1,3 +1,4 @@
+import useAuthStore from "@/stores/authStore";
 import {
   changeUser,
   resetPasswordType,
@@ -8,19 +9,19 @@ import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-export const useLogout: useMutationFunctionType<undefined> = (options?) => {
+export const useLogout: useMutationFunctionType = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   async function logoutUser(): Promise<any> {
+    const autoLogin = useAuthStore.getState().autoLogin;
+    if (autoLogin) {
+      return {};
+    }
     const res = await api.patch(`${getURL("LOGOUT")}`);
     return res.data;
   }
 
-  const mutation: UseMutationResult<undefined, any, undefined> = mutate(
+  const mutation = mutate(["useLogout"], logoutUser, options);
-    ["useLogout"],
-    logoutUser,
-    options,
-  );
 
   return mutation;
 };

src/frontend/src/hooks/logout.tsx

@@ -0,0 +1,19 @@
+import { useLogout } from "@/controllers/API/queries/auth/use-logout";
+import useAuthStore from "@/stores/authStore";
+import { useNavigate } from "react-router-dom";
+
+export function useLogoutHook() {
+  const navigate = useNavigate();
+  const logout = useAuthStore((state) => state.logout);
+  const { mutate } = useLogout({
+    onSuccess: () => {
+      logout();
+      navigate("/login");
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  return { logout: () => mutate({}) };
+}

src/frontend/src/stores/authStore.ts

@@ -0,0 +1,85 @@
+// authStore.js
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import { AuthStoreType } from "@/types/zustand/auth";
+import { useNavigate } from "react-router-dom";
+import Cookies from "universal-cookie";
+import { create } from "zustand";
+import {
+  getGlobalVariables,
+  getLoggedUser,
+  requestLogout,
+} from "../controllers/API";
+import useAlertStore from "../stores/alertStore";
+import { useFolderStore } from "../stores/foldersStore";
+import { useGlobalVariablesStore } from "../stores/globalVariablesStore/globalVariables";
+import { useStoreStore } from "../stores/storeStore";
+import { Users } from "../types/api";
+
+const cookies = new Cookies();
+
+const useAuthStore = create<AuthStoreType>((set, get) => ({
+  isAdmin: false,
+  isAuthenticated: !!cookies.get("access_token_lf"),
+  accessToken: cookies.get("access_token_lf") ?? null,
+  userData: null,
+  autoLogin: false,
+  apiKey: cookies.get("apikey_tkn_lflw"),
+  authenticationErrorCount: 0,
+
+  setIsAdmin: (isAdmin) => set({ isAdmin }),
+  setIsAuthenticated: (isAuthenticated) => set({ isAuthenticated }),
+  setAccessToken: (accessToken) => set({ accessToken }),
+  setUserData: (userData) => set({ userData }),
+  setAutoLogin: (autoLogin) => set({ autoLogin }),
+  setApiKey: (apiKey) => set({ apiKey }),
+  setAuthenticationErrorCount: (authenticationErrorCount) =>
+    set({ authenticationErrorCount }),
+
+  logout: async () => {
+    const setAllFlows = useFlowsManagerStore.getState().setAllFlows;
+    const setSelectedFolder = useFolderStore.getState().setSelectedFolder;
+    cookies.remove("apikey_tkn_lflw", { path: "/" });
+    set({
+      isAdmin: false,
+      userData: null,
+      accessToken: null,
+      isAuthenticated: false,
+      autoLogin: false,
+      apiKey: null,
+    });
+    setAllFlows([]);
+    setSelectedFolder(null);
+  },
+  //   getUser: () => {
+  //     const setLoading = useAlertStore.getState().setLoading;
+  //     const getFoldersApi = useFolderStore.getState().getFoldersApi;
+  //     const setGlobalVariables = useGlobalVariablesStore.getState().setGlobalVariables;
+  //     const checkHasStore = useStoreStore.getState().checkHasStore;
+  //     const fetchApiData = useStoreStore.getState().fetchApiData;
+
+  //     getLoggedUser()
+  //       .then(async (user) => {
+  //         set({ userData: user, isAdmin: user.is_superuser });
+  //         getFoldersApi(true, true);
+  //         const res = await getGlobalVariables();
+  //         setGlobalVariables(res);
+  //         checkHasStore();
+  //         fetchApiData();
+  //       })
+  //       .catch((error) => {
+  //         setLoading(false);
+  //       });
+  //   },
+
+  //   login: (newAccessToken) => {
+  //     set({ accessToken: newAccessToken, isAuthenticated: true });
+  //     get().getUser();
+  //   },
+
+  //   storeApiKey: (apikey) => {
+  //     cookies.set('apikey_tkn_lflw', apikey, { path: '/' });
+  //     set({ apiKey: apikey });
+  //   },
+}));
+
+export default useAuthStore;

src/frontend/src/types/zustand/auth/index.ts

@@ -0,0 +1,28 @@
+import { Users } from "@/types/api";
+
+export interface AuthStoreType {
+  isAdmin: boolean;
+  isAuthenticated: boolean;
+  accessToken: string | null;
+  userData: Users | null;
+  autoLogin: boolean;
+  apiKey: string | null;
+  authenticationErrorCount: number;
+
+  setIsAdmin: (isAdmin: boolean) => void;
+  setIsAuthenticated: (isAuthenticated: boolean) => void;
+  setAccessToken: (accessToken: string | null) => void;
+  setUserData: (userData: Users | null) => void;
+  setAutoLogin: (autoLogin: boolean) => void;
+  setApiKey: (apiKey: string | null) => void;
+  setAuthenticationErrorCount: (authenticationErrorCount: number) => void;
+  logout: () => Promise<void>;
+  // setUserData: (userData: Users | null) => void;
+  // setAutoLogin: (autoLogin: boolean) => void;
+  // setIsAdmin: (isAdmin: boolean) => void;
+  // setApiKey: (apiKey: string | null) => void;
+
+  // getUser: () => void;
+  // login: (newAccessToken: string) => void;
+  // storeApiKey: (apikey: string) => void;
+}