How can I authenticate Google login with React Firebase 9 and manifest version 3 for a chrome extension?

I have been working on a Firebase 9 and React app where I need to do Google login by Firebase. From my learning I got to know Firebase doesn’t support Google Sign-in right now with manifest.json version 3.

I came across some tricks where people are doing with identity. I have come up with solution but still I have been stuck at a problem.

How can I get Google Auth to work with React and Firebase 9 with manifest version 3?

The current code I am using to do sign in:

import { GoogleAuthProvider, signInWithCredential, signInWithPopup } from 'firebase/auth';
import triggerMessage from '../../components/common/SnackBar';
import { auth } from '../../firebase/firebase-config';

const getGoogleAuthCredential = () => {
  return new Promise<ReturnType<typeof GoogleAuthProvider.credential>>((resolve, reject) => {
    if (typeof chrome !== 'undefined' && chrome.identity) {
      chrome.identity.getAuthToken({ interactive: true }, (token: any) => {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError);
          reject(chrome.runtime.lastError);
        }
        console.log({ token });
        const credential = GoogleAuthProvider.credential("randomnumber-randomohash.apps.googleusercontent.com", token);
        console.log({ credential })
        resolve(credential);
      });
    } else {
      // Handle the case when the `chrome` object is not available
      reject(new Error('Chrome extension environment is required.'));
    }
  });
};


export const googleAuthHandler = async () => {
  try {
    let credential;
    // Check if running in Chrome extension environment
    if (window.location.origin.includes("chrome-extension")) {
      credential = await getGoogleAuthCredential();
    } else {
      // Use regular GoogleAuthProvider for non-extension environments
      const provider = new GoogleAuthProvider();
      console.log({ provider })
      await signInWithPopup(auth, provider);
      return;
    }
    console.log({ credential })
    const result = await signInWithCredential(auth, credential);
    return result.user;

    // const result = await signInWithPopup(auth, { providerId: credential.providerId });
    // return result.user;
  } catch (error) {
    console.error(error);
    triggerMessage("Error signing in with Google. Please try again.", "error")
    return null;
  }
};

Current error - "OAuth2 request failed: Service responded with error: 'bad client id: {0}'"

I have tried Identity and tried to do setup. Finally the popup was shown in extension, but as soon as I clicked a email to login these Oauth related issue came up.