uis-cloud-computing/7project/frontend/src/App.tsx

import { useEffect, useState } from 'react';
import './App.css';
import LoginRegisterPage from './pages/LoginRegisterPage';
import Dashboard from './pages/Dashboard';
import { logout } from './api';

function App() {
  const [hasToken, setHasToken] = useState<boolean>(!!localStorage.getItem('token'));

  useEffect(() => {
    // Handle OAuth callback: /oauth-callback?access_token=...&token_type=...
    if (window.location.pathname === '/oauth-callback') {
      const params = new URLSearchParams(window.location.search);
      const token = params.get('access_token');
      if (token) {
        localStorage.setItem('token', token);
        setHasToken(true);
      }
      // Clean URL and redirect to home
      window.history.replaceState({}, '', '/');
    }

    const onStorage = (e: StorageEvent) => {
      if (e.key === 'token') setHasToken(!!e.newValue);
    };
    window.addEventListener('storage', onStorage);
    return () => window.removeEventListener('storage', onStorage);
  }, []);

  if (!hasToken) {
    return <LoginRegisterPage onLoggedIn={() => setHasToken(true)} />;
  }

  return (
    <Dashboard onLogout={() => { logout(); setHasToken(false); }} />
  );
}

export default App;