using zustand for localStorage data, fixed socketio on login

frontend/src/App.tsx

@@ -13,6 +13,7 @@ import { Firewall } from './pages/Firewall';
 import { useQueryClient } from '@tanstack/react-query';
 import NFProxy from './pages/NFProxy';
 import ServiceDetailsNFProxy from './pages/NFProxy/ServiceDetails';
+import { useAuth } from './js/store';
 
 function App() {
 
@@ -22,16 +23,19 @@ function App() {
   const [error, setError] = useState<string|null>()
   const [loadinBtn, setLoadingBtn] = useState(false);
   const queryClient = useQueryClient()
+  const { isAuthenticated, access_token } = useAuth()
 
   useEffect(()=>{
-    socketio.auth = { token: localStorage.getItem("access_token") }
+    socketio.auth = { token: access_token || "" }
     socketio.connect()
     getStatus()
     socketio.on("update", (data) => {
       queryClient.invalidateQueries({ queryKey: data  })
     })
     socketio.on("connect_error", (err) => {
-      errorNotify("Socket.Io connection failed! ",`Error message: [${err.message}]`)
+      if (access_token){
+        errorNotify("Socket.Io connection failed! ",`Error message: [${err.message}]`)
+      }
       getStatus()
     });
   return () => {
@@ -39,7 +43,7 @@ function App() {
     socketio.off("connect_error")
     socketio.disconnect()
   }
-},[])
+},[isAuthenticated])
 
   const getStatus = () =>{
     getstatus().then( res =>{

frontend/src/js/store.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware';
 
 type NavbarStore = {
   navOpened: boolean,
@@ -15,3 +16,75 @@ export const useNavbarStore = create<NavbarStore>()((set) => ({
     openNav: () => set({ navOpened: true }),
     toggleNav: () => set((state) => ({ navOpened: !state.navOpened })),
 }))
+
+
+
+interface AuthState {
+  access_token: string | null;
+  setAccessToken: (token: string | null) => void;
+  clearAccessToken: () => void;
+  getAccessToken: () => string | null;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set, get) => ({
+      access_token: null,
+      setAccessToken: (token) => set({ access_token: token }),
+      clearAccessToken: () => set({ access_token: null }),
+      getAccessToken: () => get().access_token,
+    }),
+    {
+      name: 'auth-storage',
+      storage: createJSONStorage(() => localStorage),
+      partialize: (state) => ({ access_token: state.access_token }),
+    }
+  )
+);
+
+// Hook personalizzati per un uso più facile nei componenti
+export const useAuth = () => {
+  const { access_token, setAccessToken, clearAccessToken, getAccessToken } = useAuthStore();
+  
+  const isAuthenticated = !!access_token;
+  
+  return {
+    access_token,
+    isAuthenticated,
+    setAccessToken,
+    clearAccessToken,
+    getAccessToken,
+  };
+};
+
+interface SessionState {
+  home_section: string | null;
+  setHomeSection: (section: string | null) => void;
+  getHomeSection: () => string | null;
+}
+
+export const useSessionStore = create<SessionState>()(
+  persist(
+    (set, get) => ({
+      home_section: null,
+      setHomeSection: (section) => set({ home_section: section }),
+      getHomeSection: () => get().home_section,
+    }),
+    {
+      name: 'session-storage',
+      storage: createJSONStorage(() => sessionStorage),
+      partialize: (state) => ({ home_section: state.home_section }),
+    }
+  )
+);
+
+
+export const useSession = () => {
+  const { home_section, setHomeSection, getHomeSection } = useSessionStore();
+  
+  return {
+    home_section,
+    setHomeSection,
+    getHomeSection,
+  };
+};

frontend/src/js/utils.tsx

@@ -7,6 +7,7 @@ import { Buffer } from "buffer"
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { useMediaQuery } from "@mantine/hooks";
 import { io } from "socket.io-client";
+import { useAuthStore, useSessionStore } from "./store";
 
 export const IS_DEV = import.meta.env.DEV
 
@@ -32,14 +33,14 @@ export const socketio = import.meta.env.DEV?
         path:"/sock/socket.io",
         transports: ['websocket'],
         auth: {
-            token: localStorage.getItem("access_token")
+            token: useAuthStore.getState().getAccessToken()
         }
     }):
     io({
         path:"/sock/socket.io",
         transports: ['websocket'],
         auth: {
-            token: localStorage.getItem("access_token")
+            token: useAuthStore.getState().getAccessToken()
         }
     })
 
@@ -86,7 +87,7 @@ export async function genericapi(method:string,path:string,data:any = undefined,
             cache: 'no-cache',
             headers: {
               ...(data?{'Content-Type': is_form ? 'application/x-www-form-urlencoded' : 'application/json'}:{}),
-              "Authorization" : "Bearer " + window.localStorage.getItem("access_token")
+              "Authorization" : "Bearer " + useAuthStore.getState().getAccessToken()
             },
             body: data? (is_form ? (new URLSearchParams(data)).toString() : JSON.stringify(data)) : undefined
         }).then(res => {
@@ -132,7 +133,7 @@ export function getMainPath(){
 }
 
 export function HomeRedirector(){
-    const section = sessionStorage.getItem("home_section")
+    const section = useSessionStore.getState().getHomeSection();
     const path = section?`/${section}`:`/nfregex`
     return <Navigate to={path} replace/>
 }
@@ -153,27 +154,27 @@ export async function getstatus(){
 }
 
 export async function logout(){
-    window.localStorage.removeItem("access_token")
+    useAuthStore.getState().clearAccessToken();
 }
 
 export async function setpassword(data:PasswordSend) {
     const { status, access_token } = await postapi("set-password",data) as ServerResponseToken;
     if (access_token)
-        window.localStorage.setItem("access_token", access_token);
+        useAuthStore.getState().setAccessToken(access_token);
     return status === "ok"?undefined:status
 }
 
 export async function changepassword(data:ChangePassword) {
     const { status, access_token } = await postapi("change-password",data) as ServerResponseToken;
     if (access_token)
-        window.localStorage.setItem("access_token", access_token);
+        useAuthStore.getState().setAccessToken(access_token);
         return status === "ok"?undefined:status
 }
 
 export async function login(data:PasswordSend) {
     const from = {username: "login", password: data.password};
     const { status, access_token } = await postapi("login",from,true) as LoginResponse;
-    window.localStorage.setItem("access_token", access_token);
+    useAuthStore.getState().setAccessToken(access_token);
     return status;
 }