Alright, let's get Firebase into your React project. First things first, you need to install Firebase. Open up your terminal and run:

npm install firebase

Next, you'll want to set up Firebase in your project. Typically, this is done in a firebase.js file. Here's how you can do it:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Now, let's create a context to manage authentication state across your app. This involves setting up a new context and a provider:

import { createContext, useContext, useEffect, useState } from "react";
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./firebase"; // Make sure the path to firebase config is correct

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user);
      setLoading(false);
    });

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

  return (
    <AuthContext.Provider value={{ user, loading }}>
      {!loading && children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

To make sure your entire app has access to the authentication state, wrap your app with the AuthProvider context provider. This is usually done in index.js or App.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { AuthProvider } from "./AuthContext"; // Ensure the path is correct

ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById("root")
);

Now, let's use the authentication state in your React components. For example, in a component that should only show for authenticated users:

import React from "react";
import { useAuth } from "./AuthContext"; // Ensure the path is correct

const Dashboard = () => {
  const { user, loading } = useAuth();

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {user ? (
        <div>Welcome, {user.displayName}</div>
      ) : (
        <div>Please log in</div>
      )}
    </div>
  );
};

export default Dashboard;

To protect certain routes that should only be accessible to authenticated users, use a higher-order component or a wrapper component to enforce authentication:

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { useAuth } from "./AuthContext"; // Ensure the path is correct

const PrivateRoute = ({ component: Component, ...rest }) => {
  const { user, loading } = useAuth();

  if (loading) return <div>Loading...</div>;

  return (
    <Route
      {...rest}
      render={(props) => 
        user ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

export default PrivateRoute;

Use the PrivateRoute component within your routing configuration:

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Login from "./Login";
import Dashboard from "./Dashboard";
import PrivateRoute from "./PrivateRoute"; // Ensure the path is correct

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <PrivateRoute path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
};

export default App;

By following these steps, your React app can handle Firebase authentication state changes smoothly, ensuring users are properly authenticated and redirected as needed.