From e4afe8033b934abe4e8e917d9d484ab3f941bb1d Mon Sep 17 00:00:00 2001
From: Pavindu Lakshan <pavindulakshan@gmail.com>
Date: Thu, 27 Jun 2024 16:21:22 +0530
Subject: [PATCH] Add react router v6 example

---
 API.md | 81 +++++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 61 insertions(+), 20 deletions(-)

diff --git a/API.md b/API.md
index 72b88dd..902db1d 100644
--- a/API.md
+++ b/API.md
@@ -4,15 +4,16 @@
 
 -   [AuthProvider](#authprovider)
 -   [Securing routes with Asgardeo](#securing-routes-with-asgardeo)
-    -   [SecureApp](#2-secureapp)
-    -   [AuthenticatedComponent](#3-authenticatedcomponent)
+    -   [SecureApp](#1-secureapp)
+    -   [AuthenticatedComponent](#2-authenticatedcomponent)
+    -   [Bring Your Own Router](#3-bring-your-own-router)
 -   [useAuthContext React Hook](#useauthcontext-react-hook)
 -   [`state` Object](#state-object)
 -   [Consuming the `isLoading` State of the Auth Flow](#consuming-the-isloading-state-of-the-auth-flow)
 -   [List of supported APIs](#list-of-supported-apis)
     -   [signIn](#signin)
     -   [isAuthenticated](#isauthenticated)
-    -   [autoSignIn](#autoSignIn)
+    -   [autoSignIn](#autosignin)
     -   [getBasicUserInfo](#getbasicuserinfo)
     -   [signOut](#signout)
     -   [getIDToken](#getidtoken)
@@ -152,23 +153,6 @@ This component is used to wrap the components that need authentication. This off
 
 If the user is authenticated, the component renders the wrapped component. If the user is not authenticated, the component renders the `fallback` prop which accepts any **React element**.
 
-### 3. Bring Your Own Router
-
-It's also possible to implement your own routing logic to secure the protected routes, based on the routing library you use.
-
-#### React Router
-
-
-
-#### Tanstack Router
-
-
-
-#### Reach Router
-
-
-
-
 #### Example
 ```TypeScript
 import { AuthenticatedComponent } from "@asgardeo/auth-react";
@@ -197,6 +181,63 @@ In this case, `<Header />` and `<Footer />` will render regardless of user's aut
 
 If the user is **not** authenticated, the `<FallbackComponent/>` will be loaded. If you didn't include a `fallback`, it will render a `null` instead.
 
+### 3. Bring Your Own Router
+
+It's also possible to implement your own routing logic to secure the protected routes, based on the routing library you use.
+
+#### React Router v6
+
+Create a reusable component that redirects user to the sign in page based on the authentication status.
+
+**ProtectedRoute.js**
+
+```js
+import { Navigate } from 'react-router-dom';
+import { useAs}
+
+const ProtectedRoute = ({ children }) => {
+  const {
+    on,
+    signIn,
+    state: { isAuthenticated }
+  } = useAuthContext();
+
+  if (!isAuthenticated) {
+    signIn();
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;
+```
+
+Use the `ProtectedRoute` as follows, in your route definition.
+
+```js
+const App = () => {
+  return (
+    <AuthProvider>
+      <Router>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route
+            path="/dashboard"
+            element={
+              <ProtectedRoute>
+                <Dashboard />
+              </ProtectedRoute>
+            }
+          />
+        </Routes>
+      </Router>
+    </AuthProvider>
+  );
+};
+
+export default App;
+```
+
 ---
 ## useAuthContext React Hook