Any way to make vue-fire work with Ionic ?

[mrleblanc101]

Currently, my app run in the browser.
I recently tried to port it to Ionic to make a native iOS/Android version.
Ionic has a dev mode in the browser, and I've been able to make everything work.
When I finally try to launch the app in the iOS Simulator, I get this error:

TypeError: undefined is not an object (evaluating 'gapi.iframes.getContext')

There are some discussion around this on the web, this is because Firebase modular SDK doesn't directly support Capacitor, only Cordova. See this issue: firebase/firebase-js-sdk#5019

Some propose using getAuth directly but in VueFire we load a VueFireAuth as a module instead so I'm not sure how I could use this.
https://harryherskowitz.com/2021/08/23/firebase-capacitor.html

There seem to be a lot of discussion around the same issue in the AngularFire repo angular/angularfire#3087, someone say that add iosScheme: "ionic" to capacitor.config.ts should make Firebase think it's running on Cordova and fix the issue, but I was not able to make it work.

[chrisspiegl]

Hi @mrleblanc101 , did you end up figuring out how to use vuefire with auth and all in the capacitor bundle? I am currently researching & testing the same thing and have yet to find a solution.

The most confusing part for me: when I run on an iPad device, I do not see these issues. But on my iPhone (same iOS version) it does show the TypeError: undefined is not an object (evaluating 'gapi.iframes.getContext') issue. It's really strange.

[chrisspiegl]

For anyone finding this issue with Nuxt + Capacitor + VueFire Auth + iOS (may also work with Ionic since the underlying tech is the same):

I was able to no longer get the TypeError: undefined is not an object (evaluating 'gapi.iframes.getContext') by disabling the vuefire popupRedirectResolver:

nuxt.config.ts

vuefire: {
  auth: {
    enabled: true,
    sessionCookie: false, // <--- disable session cookie for mobile app since there is no server
    persistence: ['indexedDBLocal'],
    popupRedirectResolver: false, // <--- disable popup redirect resolver
  }
}

I then set up @capacitor-firebase/authentication to actually handle the login on mobile devices, do so differently than the login on the web (differentiated via Capacitor.isNativePlatform()), and then use the returned token to authenticate the vuefire auth session. This differentiation I am fine with, since it means I can keep using useCurrentUser() and similar helper functions from vuefire.