From 6e75a059785ecb7f6fa2cb2412852013c8b78efb Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 17 Jul 2024 16:02:19 -0300 Subject: [PATCH] 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> --- .../API/queries/auth/use-logout.ts | 13 +-- src/frontend/src/hooks/logout.tsx | 19 +++++ src/frontend/src/stores/authStore.ts | 85 +++++++++++++++++++ src/frontend/src/types/zustand/auth/index.ts | 28 ++++++ 4 files changed, 139 insertions(+), 6 deletions(-) create mode 100644 src/frontend/src/hooks/logout.tsx create mode 100644 src/frontend/src/stores/authStore.ts create mode 100644 src/frontend/src/types/zustand/auth/index.ts diff --git a/src/frontend/src/controllers/API/queries/auth/use-logout.ts b/src/frontend/src/controllers/API/queries/auth/use-logout.ts index 7119ae88f..30db3c32f 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-logout.ts +++ b/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 = (options?) => { +export const useLogout: useMutationFunctionType = (options?) => { const { mutate } = UseRequestProcessor(); async function logoutUser(): Promise { + const autoLogin = useAuthStore.getState().autoLogin; + if (autoLogin) { + return {}; + } const res = await api.patch(`${getURL("LOGOUT")}`); return res.data; } - const mutation: UseMutationResult = mutate( - ["useLogout"], - logoutUser, - options, - ); + const mutation = mutate(["useLogout"], logoutUser, options); return mutation; }; diff --git a/src/frontend/src/hooks/logout.tsx b/src/frontend/src/hooks/logout.tsx new file mode 100644 index 000000000..688b521ee --- /dev/null +++ b/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({}) }; +} diff --git a/src/frontend/src/stores/authStore.ts b/src/frontend/src/stores/authStore.ts new file mode 100644 index 000000000..4c049baa8 --- /dev/null +++ b/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((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; diff --git a/src/frontend/src/types/zustand/auth/index.ts b/src/frontend/src/types/zustand/auth/index.ts new file mode 100644 index 000000000..942155c2e --- /dev/null +++ b/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; + // 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; +}