Private And Public Routes
<PrivateRoute />
and <PublicRoute />
allow you to define the
visibility of routes inside your application.
<PublicRoute />
As the name suggests, <PublicRoute />
elements are accessible by
non authenticated users and are open to the public.
Note: useAuth
will return undefined
while the SDK
is still trying to load a user and null
if there is no user.
<PrivateRoute />
<PrivateRoute />
's are only accessible to authenticated users.
Here is what happens when a user navigates to a <PrivateRoute />
without being authenticated:
- The user gets redirected to the auth routes, the default route is
/auth
. - The user can either create a new account or sign in to an existing account.
- After successful authentication, the user is then redirected to the initial route they where trying to access.
Internals
Both <PublicRoute />
and <PrivateRoute />
are small wrappers around the <Route />
1 element from react-router-dom2,
in fact, <PublicRoute />
and <PrivateRoute />
on it's own do
nothing, the <AuthShell />
is doing all the heavy lifting for us, managing the users auth state, redirects, access control etc.
- Source:
<PublicRoute />
and<PrivateRoute />
- Source:
<AuthShell />
Footnotes
1 https://reactrouter.com/docs/en/v6/components/route
2 https://reactrouter.com/docs/en/v6/getting-started/overview