Skip to content

FRONTEND: Implement Middleware for Route Protection in Next.js #313

@yusuftomilola

Description

@yusuftomilola

Description:
We need to add a middleware to protect authenticated routes in the AssetsUp frontend. The middleware should check if a user is authenticated before granting access to restricted routes (e.g., /dashboard, /assets, /departments). If the user is not authenticated, they should be redirected to the /login page.

This will ensure that unauthorized users cannot directly access protected pages via URL.


Tasks:

  • Create a middleware.ts file in the project root.
  • Configure the middleware to run only on specific protected routes (/dashboard, /assets, /departments, etc.).
  • Implement logic to check authentication tokens (from cookies, headers, or local storage).
  • Redirect unauthenticated users to /login.
  • Allow public routes (e.g., /, /login, /register) to bypass the middleware.
  • Add TypeScript typings for request/response handling.
  • Write documentation (docs/auth-middleware.md) explaining how the middleware works and how to extend it for new protected routes.

Acceptance Criteria:

  • Visiting /dashboard while not logged in redirects to /login.
  • Visiting /assets while authenticated loads successfully.
  • Public routes (/, /login, /register) remain accessible to everyone.
  • Middleware logic is reusable and easy to extend for future routes.

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions