feat: Google authorization implementation

src/App.jsx

@@ -10,8 +10,17 @@ import Providers from './private/providers/Providers';
 import Categories from './private/categories/Categories';
 import Admin from './private/mongo/Admin';
 
+import LoginPage from './private/LoginPage';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { useAuth } from './context/AuthContext';
+
+function PrivateRoute({ children }) {
+  const { user } = useAuth();
+  return user ? children : <Navigate to="/login" replace />;
+}
+
 function App() {
-  const [zone, setZone] = useState('public'); // Could be 'public' | 'restricted' | 'private'
+  const [zone, setZone] = useState('public'); // public | restricted | private
   const [currentView, setCurrentView] = useState('Products');
 
   return (
@@ -27,7 +36,7 @@ function App() {
         <AppHeader zone={zone} onSelectMenuItem={(view) => setCurrentView(view)} />
 
         {/* Main content area */}
-        <Box component="main" sx={{ flex: 1, p: 2 }}>
+        {/* <Box component="main" sx={{ flex: 1, p: 2 }}>
           {zone === 'private' && <Clients />}
           {zone === 'restricted' && <Clients />}
 
@@ -36,7 +45,31 @@ function App() {
           {zone === 'public' && currentView === 'Providers' && <Providers />}
           {zone === 'public' && currentView === 'Categories' && <Categories />}
           {zone === 'public' && currentView === 'Admin' && <Admin />}
-        </Box>
+        </Box> */}
+
+        <Box component="main" sx={{ flex: 1, p: 2 }}>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+
+          <Route
+            path="/"
+            element={
+              <PrivateRoute>
+                {zone === 'private' && <Clients />}
+                {zone === 'restricted' && <Clients />}
+
+                {zone === 'public' && currentView === 'Products' && <Products />}
+                {zone === 'public' && currentView === 'Clients' && <Clients />}
+                {zone === 'public' && currentView === 'Providers' && <Providers />}
+                {zone === 'public' && currentView === 'Categories' && <Categories />}
+                {zone === 'public' && currentView === 'Admin' && <Admin />}
+              </PrivateRoute>
+            }
+          />
+        </Routes>
+      </Box>
+
+
         <Footer zone={zone} />
       </Box>
 

src/main.jsx

@@ -5,12 +5,21 @@ import { ThemeProvider } from '@mui/material/styles';
 import theme from './theme';
 import './index.css'
 import App from './App.jsx'
+import { GoogleOAuthProvider } from '@react-oauth/google';
+import { AuthProvider } from './context/AuthContext';
+import { BrowserRouter } from 'react-router-dom';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <ThemeProvider theme={theme}>
       <SnackbarProvider maxSnack={3} autoHideDuration={3000}>
-        <App />
+        <GoogleOAuthProvider clientId="128345072002-mtfdgpcur44o9tbd7q6e0bb9qnp2crfp.apps.googleusercontent.com">
+          <AuthProvider>
+             <BrowserRouter>
+               <App />
+             </BrowserRouter>
+          </AuthProvider>
+        </GoogleOAuthProvider>
       </SnackbarProvider>
     </ThemeProvider>
   </StrictMode>,

src/private/LoginPage.jsx

@@ -0,0 +1,29 @@
+import { GoogleLogin } from '@react-oauth/google';
+import { jwtDecode } from 'jwt-decode';
+import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import { Box, Typography } from '@mui/material';
+
+export default function LoginPage() {
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  return (
+    <Box display="flex" flexDirection="column" alignItems="center" mt={10}>
+      <Typography variant="h4" gutterBottom>
+        Iniciar sesión
+      </Typography>
+
+      <GoogleLogin
+        onSuccess={(credentialResponse) => {
+          const user = jwt_decode(credentialResponse.credential);
+          login(user);
+          navigate('/');
+        }}
+        onError={() => {
+          console.log('Error al iniciar sesión');
+        }}
+      />
+    </Box>
+  );
+}