Make vue-fire compatible with Ionic ?

[mrleblanc101]

What problem is this solving

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')

Proposed solution

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: https://github.com/firebase/firebase-js-sdk/issues/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 https://github.com/angular/angularfire/issues/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.

Describe alternatives you've considered

Not using VueFire for the authetification. But use vuefire only for the data.

[mrleblanc101]

I have a discussion here, but I haven't had a reply in a while. Feel free to close if I shouldn't have oppened this as a feature-request. I also asked in the VueLand Discord without luck.

[posva]

With nuxt, it's still not possible to change the persistence:

• https://github.com/vuejs/vuefire/issues/1351

Otherwise, you can conditionally pass the correct persistence value. This is unlikely related to the js SDK or VueFire.

[mrleblanc101]

I'm not using Nuxt. I'm using @ionic/vue starter template directly. But it seem like the same solution would apply.

[posva]

Since this seems to be working with the Nuxt module (https://github.com/vuejs/vuefire/issues/1351#issuecomment-1595407856), I suppose there is something to configure in your project but this is related to ionic + Firebase not VueFire. Checking out the source code of the nuxt ionic module should be helpful

[mrleblanc101]

@posva I'm not sure what you mean. The issue you linked to also state that it is not working since we cannot change to IndexDB persistance. I switched to using VueFire for my Firestore only and used a separate plugin for auth called @capacitor-firebase/authetification. But it seems like your update for yesterday in commit https://github.com/vuejs/vuefire/commit/28e940914dadc42878a25c2ff031aa9992ab8a3e could solve my problem too, but I have not had time to try it yet, I'll follow up once I do.

[mrleblanc101]

@posva Still not able to make it work with the latest change. You are right, the problem seems to come from Firebase itself really not liking Capacitor. Every comments I see mentioning Ionic with a solution are for older versions still using Cordova. I still have a few things to iron out but using VueFire for my Firestore binding and @capacitor-firebase/authetification for my auth seems to do the trick.

[pscheffer]

Any updates for getting @capacitor-firebase/authentication to work with VueFire for firestore @mrleblanc101? I still can't seem to appease xcode and get lots of warnings/errors and it finally errors out. I am going to try building on a fresh template to see if I can successfully get iOS to build but I'm confounded on the @capacitor-firebase/authentication instructions. It says to integrate the firebase SDK into your iOS and web app but in their working angular example, they do not do anything with the firstbase IOS SDK other than reference it in the podfile.

[mrleblanc101]

@pscheffer I got @capacitor-firebase/authentication working. I use the Web SDK using this config:

  plugins: {
    FirebaseAuthentication: {
      skipNativeAuth: true,
      providers: ["google.com"],
    },
  },

I also have this in my main.ts:

FirebaseAuthentication.addListener("authStateChange", (result) => {
    if(!app) {
        const pinia = createPinia()
        pinia.use(({ store }) => { store.router = markRaw(router) });

        app = createApp(App)
            .use(VueFire, {
                firebaseApp
            })
            .use(IonicVue)
            .use(pinia)
            .use(router);

        router.isReady().then(() => {
            app!.mount('#app');
        });
    }

    const store = useIndexStore();
    if (result.user) {
        store.user = result.user;
    }
});

[pscheffer]

},

@mrleblanc101 thank you -- that got me further than before. still running into sign in not actually doing anything.

When I attempt to log in, nothing is triggered after I call await FirebaseAuthentication.signInWithGoogle();

I'm handling login like this:

  const signInWithGoogle = async () => {
    try {
      const result = await FirebaseAuthentication.signInWithGoogle();
      const credential = GoogleAuthProvider.credential(result.credential?.idToken ?? '');
      await signInWithCredential(auth, credential);
    } catch (e) {
      console.log('error signing in with google', e)
    }
  };

Works in web, albeit using the popup vs redirect.. assuming that might be part of the issue.

1. Are you configuring Firebase in the iOS app? I reviewed the example Angular app and it doesn't look like there is any firebase initialization. I added the google plist file, but am not changing AppDelegate.swift. I get this warning in the console: 10.19.0 - [FirebaseCore][I-COR000003] The default Firebase app has not yet been configured. Add `FirebaseApp.configure()` to your application initialization. This can be done in in the App Delegate's application(_:didFinishLaunchingWithOptions:)` (or the `@main` struct's initializer in SwiftUI). Read more: https://goo.gl/ctyzm8. After making the changes to initialize Firebase in AppDelegate, I end up with a duplicate auth warning and it crashes.

2. Are you using the recommended getAuth mod, eg.

   
   import { getAuth, initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
   import { getApp } from 'firebase/app';
   import { Capacitor } from '@capacitor/core';

export const useAuth = () => { if (Capacitor.isNativePlatform()) { return initializeAuth(getApp(), { persistence: indexedDBLocalPersistence, }); } else { return getAuth(); } };

[pscheffer]

@mrleblanc101 I was able to sort it out as a misconfiguration as I recoded it all and its working for me on web and ios. Thank you for your shared setup!