Skip to content

Commit 5b1765f

Browse files
brophdawg11brophdawg11
authored
Add auth example using RouterProvider (#10698)
1 parent 9c1892a commit 5b1765f

File tree

13 files changed

+1860
-0
lines changed

13 files changed

+1860
-0
lines changed

‎examples/auth-router-provider/.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/auth-router-provider/.stackblitzrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"installDependencies": true,
3+
"startCommand": "npm run dev"
4+
}

‎examples/auth-router-provider/README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: Authentication (using RouterProvider)
3+
toc: false
4+
---
5+
6+
# Auth Example (using RouterProvider)
7+
8+
This example demonstrates how to restrict access to routes to authenticated users when using `<RouterProvider>`.
9+
10+
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.
11+
12+
For some background information on this design choice, please check out the [Remixing React Router](https://remix.run/blog/remixing-react-router) blog post and Ryan's [When to Fetch](https://www.youtube.com/watch?v=95B8mnhzoCM) talk from Reactathon.
13+
14+
Be sure to pay attention to the following features in this example:
15+
16+
- The use of a standalone object _outside of the React tree_ that manages our authentication state
17+
- The use of `loader` functions to check for user authentication
18+
- The use of `redirect` from the `/protexted` `loader` when the user is not logged in
19+
- The use of a `<Form>` and an `action` to perform the login
20+
- The use of a `from` search param and a `redirectTo` hidden input to preserve the previous location so you can send the user there after they authenticate
21+
- 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
22+
- The use of a `<fetcher.Form>` and an `action` to perform the logout
23+
24+
## Preview
25+
26+
Open this example on [StackBlitz](https://stackblitz.com):
27+
28+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/auth-router-provider?file=src/App.tsx)

‎examples/auth-router-provider/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>React Router - Auth Example</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)