How to Pass Firebase Auth Tokens from a Chrome Extension to Cloud Functions?

I have a Firebase Cloud Function that accesses Firestore and requires user authentication. The Cloud Function is defined as follows:

JAVASCRIPTCopied
const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();
exports.getUserCredits = functions.https.onCall(async (data, context) => {
    if (!context.auth) {
        throw new functions.https.HttpsError("unauthenticated", "User must be signed in.");
    }
    const uid = context.auth.uid;
    const userRef = admin.firestore().doc(`users/${uid}`);
    try {
        const docSnap = await userRef.get();
        if (!docSnap.exists) {
            throw new functions.https.HttpsError("not-found", "User document does not exist.");
        }
        const userData = docSnap.data();
        const credits = userData?.credits ?? 0; // Default to 0 if undefined
        return { credits };
    } catch (error) {
        console.error("Error getting user credits:", error);
        if (error.code && error.code.startsWith("permission-denied")) {
            throw new functions.https.HttpsError("permission-denied", "Access to Firestore denied.");
        }
        throw new functions.https.HttpsError("internal", "An unexpected error occurred.");
    }
});

I am calling this function from my Chrome extension where the user is logged in. The extension calls the function as shown below:

TYPESCRIPTCopied
export async function getUserCredits(): Promise<number | undefined> {
  const auth = Auth.getAuth(); // Initialize Firebase Auth
  const user = auth.currentUser;

  if (!user) {
    console.log("No user is logged in.");
    return undefined;
  }

  // Initialize Firebase Functions
  const functions = getFunctions();

  try {
    // Call the Firebase Cloud Function
    const getUserCreditsFunction = httpsCallable(functions, "getUserCredits");

    // Call the function, passing the necessary data if needed
    const result = await getUserCreditsFunction();

    // Get the 'credits' from the result returned by the Cloud Function
    const credits = (result.data as { credits: number })?.credits ?? undefined;

    return credits;
  } catch (error) {
    console.log("Error getting user credits from Cloud Function:", error);
    return undefined;
  }
}

Even though the user is logged in (verified by the extension since we reach the conditional inside the function), the Cloud Function still reports an error:

Error getting user credits from Cloud Function: FirebaseError: User must be signed in.

I have tried several approaches. Direct access to Firestore from the extension works fine, so it appears the issue is with how the authentication is passed along when calling the Cloud Function. The accepted answer suggests ensuring that for Manifest V3 Chrome extensions, Firebase Auth should be imported from firebase/auth/web-extension to automatically attach the user’s ID token to callable requests. Additionally, ensuring the token is fresh (e.g., forcing token refresh) might help.

How can I correctly pass the authentication so that context.auth in my Cloud Function is properly set?