How can I implement authentication in my React app using Firebase hooks?

How can I implement authentication in my React app using Firebase hooks?

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

What do I need to set up before using this hook?

First, ensure you have Firebase set up in your project and the firebase and react-firebase-hooks packages installed.

Can you show me a code example?

Sure! Here's a simple example:

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>;
};

What if I want to add sign-in and sign-out functionality?

You can use Firebase's signInWithEmailAndPassword and signOut methods. Would you like a code example for that?