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. Then, create a context for authentication.

What do I need to include in the context?

In the context, include the Firebase auth instance and functions for login, logout, and signup. You can use the useContext hook to access these functions.

Can you show me a code example?

Sure! Here's a simple example:

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

const AuthContext = createContext();

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

    const signup = async (email, password) => {
        const userCredential = await auth.createUserWithEmailAndPassword(email, password);
        setUser(userCredential.user);
    };

    return (
        <AuthContext.Provider value={{ user, signup }}>
            {children}
        </AuthContext.Provider>
    );
};

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

This sets up a basic authentication context.

What about handling user state changes?

You can use the onAuthStateChanged method from Firebase to listen for changes in the user's authentication state and update your context accordingly.