Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the authentication routing structure in a React application using TanStack Router. The main purpose is to reorganize authenticated routes from using path-based grouping (auth) to layout-based grouping, centralizing auth logic and improving route organization.
Key changes:
- Replaces the old
(auth)route structure with a newguardRoutefunction for authentication - Moves authenticated routes from
routes/(auth)/toroutes/gatherings/(auth)androutes/bookings/(auth)/ - Creates new auth layout components that use the centralized
guardRoutefunction
Reviewed Changes
Copilot reviewed 12 out of 22 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/evently.client/src/routes/gatherings/(auth).route.tsx |
New auth layout component for gatherings with route guard |
src/evently.client/src/routes/gatherings/(auth).create.tsx |
Updated route path and import references |
src/evently.client/src/routes/gatherings/$gatheringId/(auth).update.tsx |
Updated route path and import references |
src/evently.client/src/routes/bookings/(auth)/route.tsx |
New auth layout component for bookings with route guard |
src/evently.client/src/routes/bookings/(auth)/hosting/index.tsx |
Updated route path |
src/evently.client/src/routes/bookings/(auth)/hosting/$gatheringId/dashboard.scan.tsx |
Updated route path |
src/evently.client/src/routes/bookings/(auth)/hosting/$gatheringId/dashboard.index.tsx |
Updated route path |
src/evently.client/src/routes/bookings/(auth)/attending/index.tsx |
Updated route path |
src/evently.client/src/routes/_auth.tsx |
Updated route configuration |
src/evently.client/src/routes/(auth)/gatherings/route.tsx |
Removed old auth route file |
src/evently.client/src/routeTree.gen.ts |
Auto-generated route tree updates |
src/evently.client/src/lib/services/auth-service.ts |
Added new guardRoute function |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| export async function guardRoute(account: Account | null): Promise<void> { | ||
| if (account == null) { | ||
| throw redirect({ | ||
| to: "/login", | ||
| replace: true, | ||
| search: { | ||
| redirect: location.href | ||
| } | ||
| }); | ||
| } | ||
| } |
There was a problem hiding this comment.
The location.href usage will fail in server-side rendering contexts. Consider using the route context or a safer alternative to get the current URL.
| return ( | ||
| <> | ||
| <Outlet /> | ||
| </> | ||
| ); |
There was a problem hiding this comment.
The React Fragment wrapper is unnecessary here. You can return <Outlet /> directly.
| return ( | |
| <> | |
| <Outlet /> | |
| </> | |
| ); | |
| return <Outlet />; |
| return ( | ||
| <> | ||
| <Outlet /> | ||
| </> | ||
| ); |
There was a problem hiding this comment.
The React Fragment wrapper is unnecessary here. You can return <Outlet /> directly.
| return ( | |
| <> | |
| <Outlet /> | |
| </> | |
| ); | |
| return <Outlet />; |
No description provided.