From c657f261276fe1aadac4b7f0c6eb5d12d07216f0 Mon Sep 17 00:00:00 2001
From: Matt Beaudoin <ehxtwo@gmail.com>
Date: Tue, 20 Jan 2026 23:58:19 -0800
Subject: [PATCH 1/2] rework route tree, outlet not working

---
 src/App.tsx                        | 59 +++++----------------------
 src/components/Authenticated.tsx   | 24 +++++++++++
 src/context/AuthContext.tsx        | 65 +++++++++++++++++-------------
 src/routes/Login/Authenticated.tsx | 26 ------------
 4 files changed, 71 insertions(+), 103 deletions(-)
 create mode 100644 src/components/Authenticated.tsx
 delete mode 100644 src/routes/Login/Authenticated.tsx

diff --git a/src/App.tsx b/src/App.tsx
index eea1522..30eaaee 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,12 @@
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
 import { LoginForm } from './routes/Login/LoginForm';
-import { Authenticated } from './routes/Login/Authenticated';
+import { Authenticated } from './components/Authenticated';
 import { Dashboard } from './routes/Authenticated/Dashboard/Dashboard';
 import { Apps } from './routes/Authenticated/Apps/Apps';
 import { AppDetail } from './routes/Authenticated/Apps/App';
 import { Servers } from './routes/Authenticated/Servers/Servers';
-import { Server} from './routes/Authenticated/Servers/Server';
+import { Server } from './routes/Authenticated/Servers/Server';
 
 function App() {
   return (
@@ -17,53 +17,14 @@ function App() {
           <Route path="/login" element={<LoginForm />} />
           
           {/* Protected routes */}
-          <Route
-            path="/dashboard"
-            element={
-              <Authenticated>
-                <Dashboard />
-              </Authenticated>
-            }
-          />
-          
-          <Route
-            path="/apps"
-            element={
-              <Authenticated>
-                <Apps />
-              </Authenticated>
-            }
-          />
-          
-          <Route
-            path="/apps/:server/:appName"
-            element={
-              <Authenticated>
-                <AppDetail />
-              </Authenticated>
-            }
-          />
-          
-          <Route
-            path="/servers"
-            element={
-              <Authenticated>
-                <Servers />
-              </Authenticated>
-            }
-          />
-          
-          <Route
-            path="/servers/:serverName"
-            element={
-              <Authenticated>
-                <Server/>
-              </Authenticated>
-            }
-          />
-          
-          {/* Redirect root to dashboard */}
-          <Route path="/" element={<Navigate to="/dashboard" replace />} />
+          <Route element={<Authenticated />}>
+            <Route path="/" element={<Navigate to="/dashboard" replace />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/apps" element={<Apps />} />
+            <Route path="/apps/:server/:appName" element={<AppDetail />} />
+            <Route path="/servers" element={<Servers />} />
+            <Route path="/servers/:serverName" element={<Server />} />
+          </Route>
           
           {/* 404 catch-all */}
           <Route path="*" element={<Navigate to="/dashboard" replace />} />
diff --git a/src/components/Authenticated.tsx b/src/components/Authenticated.tsx
new file mode 100644
index 0000000..a66b1f1
--- /dev/null
+++ b/src/components/Authenticated.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export const Authenticated: React.FC = () => {
+  const { isAuthenticated, loading } = useAuth();
+
+    console.log('🛡️ ProtectedRoute:', { isAuthenticated, loading });
+
+  if (loading) {
+    return (
+      <div style={{ 
+        display: 'flex', 
+        justifyContent: 'center', 
+        alignItems: 'center', 
+        height: '100vh' 
+      }}>
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
+};
\ No newline at end of file
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index 81b733d..3b85f00 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useEffect, useState } from 'react';
+import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { apiService } from '../services/api';
 import type { LoginCredentials, User } from '../types';
 
@@ -23,36 +23,36 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
-      // Check if user is already logged in on mount
-      const checkAuth = async () => {
-        try {
-          // In mock mode, automatically set a mock user
-          if (isMockMode) {
-            setUser({
-              id: 'mock-user-1',
-              username: 'developer',
-              email: 'dev@coopcloud.tech',
-            });
-            setLoading(false);
-            return;
-          }
-
-          const token = localStorage.getItem('auth_token');
-          if (token) {
-            const currentUser = await apiService.getCurrentUser();
-            setUser(currentUser);
-          }
-        } catch (error) {
-          console.error('Auth check failed:', error);
-          localStorage.removeItem('auth_token');
-        } finally {
+    const checkAuth = async () => {
+      console.log('🔍 checkAuth running, isMockMode:', isMockMode);
+      try {
+        if (isMockMode) {
+          console.log('✅ Mock mode - setting mock user');
+          setUser({
+            id: 'mock-user-1',
+            username: 'developer',
+            email: 'dev@coopcloud.tech',
+          });
           setLoading(false);
+          console.log('✅ Mock user set, loading set to false');
+          return;
         }
-      };
 
-      checkAuth();
-    }, [isMockMode]);
+        const token = localStorage.getItem('auth_token');
+        if (token) {
+          const currentUser = await apiService.getCurrentUser();
+          setUser(currentUser);
+        }
+      } catch (error) {
+        console.error('Auth check failed:', error);
+        localStorage.removeItem('auth_token');
+      } finally {
+        setLoading(false);
+      }
+    };
 
+    checkAuth();
+  }, [isMockMode]);
 
   const login = async (credentials: LoginCredentials) => {
     try {
@@ -75,6 +75,15 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     logout,
     isAuthenticated: !!user,
   };
+  console.log('📊 AuthContext state:', { user, loading, isAuthenticated: !!user });
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-};
\ No newline at end of file
+};
+
+export function useAuth() { 
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}
\ No newline at end of file
diff --git a/src/routes/Login/Authenticated.tsx b/src/routes/Login/Authenticated.tsx
deleted file mode 100644
index e1c6322..0000000
--- a/src/routes/Login/Authenticated.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Navigate } from 'react-router-dom';
-import { useAuth } from '../../hooks/useAuth';
-
-interface AuthenticatedProps {
-  children: React.ReactNode;
-}
-
-export const Authenticated: React.FC<AuthenticatedProps> = ({ children }) => {
-  const { isAuthenticated, loading } = useAuth();
-
-  if (loading) {
-    return (
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'center', 
-        alignItems: 'center', 
-        height: '100vh' 
-      }}>
-        <p>Loading...</p>
-      </div>
-    );
-  }
-
-  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
-};
\ No newline at end of file
-- 
2.49.0


From 7b032d8735d2c3ac91767d40ecad0b70035bc0da Mon Sep 17 00:00:00 2001
From: Matt Beaudoin <ehxtwo@gmail.com>
Date: Mon, 2 Mar 2026 14:29:47 -0800
Subject: [PATCH 2/2] auth flow working

---
 src/components/Header/Header.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index ca9d399..ac9240c 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -18,8 +18,9 @@ export const Header: React.FC<HeaderProps> = ({ children }) => {
 return(
 <header className="layout-header">
     <div className="header-content">
-      {/* <h1 onClick={() => navigate('/dashboard')} className="logo">Coop Cloud</h1> */}
-      <img className="logo" src="/public/coopcloud_logo_grey.svg"/>
+      <h1 onClick={() => navigate('/dashboard')} className="logo">
+        <img className="logo" src="/public/coopcloud_logo_grey.svg"/>
+      </h1>
       <nav className="nav">
         <button onClick={() => navigate('/dashboard')} className="nav-link">
           Dashboard
-- 
2.49.0