This custom hook allows you a simple and convenient way to access Firebase auth features in your app.

useAuth.js

import { useState, useEffect } from "react";
import { initializeApp } from "firebase/app";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

const firebaseConfig = {
  //... Your config object here
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

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

  const signUp = (email, password) => {
    setLoading(true);
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        setUser(userCredential.user);
        setLoading(false);
        setError(null);
      })
      .catch((error) => {
        setUser(null);
        setLoading(false);
        setError(error.message);
      });
  };

  const signIn = (email, password) => {
    setLoading(true);
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        setUser(userCredential.user);
        setLoading(false);
        setError(null);
      })
      .catch((error) => {
        setUser(null);
        setLoading(false);
        setError(error.message);
      });
  };

  const signOut = () => {
    setLoading(true);
    auth.signOut()
      .then(() => {
        setUser(null);
        setLoading(false);
        setError(null);
      })
      .catch((error) => {
        setUser(null);
        setLoading(false);
        setError(error.message);
      });
  };

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (user) {
        setUser(user);
      } else {
        setUser(null);
      }
      setLoading(false);
    });
    return () => unsubscribe();
  }, [auth]);

  return { user, loading, error, auth, signUp, signIn, signOut };
};

const App = () => {
  const { user, loading, error, signUp, signIn, signOut } = useAuth();

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

  if (user) {
    return (
      <>
        <h1>Welcome {user.displayName || user.email}</h1>
        <button onClick={signOut}>Sign Out</button>
      </>
    );
  }

  const signingHandler = (e, action) => {
    e.preventDefault();
    const email = e.target.email.value;
    const password = e.target.password.value;

    if (action === "signin") {
      signIn(email, password)
    } else if (action === "signup") {
      signUp(email, password)
    } else return;
  }

  return (
    <>
      <h1>Please Sign In</h1>
      <form onSubmit={(e) => signingHandler(e, "signin")}>
        <label>Email:</label>
        <input type="email" name="email" />
        <label>Password:</label>
        <input type="password" name="password" />
        <button type="submit">Sign In</button>
      </form>
      <p>Don't have an account? Sign up below.</p>
      <form onSubmit={(e) => signingHandler(e, "signup")}>
        <label>Email:</label>
        <input type="email" name="email" />
        <label>Password:</label>
        <input type="password" name="password" />
        <button type="submit">Sign Up</button>
      </form>
    </>
  );
};

export default App;