我已经创建了我的应用程序文件，该文件在成功登录连接时将isAuthenticated变量变为true。我已经验证了Firebase API调用是否正常工作，因为只有输入有效的用户名和密码后，我的程序才会切换到/admin页面。
我希望我的标题栏在成功登录后隐藏登录按钮，但它不起作用，因为我的isAuthenticated变量在我传递它而不是true时变为undefined。我知道这是在发生，因为我在头文件中放置了一个console.log语句来打印isAuthenticated变量的值。在我的Header.js文件中，我想使用这个变量来控制登录按钮是否出现。
下面是我的App.js和Header.js文件的代码：

import './App.css';
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from 'react-router-dom';
import Header from './Header';  
import LoginForm from './LoginForm'; 
import AdminPage from './AdminPage'; 

import { getAuth, signInWithEmailAndPassword, onAuthStateChanged } from "firebase/auth";
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
   //
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

function HomePage() {
  const navigate = useNavigate();
  const auth = getAuth();
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        setIsAuthenticated(true);
        navigate('/admin');
      } else {
        setIsAuthenticated(false);
      }
    });

    return () => unsubscribe();
  }, [auth, navigate]);

  const handleLogin = async (username, password) => {
    try {
      await signInWithEmailAndPassword(auth, username, password);
      console.log('Login successful');
      navigate('/admin'); // Navigate to the admin page on successful login
    } catch (error) {
      console.log(error.message);
    }
  };

  return (
    <div className="App">
        <Header
            isAuthenticated={isAuthenticated}
            handleLoginFormSubmit={handleLogin} // Pass handleLogin as a prop
        />
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/admin" element={<AdminPage />} />
      </Routes>
    </Router>
  );
}

export default App;

import React, { useState } from 'react';
import LoginForm from './LoginForm';

function Header({ isAuthenticated, handleLoginFormSubmit }) {
  const [showLoginForm, setShowLoginForm] = useState(false);

  const handleLoginButtonClick = () => {
    setShowLoginForm(true);
  };

  return (
    <header className="App-header">
      <h1 className="App-title">Family Wordle</h1>
      {isAuthenticated ? null : (
        <>
          {!showLoginForm ? (
            <button className="App-button" onClick={handleLoginButtonClick}>
              Admin Login
            </button>
          ) : (
            <LoginForm handleLogin={handleLoginFormSubmit} /> // Updated prop name
          )}
        </>
      )}
    </header>
  );
}

export default Header;