To enable users to sign in with their Google or GitHub accounts in your React app, you will use the Firebase Authentication SDK's signInWithPopup method along with provider objects. Each provider, such as Google or GitHub, has its own authentication provider object that you import from the Firebase library. These provider objects encapsulate the logic for each social login service.

The signInWithPopup method takes two arguments: the auth instance you have already configured, and the provider object (either Google or GitHub). When called, it opens a popup window where the user can log in with their chosen social account. If the authentication is successful, Firebase returns a user credential object containing the authenticated user's information. If there is an error, you can handle it accordingly.

To add social login to your React component, you typically import the necessary Firebase modules, create the provider instances, and then implement click handlers for your login buttons. These handlers call signInWithPopup with the appropriate provider. You can then use the authentication response to update your app's state, display user information, or redirect the user as needed.

import React from "react";
import { getAuth, signInWithPopup, GoogleAuthProvider, GithubAuthProvider } from "firebase/auth";

const auth = getAuth();

function SocialLogin() {
  // Create provider instances
  const googleProvider = new GoogleAuthProvider();
  const githubProvider = new GithubAuthProvider();

  // Google login handler
  const handleGoogleLogin = async () => {
    try {
      const result = await signInWithPopup(auth, googleProvider);
      // result.user contains the logged-in user's info
      console.log("Google user:", result.user);
    } catch (error) {
      console.error("Google login error:", error);
    }
  };

  // GitHub login handler
  const handleGithubLogin = async () => {
    try {
      const result = await signInWithPopup(auth, githubProvider);
      // result.user contains the logged-in user's info
      console.log("GitHub user:", result.user);
    } catch (error) {
      console.error("GitHub login error:", error);
    }
  };

  return (
    <div>
      <button onClick={handleGoogleLogin}>Sign in with Google</button>
      <button onClick={handleGithubLogin}>Sign in with GitHub</button>
    </div>
  );
}

export default SocialLogin;

This component sets up two buttons: one for Google login and one for GitHub login. When a user clicks a button, the corresponding handler function calls signInWithPopup with the appropriate provider. If the login is successful, the user's information is available in the response, and you can use it to personalize your app or perform further actions. If there is an error (such as the user closing the popup or declining permissions), it is caught and logged.