feat: upgrade authentication to JWT with refresh tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/Frontend-Hotel/src/context/AuthContext.jsx

@@ -1,85 +1,54 @@
-// context/AuthContext.jsx
 import { createContext, useState, useEffect } from "react";
+import api from "../services/api";
 
 export const AuthContext = createContext();
 
 function AuthProvider({ children }) {
-  const [user, setUser] = useState(null); // { id, name, role }
+  const [user, setUser] = useState(null);
   const [userData, setUserData] = useState(null);
- 
-  // Recuperar user de localStorage al iniciar
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
-    const savedUser = localStorage.getItem("rol");
-    if (savedUser) {
+    const token = sessionStorage.getItem("accessToken");
+    const savedUser = sessionStorage.getItem("userRole");
+    const savedUserData = sessionStorage.getItem("userData");
+    if (token && savedUser) {
       try {
         setUser(JSON.parse(savedUser));
-      } catch (error) {
-        console.error("Error parsing user data:", error);
-        localStorage.removeItem("rol");
+        if (savedUserData) setUserData(JSON.parse(savedUserData));
+      } catch (e) {
+        console.error("Error restoring session:", e);
       }
     }
+    setLoading(false);
   }, []);
 
-  const login = (userData, data) => {
+  const login = (role, data, accessToken) => {
+    setUser(role);
     setUserData(data);
-    setUser(userData);
-    localStorage.setItem("rol", JSON.stringify(userData));
+    sessionStorage.setItem("accessToken", accessToken);
+    sessionStorage.setItem("userRole", JSON.stringify(role));
+    sessionStorage.setItem("userData", JSON.stringify(data));
   };
 
-  const logout = () => {
+  const logout = async () => {
+    try {
+      await api.post("/auth/logout");
+    } catch (e) {
+      // ignore logout errors
+    }
     setUser(null);
-    localStorage.removeItem("rol");
+    setUserData(null);
+    sessionStorage.removeItem("accessToken");
+    sessionStorage.removeItem("userRole");
+    sessionStorage.removeItem("userData");
   };
 
   return (
-    <AuthContext.Provider value={{ user, login, logout, userData }}>
+    <AuthContext.Provider value={{ user, login, logout, userData, loading }}>
       {children}
     </AuthContext.Provider>
   );
 }
 
 export { AuthProvider };
-
-// // context/AuthContext.jsx
-// import { createContext, useState, useEffect } from "react";
-
-// export const AuthContext = createContext();
-
-// export const AuthProvider = ({ children }) => {
-//   const [user, setUser] = useState(null); // { id, name, role }
-//   const [lang, setLang] = useState("es");//true = español
-
-// //   useEffect(() => {
-// //   const savedUser = localStorage.getItem("rol");
-// //   if (savedUser && savedUser !== "undefined") {
-// //     try {
-// //       setUser(JSON.parse(savedUser));
-// //     } catch (error) {
-// //       console.error("Error al parsear el usuario:", error);
-// //       localStorage.removeItem("rol"); // limpia el valor corrupto
-// //     }
-// //   }
-// // }, []);
-
-//   // Recuperar user de localStorage al iniciar
-//   useEffect(() => {
-//     const savedUser = localStorage.getItem("rol");
-//     if (savedUser) setUser(JSON.parse(savedUser));
-//   }, []);
- 
-//   const login = (userData) => {
-//     setUser(userData);
-//     localStorage.setItem("rol", JSON.stringify(userData));
-//   };
-
-//   const logout = () => {
-//     setUser(null);
-//     localStorage.removeItem("rol");
-//   };
-
-//   return (
-//     <AuthContext.Provider value={{ user, login, logout,lang ,setLang}}>
-//       {children}
-//     </AuthContext.Provider>
-//   );
-// };

frontend/Frontend-Hotel/src/pages/Login.jsx

@@ -20,7 +20,7 @@ export default function Login() {
         user_pass: form.password,
       });
       if (response.data.rol != 0) {
-        login(response.data.rol, response.data);
+        login(response.data.rol, { user_id: response.data.user_id, user_name: response.data.user_name }, response.data.accessToken);
         navigate("/app");
       } else {
         throw new Error(response.data.message || "Error al iniciar sesión");

frontend/Frontend-Hotel/src/services/api.js

@@ -3,55 +3,42 @@ import axios from "axios";
 const api = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
   timeout: 15000,
+  withCredentials: true,
 });
 
-export default api;
-
-
-//Ejemplo con fetch
-const API_BASE_URL = 'http://localhost:4000/api';
-
-export async function createProduct(data) {
-  try {
-    const response = await fetch(`${API_BASE_URL}/products`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
-    });
-
-    if (!response.ok) {
-      throw new Error('Failed to save product');
-    }
-
-    return await response.json();
-  } catch (error) {
-    console.error('API error:', error);
-    throw error;
+// Request interceptor: attach access token
+api.interceptors.request.use((config) => {
+  const token = sessionStorage.getItem('accessToken');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
   }
-}
+  return config;
+});
 
-export async function fetchProducts() {
-  const res = await fetch(`${API_BASE_URL}/products`);
-  if (!res.ok) throw new Error('Error fetching products');
-  return await res.json();
-}
-
-export async function fetchInventoryProducts() {
-  const res = await fetch(`${API_BASE_URL}/inventory-products`);
-  if (!res.ok) throw new Error('Error fetching inventory products');
-  // forma esperada: objeto, ej: { "PILLOWS": { unitCost: 300, tax: "IVA 16%" }, ... }
-  return await res.json();
-}
-
-export async function createExpense(payload) {
-  const res = await fetch(`${API_BASE_URL}/expenses`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(payload),
-  });
-  if (!res.ok) throw new Error('Error creating expense');
-  return await res.json();
-}
+// Response interceptor: handle 401 and auto-refresh
+api.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+    if (error.response?.status === 401 && error.response?.data?.code === 'TOKEN_EXPIRED' && !originalRequest._retry) {
+      originalRequest._retry = true;
+      try {
+        const { data } = await axios.post(
+          `${import.meta.env.VITE_API_BASE_URL}/auth/refresh`,
+          {},
+          { withCredentials: true }
+        );
+        sessionStorage.setItem('accessToken', data.accessToken);
+        originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
+        return api(originalRequest);
+      } catch (refreshError) {
+        sessionStorage.removeItem('accessToken');
+        window.location.href = '/';
+        return Promise.reject(refreshError);
+      }
+    }
+    return Promise.reject(error);
+  }
+);
 
+export default api;