Route guards

Route guards live in src/utils/route-guard/. They redirect based on useAuth().isLoggedIn.

AuthGuard — `AuthGuard.tsx`

Protects routes that require authentication.

useEffect(() => {
  if (!isLoggedIn) {
    navigate('login', {
      state: { from: location.pathname },
      replace: true
    });
  }
}, [isLoggedIn, navigate, location]);

Redirects unauthenticated users to /login
Preserves intended path in location.state.from for post-login return

Always renders children (redirect is async via effect).

GuestGuard — `GuestGuard.tsx`

Protects login/register pages from authenticated users.

useEffect(() => {
  if (isLoggedIn) {
    navigate(location?.state?.from || APP_DEFAULT_PATH, {
      state: { from: '' },
      replace: true
    });
  }
}, [isLoggedIn, navigate, location]);

APP_DEFAULT_PATH = /dashboard from config.ts
If user was redirected from a protected page, returns them there after login

Current usage in this project

MainRoutes.tsx uses inline role checks (DashboardRoute, UserIndexElement) rather than wrapping all routes with AuthGuard. Additional protection layers:

Layer	Behavior
Axios 401 interceptor	Hard redirect to `/login`
`JWTProvider` boot	No routes until token verified or cleared
Role wrappers	Admin-only pages return 404 for non-admins

Integrating guards

To wrap a layout with AuthGuard:

{
  path: '/',
  element: (
    <AuthGuard>
      <SimpleLayout layout={SimpleLayoutType.SIMPLE} />
    </AuthGuard>
  ),
  children: [/* ... */]
}

Architecture

Authentication

Services

Pages

Components

Hooks and Utils

Real-time

Store

AuthGuard — `AuthGuard.tsx`

GuestGuard — `GuestGuard.tsx`

Current usage in this project

Integrating guards

​AuthGuard — AuthGuard.tsx

​GuestGuard — GuestGuard.tsx

​Current usage in this project

​Integrating guards

​Related docs

AuthGuard — `AuthGuard.tsx`

GuestGuard — `GuestGuard.tsx`

Current usage in this project

Integrating guards

Related docs