Render null within PrivateRouteBase. Closes #12 #13
Conversation
| @@ -5,7 +5,8 @@ import { PrivateRouteBase } from "./PrivateRouteBase"; | |||
| export const PrivateRoute = async ({ children }: PropsWithChildren) => { | |||
| const user = await getServerUser(); | |||
|
|
|||
| if (!user) return null; // Prevent server side render of authorized page | |||
| // prevent server side render of authorized page | |||
| const view = !user ? null : children; | |||
There was a problem hiding this comment.
| const view = !user ? null : children; | |
| if(!user) redirect ('/login') |
Wdyt? @josephdburdick @jakubczarnowski
There was a problem hiding this comment.
This looks fine to me but if we went in this direction what purpose would withPrivateRoute serve?
There was a problem hiding this comment.
In some scenarios withPrivateRoute can be faster than PrivateRoute because it's a client component (The useQuery can be reloaded before this server component is recalculated)
There was a problem hiding this comment.
I understand the client could be faster but your proposal would short-circuit at the server level before the client side ever had a chance to run.
Or am I missing something? Perhaps it only short-circuits with a redirect upon navigating but if a user's authentication expires the client side withPrivateRoute would redirect from there?
|
Closing this PR in favor for #14 with suggested fix and appropriate branch name. |
Motivation and context
This fixes the issue described in issue #12.
Description
With this change the server renders nothing for unauthenticated users on private routes but the client will also be able to act on this scenario, redirecting them as expected.
Steps to reproduce the behavior
Before:
Navigate to a private route without being authenticated and you will view a blank page.
After:
Navigate to a private route without being authenticated and you will view a blank page before being redirected by the useEffect hook within
withPrivateRoute.