How do I set up Firebase authentication with React Hooks?

How do I set up Firebase authentication with React Hooks?

To set up Firebase authentication with React Hooks, first, ensure you have Firebase installed in your project. You can do this by running npm install firebase. Then, create a Firebase project in the Firebase console and add your app's configuration.

What are the steps to implement email/password authentication?

You need to enable email/password authentication in the Firebase console. Then, create a context for authentication in your React app, and use the useEffect hook to manage the authentication state.

Can you show me a code example for the authentication context?

Sure! Here's a simple example:

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

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
    const [currentUser, setCurrentUser] = useState(null);

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

    return (
        <AuthContext.Provider value={{ currentUser }}>
            {children}
        </AuthContext.Provider>
    );
};

export const useAuth = () => useContext(AuthContext);

This sets up a context to provide the current user throughout your app.

What about handling sign-up and login functions?

You can create functions for sign-up and login using Firebase's createUserWithEmailAndPassword and signInWithEmailAndPassword methods. Here's a quick example:

const signUp = async (email, password) => {
    try {
        await auth.createUserWithEmailAndPassword(email, password);
    } catch (error) {
        console.error('Error signing up:', error);
    }
};

const login = async (email, password) => {
    try {
        await auth.signInWithEmailAndPassword(email, password);
    } catch (error) {
        console.error('Error logging in:', error);
    }
};