How can I implement custom hooks for Firebase authentication?

How can I implement custom hooks for Firebase authentication?

You can create custom hooks in React to manage Firebase authentication. Start by creating a hook that initializes Firebase and handles user state.

Can you show me an example of a custom hook for signing in?

Sure! Here's a simple example:

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

const useFirebaseAuth = () => {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);

    const signIn = async (email, password) => {
        setLoading(true);
        try {
            const userCredential = await auth.signInWithEmailAndPassword(email, password);
            setUser(userCredential.user);
        } catch (error) {
            console.error(error);
        } finally {
            setLoading(false);
        }
    };

    return { user, loading, signIn };
};

This hook manages user state and provides a sign-in function.

What about handling sign-out?

You can extend the same hook to include a sign-out function. Here's how:

const signOut = async () => {
    setLoading(true);
    try {
        await auth.signOut();
        setUser(null);
    } catch (error) {
        console.error(error);
    } finally {
        setLoading(false);
    }
};

Now, your hook can manage both sign-in and sign-out!