Files
nuzlocke-tracker/.beans/nuzlocke-tracker-2zwg--protect-frontend-routes-with-protectedroute-and-ad.md
Julian Tabel 7ff271efba chore(auth-aware-ui-and-role-based-access-control): Expose admin status to frontend via user API
The frontend needs to know if the current user is an admin so it can show/hide the Admin nav link and protect admin routes client-side.

Bean: nuzlocke-tracker-5svj

chore: Update beans
2026-03-21 11:23:54 +01:00

39 lines
1.7 KiB
Markdown

---
# nuzlocke-tracker-2zwg
title: Protect frontend routes with ProtectedRoute and AdminRoute
status: completed
type: task
priority: normal
created_at: 2026-03-21T10:06:20Z
updated_at: 2026-03-21T10:19:41Z
parent: nuzlocke-tracker-ce4o
blocked_by:
- nuzlocke-tracker-5svj
---
Use the existing \`ProtectedRoute\` component (currently unused) and create an \`AdminRoute\` component to guard routes in \`App.tsx\`.
## Checklist
- [x] Wrap \`/runs/new\` and \`/genlockes/new\` with \`ProtectedRoute\` (requires login)
- [x] Create \`AdminRoute\` component that checks \`isAdmin\` from \`useAuth()\`, redirects to \`/\` with a toast/message if not admin
- [x] Wrap all \`/admin/*\` routes with \`AdminRoute\`
- [x] Ensure \`/runs\` and \`/runs/:runId\` remain accessible to everyone (public run viewing)
- [x] Verify deep-linking works (e.g., visiting \`/admin/games\` while logged out redirects to login, then back to \`/admin/games\` after auth)
## Files to change
- \`frontend/src/App.tsx\` — wrap routes
- \`frontend/src/components/ProtectedRoute.tsx\` — already exists, verify it works
- \`frontend/src/components/AdminRoute.tsx\` — new file
## Summary of Changes
Implemented frontend route protection:
- **ProtectedRoute**: Wraps `/runs/new` and `/genlockes/new` - redirects unauthenticated users to `/login` with return location preserved
- **AdminRoute**: New component that checks `isAdmin` from `useAuth()`, redirects non-admins to `/` with a toast notification
- **Admin routes**: Wrapped `AdminLayout` with `AdminRoute` to protect all `/admin/*` routes
- **Public routes**: `/runs` and `/runs/:runId` remain accessible to everyone
- **Deep-linking**: Location state preserved so users return to original route after login