RBAC seems to be working

src/App.tsx

@@ -1,33 +1,120 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
+import { useState, useEffect } from 'react'
+import { supabase } from './lib/supabase'
+import { Login } from './components/Login'
+import { Dashboard } from './components/Dashboard'
 import './App.css'
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [currentRoute, setCurrentRoute] = useState(window.location.pathname)
+
+  useEffect(() => {
+    // Check initial auth state
+    checkAuthState()
+
+    // Listen for auth changes
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
+      console.log('Auth state changed:', event, !!session)
+      setIsAuthenticated(!!session)
+      setLoading(false)
+
+      // Handle signout route
+      if (event === 'SIGNED_OUT') {
+        setCurrentRoute('/')
+        window.history.pushState({}, '', '/')
+      }
+    })
+
+    // Handle browser navigation
+    const handlePopState = () => {
+      setCurrentRoute(window.location.pathname)
+    }
+
+    window.addEventListener('popstate', handlePopState)
+
+    return () => {
+      subscription.unsubscribe()
+      window.removeEventListener('popstate', handlePopState)
+    }
+  }, [])
+
+  useEffect(() => {
+    // Handle signout route
+    if (currentRoute === '/signout') {
+      handleLogout()
+    }
+  }, [currentRoute])
+
+  const checkAuthState = async () => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession()
+      setIsAuthenticated(!!session)
+    } catch (error) {
+      console.error('Error checking auth state:', error)
+      setIsAuthenticated(false)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleLoginSuccess = () => {
+    setIsAuthenticated(true)
+    setCurrentRoute('/')
+    window.history.pushState({}, '', '/')
+  }
+
+  const handleLogout = async () => {
+    try {
+      // Clear Supabase session
+      await supabase.auth.signOut()
+
+      // Clear any local storage items
+      localStorage.removeItem('supabase.auth.token')
+
+      // Reset state
+      setIsAuthenticated(false)
+      setCurrentRoute('/')
+      window.history.pushState({}, '', '/')
+    } catch (error) {
+      console.error('Logout error:', error)
+      // Still reset state even if there's an error
+      setIsAuthenticated(false)
+      setCurrentRoute('/')
+      window.history.pushState({}, '', '/')
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">Loading...</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Handle signout route
+  if (currentRoute === '/signout') {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">Signing out...</p>
+        </div>
+      </div>
+    )
+  }
 
   return (
     <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      {isAuthenticated ? (
+        <Dashboard onLogout={handleLogout} />
+      ) : (
+        <Login onLoginSuccess={handleLoginSuccess} />
+      )}
     </>
   )
 }