feat(auth):creating auth pages

Author: mariam123hagras

web/package-lock.json

@@ -11,10 +11,14 @@
   },
   "dependencies": {
     "@fontsource/sen": "^5.2.8",
+    "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^5.2.2",
     "firebase": "^12.9.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-router": "^7.13.1"
+    "react-router": "^7.13.1",
+    "react-router-dom": "^7.13.1",
+    "styled-components": "^6.3.11"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

web/package.json

@@ -1,10 +1,46 @@
-import { createBrowserRouter, RouterProvider } from "react-router";
+import React from 'react'
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { ThemeProvider } from 'styled-components'
+import { AuthProvider } from './context/AuthContext'
+import { ProtectedRoute, PublicRoute } from './guards/RouteGuards'
+import { AuthPage } from './pages/AuthPage'
+import { DashboardPage } from './pages/DashboardPage'
+import { GlobalStyles, theme } from './styles/theme'
 
-const router = createBrowserRouter([{path: "/", element: <div>Hello World</div>}]);
+const App: React.FC = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <BrowserRouter>
+        <AuthProvider>
+          <Routes>
+            {/* Public: redirect to dashboard if already logged in */}
+            <Route
+              path="/auth"
+              element={
+                <PublicRoute>
+                  <AuthPage />
+                </PublicRoute>
+              }
+            />
 
+            {/* Protected: redirect to /auth if not logged in */}
+            <Route
+              path="/dashboard"
+              element={
+                <ProtectedRoute>
+                  <DashboardPage />
+                </ProtectedRoute>
+              }
+            />
 
-export default function App() {
-	
+            {/* Default redirect */}
+            <Route path="*" element={<Navigate to="/auth" replace />} />
+          </Routes>
+        </AuthProvider>
+      </BrowserRouter>
+    </ThemeProvider>
+  )
+}
 
-	return <RouterProvider router={router}></RouterProvider>;
-}
+export default App