Implements OAuth-based user auth with PKCE

Ensures secure user login and logout via authorization code flow
Adds callback handling and environment configuration for PKCE
Validates tokens before GraphQL requests to improve user experience

Author: mbertelsen

editor/src/App.tsx

@@ -57,6 +57,49 @@ export default function App() {
   const { script } = state;
   const { isValid, errors: validationErrors } = state.validation;
 
+  // Handle OAuth callback - monitor URL changes
+  useEffect(() => {
+    const handleOAuthCallback = async () => {
+      const currentUrl = window.location.href;
+      const urlPath = window.location.pathname;
+      
+      // Check if we're on the callback route with an authorization code
+      console.log('🔍 Checking OAuth callback:', { urlPath, hasCode: currentUrl.includes('code=') });
+      
+      if (urlPath === '/account/callback' && currentUrl.includes('code=')) {
+        console.log('🔄 OAuth callback detected:', currentUrl);
+        try {
+          const { authService } = await import('./lib/auth-service');
+          await authService.handleOAuthCallback(currentUrl);
+          
+          // Clear the URL parameters and redirect to main app
+          window.history.replaceState({}, document.title, '/');
+          
+          console.log('✅ OAuth login successful, reloading app...');
+          window.location.reload();
+        } catch (error) {
+          console.error('❌ OAuth callback failed:', error);
+          alert('Login failed: ' + (error as Error).message);
+          window.history.replaceState({}, document.title, '/');
+        }
+      }
+    };
+
+    // Handle callback on mount
+    handleOAuthCallback();
+
+    // Also listen for URL changes (in case of navigation without page reload)
+    const handlePopState = () => {
+      handleOAuthCallback();
+    };
+    
+    window.addEventListener('popstate', handlePopState);
+    
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+    };
+  }, []);
+
   // One-time migration effect: ensure any pre-existing steps have required setup & at least one condition
   const [migrationComplete, setMigrationComplete] = useState(false);
   useEffect(() => {

editor/src/components/Sidebar.tsx

@@ -117,6 +117,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
       setTimeout(() => setExecMessage(null), 6000);
     }
   }
+
   return (
     <div className="tree-sidebar">
       <div className="sidebar-content">

editor/src/components/TopBar.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { FacilitySelectorPortal } from './FacilitySelectorPortal';
 import { BuildVersion } from './BuildVersion';
+import { useAuth } from '../lib/AuthProvider';
 
 interface Facility {
   id: string;
@@ -21,6 +22,8 @@ export const TopBar: React.FC<TopBarProps> = ({
   selectedFacilityId,
   onFacilitySelect 
 }) => {
+  const { isAuthenticated, isLoading, loginWithOAuth, logout } = useAuth();
+  
   const handleFacilitySelect = (facility: Facility | null) => {
     onFacilitySelect(facility);
     console.log('Selected facility:', facility);
@@ -49,6 +52,19 @@ export const TopBar: React.FC<TopBarProps> = ({
           </div>
         </div>
         <div className="top-bar-right">
+          <div className="top-bar-auth">
+            {isLoading ? (
+              <span className="auth-loading">🔄</span>
+            ) : isAuthenticated ? (
+              <button onClick={logout} className="auth-button logout">
+                🔓 Logout
+              </button>
+            ) : (
+              <button onClick={loginWithOAuth} className="auth-button login">
+                🔑 Login
+              </button>
+            )}
+          </div>
           <BuildVersion />
         </div>
       </div>

editor/src/lib/AuthProvider.tsx

@@ -6,7 +6,8 @@ interface AuthContextType {
   isLoading: boolean;
   error: string | null;
   login: () => Promise<void>;
-  logout: () => void;
+  loginWithOAuth: () => Promise<void>;
+  logout: () => Promise<void>;
   refreshAuth: () => Promise<void>;
   tokenInfo: { isValid: boolean; expiresAt?: Date; scope?: string };
 }
@@ -28,25 +29,32 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   }, []);
 
   const checkAuthStatus = () => {
+    // Only check for OAuth tokens (user authentication), not client credential tokens
     const isAuth = authService.isAuthenticated();
+    console.log('🔍 Checking auth status:', { isAuth, hasStoredToken: !!localStorage.getItem('trackman_auth_token') });
+    
     setIsAuthenticated(isAuth);
     setIsLoading(false);
 
     if (!isAuth) {
-      setError('Not authenticated');
+      console.log('❌ Not authenticated - user needs to log in');
+      setError(null); // Don't show error for unauthenticated state
     } else {
+      console.log('✅ User is authenticated');
       setError(null);
     }
   };
 
   const login = async () => {
+    // This method is for client credential authentication (API-only access)
+    // For user authentication, use loginWithOAuth() instead
     setIsLoading(true);
     setError(null);
 
     try {
       await authService.getAccessToken();
       setIsAuthenticated(true);
-      console.log('✅ Successfully authenticated');
+      console.log('✅ Successfully authenticated with client credentials');
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Authentication failed';
       setError(errorMessage);
@@ -57,11 +65,40 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
   };
 
-  const logout = () => {
-    authService.clearToken();
-    setIsAuthenticated(false);
+  const loginWithOAuth = async () => {
+    setIsLoading(true);
     setError(null);
-    console.log('🔓 Logged out');
+    
+    try {
+      await authService.startOAuthLogin();
+      // Note: This will redirect away from the app, so we won't reach the lines below
+      // The OAuth callback will handle setting authentication state
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'OAuth login failed';
+      setError(errorMessage);
+      setIsLoading(false);
+      console.error('❌ OAuth login failed:', errorMessage);
+    }
+  };
+
+  const logout = async () => {
+    setIsLoading(true);
+    try {
+      await authService.logoutOAuth();
+      // Update local state immediately since we're not redirecting
+      setIsAuthenticated(false);
+      setError(null);
+      console.log('🔓 Logged out successfully');
+    } catch (err) {
+      // Fallback to local logout if server logout fails
+      console.warn('⚠️ Server logout failed, falling back to local logout:', err);
+      authService.clearToken();
+      setIsAuthenticated(false);
+      setError(null);
+      console.log('🔓 Logged out locally');
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const refreshAuth = async () => {
@@ -90,6 +127,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     isLoading,
     error,
     login,
+    loginWithOAuth,
     logout,
     refreshAuth,
     tokenInfo,