Route Protection
Complete guide to protecting routes, pages, and API endpoints with AuthCore's middleware and hooks.
🎣 Client-Side
Use hooks and HOCs for protecting React components and pages
🛡️ Server-Side
Use middleware for protecting API routes and server components
Client-Side Protection
1. useAuth Hook
The primary hook for authentication state and operations. Use this for conditional rendering and checking user permissions.
Available Properties:
user- Current user object or nullisAuthenticated- Boolean authentication statusisLoading- Loading state during auth operationslogin()- Login functionlogout()- Logout functionregister()- Registration function
2. withAuth HOC (Higher-Order Component)
Wrap entire pages with authentication protection. Automatically redirects unauthenticated users.
Role-Based Protection
Convenience Exports
Pre-configured HOCs for common use cases:
💡 withAuth Options
requiredRole- Required role ('USER' | 'TENANT_ADMIN' | 'SUPER_ADMIN')redirectTo- Custom redirect path (default: '/demo/login')requireVerifiedEmail- Require email verificationallowUnverified- Allow access even if email not verified
Server-Side Protection
3. API Routes Middleware
Protect Next.js API routes with server-side middleware functions.
Available Middleware Functions
Middleware Composition:
protectedRoute= authenticate + requireUser + requireTenantadminRoute= authenticate + requireTenantAdmin + requireTenantsuperAdminRoute= authenticate + requireSuperAdminauthRoute= resolveTenant + rateLimit + auditLog
4. Next.js Middleware (Edge)
Protect multiple routes at once with Next.js middleware. Runs at the edge before requests reach your pages.
Important
Don't protect your login page with middleware! Use the matcher pattern to exclude auth pages.
5. Server Components (App Router)
Protect App Router pages with server-side session checks.
6. Server Actions
Protect server actions with session checks.
Real-World Examples
Dashboard with Role Checks
API Route with Conditional Logic
Best Practices
✓ Use Server-Side Protection for Sensitive Data
Always validate permissions on the server (API routes, server components). Client-side checks are for UX only.
✓ Combine Client and Server Protection
Use withAuth for pages + middleware for API routes for defense in depth.
✓ Use Role-Based Access Control (RBAC)
Leverage the built-in role system (USER, TENANT_ADMIN, SUPER_ADMIN) instead of custom permission flags.
✗ Don't Rely Only on Client-Side Protection
Client-side checks can be bypassed. Always validate on the server for security-critical operations.
✗ Don't Protect Login/Register Pages
Exclude authentication pages from middleware protection to avoid redirect loops.
Quick Reference
| Method | Type | Use Case |
|---|---|---|
useAuth | Hook | Conditional rendering in components |
withAuth | HOC | Protect entire pages (client-side) |
protectedRoute | Middleware | Protect API routes |
adminRoute | Middleware | Admin-only API routes |
withAuth (middleware) | Edge Middleware | Protect multiple routes at once |
getServerSession | Server | Server components / Server actions |