How can I manage user authentication state with React Hooks and Firebase?

How can I manage user authentication state with React Hooks and Firebase?

You can use the useEffect hook to listen for authentication state changes in Firebase. This allows you to update your app's state accordingly.

Can you show me a code example of that?

Sure! Here's a simple example:

import React, { useEffect, useState } from 'react';
import { auth } from './firebase'; // Import your Firebase configuration

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

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setUser(user);
    });
    return () => unsubscribe(); // Cleanup subscription on unmount
  }, []);

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

This code listens for changes in the authentication state and updates the user state.

What if I want to handle user sign-up and login?

You can create functions for sign-up and login using Firebase's createUserWithEmailAndPassword and signInWithEmailAndPassword methods. Would you like an example?