Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

[capelski]

Bug report

• Extension name: firestore-stripe-payments

Describe the bug

Calling getProducts,createCheckoutSession or onCurrentUserSubscriptionUpdate raises an error:

Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

To Reproduce

• getProducts

import { getProducts, getStripePayments } from '@invertase/firestore-stripe-payments';
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { initializeFirestore } from 'firebase/firestore';

const app = initializeApp(firebaseConfig);
initializeFirestore(app, {});
const payments = getStripePayments(app, {
  productsCollection: 'products',
  customersCollection: 'customers',
});

await getProducts(payments);

• createCheckoutSession

import { createCheckoutSession, getStripePayments } from '@invertase/firestore-stripe-payments';
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { initializeFirestore } from 'firebase/firestore';

const app = initializeApp(firebaseConfig);
initializeFirestore(app, {});
const payments = getStripePayments(app, {
  productsCollection: 'products',
  customersCollection: 'customers',
});

getAuth(app).onAuthStateChanged(async (user) => {
  if (user) {
    await createCheckoutSession(payments, {
      price: '...',
    });
});

• onCurrentUserSubscriptionUpdate

import { getStripePayments, onCurrentUserSubscriptionUpdate } from '@invertase/firestore-stripe-payments';
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { initializeFirestore } from 'firebase/firestore';

const app = initializeApp(firebaseConfig);
initializeFirestore(app, {});
const payments = getStripePayments(app, {
  productsCollection: 'products',
  customersCollection: 'customers',
});

getAuth(app).onAuthStateChanged(async (user) => {
  if (user) {
    onCurrentUserSubscriptionUpdate(payments, (snapshot) => {});
  }
});

Expected behavior

The methods don't error out and perform the operations described in the documentation.

Screenshots

System information

• OS: macOS
• Browser: Chrome

Additional context

I'm using Typescript 5.6.3 and webpack 5.96.1.

[payner35]

This library is no longer maintained. You'll need to pull your products directly from Firestore.

const productsRef = collection(db, "products");
const productsSnapshot = await getDocs(productsRef);

[capelski]

This library is no longer maintained. You'll need to pull your products directly from Firestore.

const productsRef = collection(db, "products"); const productsSnapshot = await getDocs(productsRef);

Such a shame! The Firebase extension still points to this repository, and the root README.md suggests that Invertase is now maintaing the library.

[thetwentyseven]

Hi @capelski, does your last commit here 5bc47fa allow us to use this library correctly, or are there two separate issues?

I still do not understand where I can find the information that this library is no longer maintain.

[capelski]

Hi @capelski, does your last commit here 5bc47fa allow us to use this library correctly, or are there two separate issues?

I still do not understand where I can find the information that this library is no longer maintain.

Hi @thetwentyseven,

• My commit in Update POSTINSTALL.md firestore rules #655 is a fix to the Firestore security rules, it has nothing to do with the issue reported here. I had to apply such change in my project in order to retrieve documents from the products collection.

• I do not know about the library maintenance status, but @payner35 suggested it is not maintained.

[swiing]

@capelski , there is good chance you are using a firebase version that is incompatible with the stripe-firebase-extensions. You could try to revert to old firebase versions:
"@firebase/app": "^0.11.4",
"@firebase/auth": "^1.10.0",
"@firebase/firestore": "^4.7.10"

@thetwentyseven , there is no official communication that this is not maintained, but there is evidence, based on lack of meaningful commits over the past year, lack of support, lack of communication, and everybody facing issues (such as capelski)

[thetwentyseven]

I am sorry to ask @swiing but how do I do that? in my package.json I do not see any of those packages, either in root or functions folder.

[swiing]

You may replace "firebase" in your dependencies by the above.
Alternatively, I did the opposite: I updated the sdk extension to use the latest firebase (the same as my code).

No matter what, you want your code and the extension to use the same firebase modules in the end, otherwise firebase is confused (and ends up with the above error).

But in any case, this is not ideal: relying on older version is not future proof; relying on newer version is risky as it has not been properly tested and there might be breaking changes.

[capelski]

@swiing We could certainly get away with using an older version of Firebase. However, since the implemented functionality is so simple, I don't think it is worth it. I am going with @payner35's suggestion and querying Firestore directly. What a pitty the maintainers have gone AOL!

[thetwentyseven]

Me too @capelski but the only issue I have is with createCheckoutSession, I transformed it to a manual version with httpsCallable:
const functionRef = httpsCallable(functions, 'ext-firestore-stripe-payments-createCheckoutSession');

but it is giving me a CORS error. The weird thing is that I did a similar transformation for createPortalLink and it is working great

const functionRef = httpsCallable(functions, 'ext-firestore-stripe-payments-createPortalLink');

[capelski]

Me too @capelski but the only issue I have is with createCheckoutSession, I transformed it to a manual version with httpsCallable: const functionRef = httpsCallable(functions, 'ext-firestore-stripe-payments-createCheckoutSession');

but it is giving me a CORS error. The weird thing is that I did a similar transformation for createPortalLink and it is working great

const functionRef = httpsCallable(functions, 'ext-firestore-stripe-payments-createPortalLink');

I don't think you need an httpsCallable function for checkout sessions. The following is working for me:

import { addDoc, collection, getFirestore, onSnapshot } from 'firebase/firestore';

const createCheckoutSession = async (userId: string): Promise<string> => {
  const checkoutSessionRef = await addDoc(
    collection(getFirestore(), 'customers', userId, 'checkout_sessions'),
    {
      /* ... */
    },
  );

  return new Promise<string>((resolve, reject) => {
    const unsubscribe = onSnapshot(checkoutSessionRef, (snapshot) => {
      const data = snapshot.exists() ? snapshot.data() : undefined;
      if (!data) {
        return;
      }

      if (data.error) {
        unsubscribe();
        reject(data.error);
      } else if (data.url) {
        unsubscribe();
        resolve(data.url);
      }
    });
  });
};

[thetwentyseven]

Hi @capelski

I forgot to tell you that it worked for me. Thank you very much!

createCheckoutSession = async (user) => {
        const checkoutSessionRef = await addDoc(
            collection(firestore, 'customers', user.currentUserUid, 'checkout_sessions'), {
                price: this.price,
                allow_promotion_codes: true,
                trial_period_days: 60,
                success_url: this.successUrl,
                cancel_url: this.successUrl,
                payment_method_collection: 'if_required',
                billing_address_collection: 'auto',
            });
        return new Promise((resolve, reject) => {
            const unsubscribe = onSnapshot(checkoutSessionRef, (snapshot) => {
                const data = snapshot.exists() ? snapshot.data() : undefined;
                if (data.error) {
                    unsubscribe();
                    reject(data.error);
                } else if (data.url) {
                    unsubscribe();
                    resolve(data);
                }
            });
        });
    };

And then:

const handleCheckout = async () => {
        try {
            setLoading(true);
            const data = await props.firebase.createCheckoutSession({currentUserUid});
            if (data.url){
                window.location.assign(data.url);
            } else{
                console.log(data)
            }
        } catch (error) {
            console.error("Error creating Stripe session:", error);
            if(error.details){
                console.log(error.details)
            }
        } finally {
            setLoading(false);
        }
    }