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

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

You can use the useAuthState hook from react-firebase-hooks/auth to manage user authentication state.

Can you show me a code example of how to implement that?

Sure! Here's a simple example:

import React from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth } from './firebase'; // your firebase config

const App = () => {
  const [user, loading, error] = useAuthState(auth);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

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

This will display a loading message while checking the user state.

What if I want to log out the user?

You can call the signOut method from Firebase's auth module. Here's how:

import { signOut } from 'firebase/auth';

const handleLogout = () => {
  signOut(auth);
};

You can attach handleLogout to a button to log the user out.