universal-firebase-auth/src/components/LoginButton.jsx

A reusable Firebase-based authentication package like Clerk for React with social login support (Google, Facebook, GitHub, LinkedIn, etc).

import React from "react";
import { useAuth } from "../context/AuthContext";

const providerReadable = {
  google: "Google",
  facebook: "Facebook",
  github: "GitHub",
  linkedin: "LinkedIn",
  twitter: "Twitter",
  email: "Email",
};

export const LoginButton = ({ provider = "google", className = "", children }) => {
  const { loginWithProvider } = useAuth();

  const handleClick = () => loginWithProvider(provider);

  return (
    <button
      onClick={handleClick}
      className={`px-4 py-2 rounded shadow bg-gray-900 text-white ${className}`}
    >
      {children || `Sign in with ${providerReadable[provider]}`}
    </button>
  );
};