How can I manage authentication state in a React app using Firebase?

How can I manage authentication state in a React app using Firebase?

You can use Firebase's authentication state observer to manage user sessions in your React app. This allows you to check if a user is signed in or not.

Can you show me a code example of how to set this up?

Sure! You can use the onAuthStateChanged method from Firebase. Here's a simple example:

import { useEffect, useState } from 'react';
import { auth } from './firebase'; // your firebase config

const App = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setUser(user);
    });
    return () => unsubscribe();
  }, []);

  return <div>{user ? `Welcome, ${user.email}` : 'Please log in.'}</div>;
};

This will update the user state whenever the authentication state changes.

What if I want to redirect users based on their authentication state?

You can use React Router to redirect users. Inside your useEffect, you can check the user state and use history.push('/dashboard') for authenticated users.