auth provider + private route

src/router/MainRouter.tsx

@@ -2,6 +2,7 @@ import SideBar from '@/shared/SideBar'
 import Header from '@/shared/Header'
 import { Route, Routes, useLocation } from 'react-router-dom'
 import { Paths } from '@/config/Paths'
+import PrivateRoute from '@/router/PrivateRoute'
 import { clx } from '@/helpers/utils'
 import { useSharedStore } from '@/shared/store/sharedStore'
 import Home from '@/pages/home/Home'
@@ -46,11 +47,46 @@ const MainRouter = () => {
                 )}>
                     <div className='flex-1 h-full flex min-h-0'>
                         <Routes>
-                            <Route path={Paths.home} element={<Home />} />
-                            <Route path={Paths.editor + '/:id'} element={<Editor />} />
-                            <Route path={Paths.viewer + '/:id'} element={<Viewer />} />
-                            <Route path={Paths.catalog.list} element={<CatalogueList />} />
-                            <Route path={Paths.designer.request} element={<DesignerRequest />} />
+                            <Route
+                                path={Paths.home}
+                                element={
+                                    <PrivateRoute requireAuth={false}>
+                                        <Home />
+                                    </PrivateRoute>
+                                }
+                            />
+                            <Route
+                                path={Paths.editor + '/:id'}
+                                element={
+                                    <PrivateRoute>
+                                        <Editor />
+                                    </PrivateRoute>
+                                }
+                            />
+                            <Route
+                                path={Paths.viewer + '/:id'}
+                                element={
+                                    <PrivateRoute requireAuth={false}>
+                                        <Viewer />
+                                    </PrivateRoute>
+                                }
+                            />
+                            <Route
+                                path={Paths.catalog.list}
+                                element={
+                                    <PrivateRoute>
+                                        <CatalogueList />
+                                    </PrivateRoute>
+                                }
+                            />
+                            <Route
+                                path={Paths.designer.request}
+                                element={
+                                    <PrivateRoute>
+                                        <DesignerRequest />
+                                    </PrivateRoute>
+                                }
+                            />
                         </Routes>
                     </div>
                 </div>

src/router/PrivateRoute.tsx

@@ -0,0 +1,41 @@
+import { useAuth } from '@/context/AuthContext'
+import { Paths } from '@/config/Paths'
+import { type FC, type ReactNode } from 'react'
+import { Navigate, useLocation } from 'react-router-dom'
+
+type PrivateRouteProps = {
+    children: ReactNode
+    /** When true (default), user must be logged in to access the route */
+    requireAuth?: boolean
+    /** Redirect target when auth is required but user is not logged in */
+    redirectTo?: string
+}
+
+const PrivateRoute: FC<PrivateRouteProps> = ({
+    children,
+    requireAuth = true,
+    redirectTo = Paths.home,
+}) => {
+    const { isAuthenticated, isChecking } = useAuth()
+    const location = useLocation()
+
+    if (!requireAuth) {
+        return children
+    }
+
+    if (isChecking) {
+        return (
+            <div className="flex flex-1 items-center justify-center">
+                <div className="text-gray-600">در حال بارگذاری...</div>
+            </div>
+        )
+    }
+
+    if (!isAuthenticated) {
+        return <Navigate to={redirectTo} replace state={{ from: location }} />
+    }
+
+    return children
+}
+
+export default PrivateRoute