Can't get firestore emulator working with ngrok

[pyramid-scheme-ceo]

Hi all, just wondering if anyone has successfully managed to use the firestore emluator with ngrok?

My setup is:

• iPhone 11 (real, not emulated).
• Macbook Pro (2013, currently on Big Sur) running a few firebase emulators (auth, functions, firestore).
• Ngrok running on the macbook, allowing tunneling from the phone to the laptop (for connecting to the emulators).

It's worth noting that:

1. This is an expo project.
2. I am using the same kind of set up (phone -> ngrok -> emulator) for the auth emulator, which is working without issues.
3. With the exception of data-access.ts in the example below, there are no imports from @react-native-firebase/firestore (although there are imports to other sub-packages in other parts of the app in case that would affect things).
4. I can reach the firestore emulator via the ngrok URLs (e.g. response when connecting below).

My minimum-reproducible example is as follows:

// App.tsx

import React, { FC, useEffect, useState } from 'react';
import { getDb } from './data-access';
import { View, Text } from 'react-native';

const App: FC = () => {
  const db = getDb();
  const [text, setText] = useState('');

  useEffect(() => {
    db.collection('users').doc().get()
      .then(result => setText(JSON.stringify(result.data())))
      .catch((err) => console.error(err));
  }, [])

  return (
    <View>
      <Text>
        {text || 'Loading...'}
      </Text>
    </View>
  )
};

// data-access.ts (including all the formats of host & port I've tried)

import firestore, { FirebaseFirestoreTypes } from '@react-native-firebase/firestore';
import { getConstants } from './constants';

export function getDb(): FirebaseFirestoreTypes.Module {
    const constants = getConstants();
    const firestoreModule = firestore();

    if (constants.useEmulator) {
        firestoreModule.useEmulator(constants.dbHost, constants.dbPort);
        // firestoreModule.useEmulator('https://22a3-180-150-112-211.ngrok.io', 443);
        // firestoreModule.useEmulator('22a3-180-150-112-211.ngrok.io', 443);
        // firestoreModule.useEmulator('http://22a3-180-150-112-211.ngrok.io', 80);
        // firestoreModule.useEmulator('22a3-180-150-112-211.ngrok.io', 80);
        // firestoreModule.useEmulator('22a3-180-150-112-211.ngrok.io/', 80);
    }

    return firestoreModule;
}

When running the app (with any of those URL formats), I get the following error:

Error
17:37
[firestore/unavailable] The service is currently unavailable. This is a most likely a transient condition and may be corrected by retrying with a backoff.

Stack trace:
  src/App.tsx:20:4 in useEffect$argument_0

Which I'm taking to mean some sort of inability to reach the emulator 😞

Here's my firebase/ngrok setup in case I'm missing something obvious too:

[mikehardy]

Looking at old issues / discussions: this is not new information for you, as I believe you discovered the root cause yourself, but in firebase.json you may set the host to '0.0.0.0' to listen on all interfaces, and then I think you may connect?

[djabif]

@pyramid-scheme-ceo were you able to solve this?