Firebase Emulator with Capacitor live reload

[djabif]

Hey!
Thanks @robingenz for this amazing plugin 😊👏🏼

I'm building a ionic/angular app using firebase auth and everything works perfect.
I'm using the firebase emulator to test everything locally but I'm not able to set it up to work on my mobile device.

When I try to run the app on my iphone using capacitor live reload, I'm not able to load the firebase emulator.
I get this error whenever I try to log in: Network error (such as timeout, interrupted connection or unreachable host) has occurred.

I have the following code to init my firebase app.

public async initialize(): Promise<void> {
    if (this.platform.is('capacitor')) {
      return;
    }
    /**
     * Only needed if the Firebase JavaScript SDK is used.
     *
     * Read more: https://github.com/robingenz/capacitor-firebase/blob/main/packages/authentication/docs/firebase-js-sdk.md
     */
    initializeApp(environment.firebaseEmulator);
    await FirebaseAuthentication.useEmulator({
      host: `http://${location.hostname}`,
      port: 9099
    });
  }

So, what I tried is commenting out the capacitor conditional to use the js sdk (even if I'm on mobile) but I feel this is not the right path 😫.

Does anyone know how to configure everything so I can use the firebase emulator with Capacitor live reload?
Thanks 🙏

[robingenz]

Hey @djabif,
TBH: I haven't used this feature yet. It was a feature request from @tlebeitsuk once (see #19).
@tlebeitsuk Can you give a hint?
By the end of this year I'm working on a project where I will need the emulator myself. Then I will have a closer look at it.
However, the following things just pop into my head:

1. I guess useEmulator(...) should run not only on the web, but on all platforms.
   So I would try the following:

   public async initialize(): Promise<void> {
       await FirebaseAuthentication.useEmulator({
         host: `http://${location.hostname}`,
         port: 9099
       });
       if (this.platform.is('capacitor')) {
         return;
       }
       /**
        * Only needed if the Firebase JavaScript SDK is used.
        *
        * Read more: https://github.com/robingenz/capacitor-firebase/blob/main/packages/authentication/docs/firebase-js-sdk.md
        */
       initializeApp(environment.firebaseEmulator);
     }

2. Double check that location.hostname is the IP of your computer running the emulator.
3. The emulator should be reachable not only locally but also from external IPs so that the external test device can establish a connection (see https://stackoverflow.com/a/66618247/6731412).
4. Try removing the http://. I can't find that in the Firebase documentation for Android and iOS.

Feel free to let me know if any of this has helped you.

[djabif]

Thank you so much for your help Robin, I was able to make it work 👏🏼 🙏🏻

My problem was the http, it's only needed in the web environment, not in capacitor.
So my final initialization method looks like this:

public async initialize(): Promise<void> {
    const host = this.platform.is('capacitor') ? `${location.hostname}` : `http://${location.hostname}`;

    if (!this.platform.is('capacitor')) {
      /* Only needed if the Firebase JavaScript SDK is used.
       Read more: https://github.com/robingenz/capacitor-firebase/blob/main/packages/authentication/docs/firebase-js-sdk.md */
      initializeApp(environment.firebase);
    }
    await FirebaseAuthentication.useEmulator({
      host: host,
      port: 9099
    });
  }

Again, thanks for creating all these plugins, they are really helpful ❤️

[robingenz]

Thanks! 🙏 Glad to see that it is working now. I will add this to the documentation.

[robingenz]

@djabif I just released a new version that fixes this problem. You can now simply do the following:

public async initialize(): Promise<void> {
    if (!this.platform.is('capacitor')) {
      /* Only needed if the Firebase JavaScript SDK is used.
       Read more: https://github.com/robingenz/capacitor-firebase/blob/main/packages/authentication/docs/firebase-js-sdk.md */
      initializeApp(environment.firebase);
    }
    await FirebaseAuthentication.useEmulator({
      host: location.hostname,
      port: 9099
    });
  }

There is a new scheme option for the web (see #461) which is http by default.

[djabif]

Thanks ❤️ ❤️, you are awesome!