Skip to main content

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:

  1. The user gets redirected to the auth routes, the default route is /auth.
  2. The user can either create a new account or sign in to an existing account.
  3. 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.

Footnotes​

1 https://reactrouter.com/docs/en/v6/components/route
2 https://reactrouter.com/docs/en/v6/getting-started/overview