From 2289dfb6b6f7b4491f85153fe4e89f12924a7fbb Mon Sep 17 00:00:00 2001
From: Christiaan Landman <christiaan@journeyapps.com>
Date: Mon, 13 Jan 2025 10:34:07 +0200
Subject: [PATCH] chore: Navigate to login page when accessing pages that
 require auth (#468)

---
 .../src/app/router.tsx                        | 54 +++++++++++++++++--
 1 file changed, 49 insertions(+), 5 deletions(-)

diff --git a/demos/react-supabase-todolist/src/app/router.tsx b/demos/react-supabase-todolist/src/app/router.tsx
index 26e4f7ef..93647f6a 100644
--- a/demos/react-supabase-todolist/src/app/router.tsx
+++ b/demos/react-supabase-todolist/src/app/router.tsx
@@ -1,4 +1,4 @@
-import { Outlet, createBrowserRouter } from 'react-router-dom';
+import { Outlet, createBrowserRouter, useNavigate } from 'react-router-dom';
 import LoginPage from '@/app/auth/login/page';
 import RegisterPage from '@/app/auth/register/page';
 import EntryPage from '@/app/page';
@@ -6,6 +6,8 @@ import TodoEditPage from '@/app/views/todo-lists/edit/page';
 import TodoListsPage from '@/app/views/todo-lists/page';
 import ViewsLayout from '@/app/views/layout';
 import SQLConsolePage from '@/app/views/sql-console/page';
+import { useSupabase } from '@/components/providers/SystemProvider';
+import React from 'react';
 
 export const TODO_LISTS_ROUTE = '/views/todo-lists';
 export const TODO_EDIT_ROUTE = '/views/todo-lists/:id';
@@ -13,6 +15,46 @@ export const LOGIN_ROUTE = '/auth/login';
 export const REGISTER_ROUTE = '/auth/register';
 export const SQL_CONSOLE_ROUTE = '/sql-console';
 
+interface AuthGuardProps {
+  children: JSX.Element;
+}
+
+const AuthGuard = ({ children }: AuthGuardProps) => {
+  const connector = useSupabase()
+
+  const navigate = useNavigate();
+  React.useEffect(() => {
+    if (!connector) {
+      console.error(`No Supabase connector has been created yet.`);
+      return;
+    }
+
+    connector.client.auth.onAuthStateChange(async (event, _session) => {
+      if (event === 'SIGNED_OUT') {
+        navigate(LOGIN_ROUTE);
+      }
+    });
+
+    const loginGuard = () => {
+      if (!connector.currentSession) {
+        navigate(LOGIN_ROUTE);
+      }
+    }
+    if (connector.ready) {
+      loginGuard();
+    } else {
+      const l = connector.registerListener({
+        initialized: () => {
+          loginGuard();
+        }
+      });
+      return () => l?.();
+    }
+
+  }, []);
+  return children;
+};
+
 /**
  * Navigate to this route after authentication
  */
@@ -33,9 +75,11 @@ export const router = createBrowserRouter([
   },
   {
     element: (
-      <ViewsLayout>
-        <Outlet />
-      </ViewsLayout>
+      <AuthGuard>
+        <ViewsLayout>
+          <Outlet />
+        </ViewsLayout>
+      </AuthGuard>
     ),
     children: [
       {
@@ -52,4 +96,4 @@ export const router = createBrowserRouter([
       }
     ]
   }
-]);
+]);
\ No newline at end of file