title | toc |
---|---|
Authentication (using RouterProvider) |
false |
This example demonstrates how to restrict access to routes to authenticated users when using <RouterProvider>
.
The primary difference compared to how authentication was handled in BrowserRouter
is that since RouterProvider
decouples fetching from rendering, we can no longer rely on React context and/or hooks to get our user authentication status. We need access to this information outside of the React tree so we can use it in our route loader
and action
functions.
For some background information on this design choice, please check out the Remixing React Router blog post and Ryan's When to Fetch talk from Reactathon.
Be sure to pay attention to the following features in this example:
- The use of a standalone object outside of the React tree that manages our authentication state
- The use of
loader
functions to check for user authentication - The use of
redirect
from the/protected
loader
when the user is not logged in - The use of a
<Form>
and anaction
to perform the login - The use of a
from
search param and aredirectTo
hidden input to preserve the previous location so you can send the user there after they authenticate - The use of
<Form replace>
to replace the/login
route in the history stack so the user doesn't return to the login page when clicking the back button after logging in - The use of a
<fetcher.Form>
and anaction
to perform the logout
Open this example on StackBlitz: