Cors problem with Firebase Stripe extension

Question

I am trying to build an app in vue 3 with Firebase and the stripe extension. I encounter a cors problem when i want to open a customer portal using a cloud function.

here is the code in my vue app

<script>
import { getFunctions, httpsCallable } from "firebase/functions";

export default {
  props: ["subscription"],

  data() {
    return {
      isLoading: false,
    };
  },

  methods: {
    async openCustomerPortal() {
      this.isLoading = true;
      const functions = getFunctions();
      const functionRef = httpsCallable(
        functions,
        "ext-firestore-stripe-payments-createPortalLink"
      );
      const { data } = await functionRef({
        returnUrl: window.location.origin,
      });
      window.location.assign(data.url);
    },
  },
};
</script>

I found in the firebase doc that you need to write the location as the second parameter of the getfunction like this const functions = getFunctions(firebaseApp, "location");

I get a little confused at how to get the firebaseApp instance. I try to import it from my firebase.js file where the config is but somehow it is not right.

Could someone help me with this?

Thanks in advance

Answer 1

I have found my answer : In my code, i missed an import import { firebaseApp } from "../firebase"; wich import the firebaseApp instance from my firebase.js configuration file.

The entire code that works now is the following :

<script>
import { getFunctions, httpsCallable } from "firebase/functions";
import { firebaseApp } from "../firebase";

export default {
  props: ["subscription"],

  data() {
    return {
      isLoading: false,
    };
  },

  methods: {
    async openCustomerPortal() {
      this.isLoading = true;
      const functions = getFunctions(firebaseApp, "europe-west6");
      const functionRef = httpsCallable(
        functions,
        "ext-firestore-stripe-payments-createPortalLink"
      );
      const { data } = await functionRef({
        returnUrl: window.location.origin,
      });
      window.location.assign(data.url);
    },
  },
};
</script>