I’m currently developing a Chrome extension with an associated dashboard, both utilizing Firebase for authentication and Firestore for data storage. I’ve run into an issue where Firestore data requests from the extension work perfectly on the dashboard, but fail when attempted from other websites.

Notes

• Users login on the dashboard. The extension automatically logs in
  using signInWithCustomToken, and the token is stored in cookies.
• Firestore rules are set to allow access only to authenticated users.
• Authentication: I’ve confirmed that the user is correctly
  authenticated on other pages by logging the user ID via console.log,
  which shows the correct user ID.

I got 403 forbidden request and this error on the console

root.js:10184 Error adding document: FirebaseError: Missing or insufficient permissions.

My Firestore Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /apps/{appId} {
      allow read, write: if request.auth != null && request.auth.uid == request.resource.data.userId;
    }

    match /documents/{documentId} {
      allow read, write: if request.auth != null && request.auth.uid == request.resource.data.userId;
    }
  }
}

Function

        try {
        await runTransaction(db, async (transaction) => {
            const appsCollection = collection(db, "apps");
            const appDocRef = doc(appsCollection);
            transaction.set(appDocRef, appData);

            const documentCollection = collection(db, "documents");
            const documentDocRef = doc(documentsCollection);
            transaction.set(documentDocRef, documentData);
        });

        console.log("App and document saved successfully");

    } catch (error) {
        console.error("Error adding document: ", error);
    }

to make things clear the function and the Rules are working fine on the dashboard I am able to save data but when I call this function on other websites I get 403 forbidden

Thank you for your help!