Implement auth protected routes

vocdoni · Sep 23, 2024 · d1b9d40 · d1b9d40
1 parent ab1d04b
commit d1b9d40
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 31 deletions.
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
@@ -14,6 +14,7 @@ import SaasOrganizationProtectedRoute from './SaasOrganizationProtectedRoute'
 
 // Lazy loading helps splitting the final code, which helps downloading the app (theoretically)
 const ProtectedRoutes = lazy(() => import('./ProtectedRoutes'))
+const SaasAuthProtectedRoute = lazy(() => import('./SaasAuthProtectedRoute'))
 // elements
 const Faucet = lazy(() => import('~elements/Faucet'))
 const Home = lazy(() => import('~theme/components/Home'))
@@ -168,41 +169,51 @@ export const RoutesProvider = () => {
   if (isSaas) {
     routes.push(
       {
-        element: <LayoutAuth />,
+        path: 'account',
+        element: (
+          <SuspenseLoader>
+            <SaasAuthProtectedRoute />
+          </SuspenseLoader>
+        ),
         children: [
           {
+            element: <LayoutAuth />,
             children: [
               {
-                path: 'signin',
-                element: (
-                  <SuspenseLoader>
-                    <SignIn />
-                  </SuspenseLoader>
-                ),
-              },
-              {
-                path: 'signup',
-                element: (
-                  <SuspenseLoader>
-                    <SignUp />
-                  </SuspenseLoader>
-                ),
-              },
-              {
-                path: 'account/recovery',
-                element: (
-                  <SuspenseLoader>
-                    <ForgotPassword />
-                  </SuspenseLoader>
-                ),
-              },
-              {
-                path: 'account/verify',
-                element: (
-                  <SuspenseLoader>
-                    <Verify />
-                  </SuspenseLoader>
-                ),
+                children: [
+                  {
+                    path: 'signin',
+                    element: (
+                      <SuspenseLoader>
+                        <SignIn />
+                      </SuspenseLoader>
+                    ),
+                  },
+                  {
+                    path: 'signup',
+                    element: (
+                      <SuspenseLoader>
+                        <SignUp />
+                      </SuspenseLoader>
+                    ),
+                  },
+                  {
+                    path: 'recovery',
+                    element: (
+                      <SuspenseLoader>
+                        <ForgotPassword />
+                      </SuspenseLoader>
+                    ),
+                  },
+                  {
+                    path: 'verify',
+                    element: (
+                      <SuspenseLoader>
+                        <Verify />
+                      </SuspenseLoader>
+                    ),
+                  },
+                ],
               },
             ],
           },

diff --git a/src/router/SaasAuthProtectedRoute.tsx b/src/router/SaasAuthProtectedRoute.tsx
@@ -0,0 +1,19 @@
+import { Navigate, Outlet } from 'react-router-dom'
+import { useAuth } from '~components/Auth/useAuth'
+import { Loading } from '~src/router/SuspenseLoader'
+
+const SaasAuthProtectedRoute = () => {
+  const { isAuthenticated, isAuthLoading } = useAuth()
+
+  if (isAuthLoading) {
+    return <Loading />
+  }
+
+  if (isAuthenticated) {
+    return <Navigate to='/organization' />
+  }
+
+  return <Outlet />
+}
+
+export default SaasAuthProtectedRoute