CODEWITHSUNDEEP
firebasevuejs3capacitor
papryk
papryk

Reputation: 464

Firebase Callable function not working inside capacitor

I'm trying to pack my Vue3 Firebase web app as a mobile android/ios app using capacitor. One of my first blocking issues is that callable firebase functions are not working - basically they are hanging once executed, never returning any success/error result.

App.vue:

<template>
  <div>
    <BaseButton @click="tryOnCall">try on call</BaseButton>
  </div>
</template>

<script setup lang="ts">
import { httpsCallable } from "firebase/functions";
// + getFunctions and firebaseApp imports

const tryOnCall = async () => {
  console.log("try on call function..."); // fires
  const code = "xxx";
  console.log("code acquired, attaching httpsCallable function..."); // fires
  const exchangeCodeForToken = httpsCallable(
    getFunctions(firebaseApp, "us-central1"),
    "authorization"
  );
  console.log("attempt to get the result..."); // fires
  const result = (await exchangeCodeForToken({
    code
  }));

  console.log("Result: ", result); <- never fires.
};

Inside regular browser, everything works as expected, and the function is visible in the network tab with all the results.

Inside capacitor however, nothing really happens, the result is not visible, and the function inside network tab is never shown (Im currently trying to pack it as an IOS app, so using xcode).

I've already spent a lot debugging the issue, one of the checks I've done was to make sure I'm not running into the cors issue with cloud functions; but first of all, I added capacitor://localhost origin to https functions, but that does not even matter because onCall function do not require setting up your own CORS options.

The code above is my minimal reproduction example, as I thought some other things are blocking the behavior.

My capacitor config is as simple as follows:

const config: CapacitorConfig = {
  appId: "com.appname.app",
  appName: "AppName",
  webDir: "dist",
  ios: {
    contentInset: "always"
  }
};

// Edit The same goes for the onAuthStateChanged callback from firebase, and I already checked this solution -> getAuth().onAuthStateChanged not called, async not resolving in capacitor? which is not working for me.

Upvotes: 0

Views: 78

Answers (1)

Shalin Okada
Shalin Okada

Reputation: 1

I have a similar issues. I'm using react, capacitor, firebase.

In my case, call function from web is working, but from ios, can't provide auth data. So request.user object in function is undefined.(I checked with functions log)

In this time, we should use onRequest functions.

Upvotes: 0

Related Questions