Firestore emulator not supporting HTTP2 / gRPC

Environment info

firebase-tools: 8.6.0

Platform: macOS Catalina 10.15.6

Test case

import firestore from '@react-native-firebase/firestore';
firestore().settings({host: 'abc123.ngrok.io', ssl: true});

...

componentDidMount = async () => {
  firestore().collection('users').add({name: 'Sam'});
}

Steps to reproduce

Run firebase emulators:start.

Run ngrok.

authtoken: xxxx
tunnels:
  firestore:
    addr: 8080
    proto: http
    bind-tls: true

Run the app with ngrok host.

Expected behavior

A user is created in the local Firestore instance.

Actual behavior

No user is created. After some investigation, it seems that the emulator is not using HTTP/2 and therefore not able to support the gRPC protocol required for Firestore. The emulator is running, I can modify the Firestore data through the local UI web interface, and if I hit the ngrok link from a browser I get the “Ok” response.

[troyshu]

The tip in this comment to turn on a VPN helped me fix this issue. My specific issue was that my Flutter app when used on a mobile device was not connecting to my local Firestore emulator, emitting the same errors here. Maybe the root cause is because I have a multi-router config with DHCP on 🤷

Steps to my fix:

1. Turn on VPN.

Option 1:

1. Follow the tips here and tell the Firestore emulator to use host “0.0.0.0” in firebase.json in the directory for your Firebase project e.g.

"emulators": {
    "firestore": {
      "port": 8080,
     "host": "0.0.0.0"
    },
}

1. In your Flutter app’s code, use your local computer’s IP address which will look like 192.168.x.xx. e.g. FirebaseFirestore.instance.useFirestoreEmulator('192.168.x.xx', 8080);

Option 2:

1. Leave the “host” field out in firebase.json for your Firestore emulator
2. Use ngrok (or something similar) to tunnel TCP traffic at a specific port to your local Firestore emulator address (see tip here).
3. In your Flutter app’s code, use the address (and port) that ngrok will give you for the TCP tunnel, will look like 1.tcp.ngrok.io:[port]. e.g. FirebaseFirestore.instance.useFirestoreEmulator('1.tcp.ngrok.io', [port]);

Remember to make sure your Firestore emulator’s security rules are set up to allow the queries you’re making. Also make sure that your Flutter app is connecting to the same project-id that the Firestore emulator is running for. e.g. if you’re using the Flutterfire CLI to configure Firebase for your Flutter project, make sure the project-ids in the generated firebase_options.dart in your Flutter project direcotry match the project-id in the .firebaserc in your Firebase project’s directory.

[emileswain]

Going to share my implementation as it adds in the specific detail for configuring ngrok with Firebase Emulator with Android project building to device. I experienced all the above issues as well as some others. But the above post solved the main issue, which was I was setting ngrok to expect use of its http protocol from firebstore, but infact firestore was expecting tcp.

I launched the emulator like so.

 firebase emulators:start --import=./data --export-on-exit

//firebas.json
{
  "firestore": {
    "rules": "firestore/firestore.rules"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ],
    "source": "functions"
  },
  "emulators": {
    "functions": {
      "port": 5001,
      "host": "192.168.0.29"
    },
    "firestore": {
      "port": 8080,
      "host": "192.168.0.29"
    },
    "ui": {
      "enabled": true,
      "host": "192.168.0.29"
    },
    "auth": {
      "port": 9099,
      "host": "192.168.0.29"
    }
  }
}


...
┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://192.168.0.29:4000             │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬───────────────────┬────────────────────────────────────┐
│ Emulator       │ Host:Port         │ View in Emulator UI                │
├────────────────┼───────────────────┼────────────────────────────────────┤
│ Authentication │ 192.168.0.29:9099 │ http://192.168.0.29:4000/auth      │
├────────────────┼───────────────────┼────────────────────────────────────┤
│ Functions      │ 192.168.0.29:5001 │ http://192.168.0.29:4000/functions │
├────────────────┼───────────────────┼────────────────────────────────────┤
│ Firestore      │ 192.168.0.29:8080 │ http://192.168.0.29:4000/firestore │
└────────────────┴───────────────────┴────────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Below is my NGrok yml file. Note that the main fix here was to set the firestore proto to tcp.

authtoken: YourNgrokToaken

tunnels:
  yourProject-dev-ui:
    addr: 192.168.0.29:4000
    proto: http
    subdomain: yourProject-dev-ui
  yourProject-dev-functions:
    addr: 192.168.0.29:5001
    proto: http
    subdomain: yourProject-dev-functions
  yourProject-dev-auth:
    addr: 192.168.0.29:9099
    proto: http
    subdomain: yourProject-dev-auth
  yourProject-dev-firestore:
    addr: 192.168.0.29:8080
    proto: tcp  
    subdomain: yourProject-dev-firestore

Launched ngrok from same directory as my firebase cloud function project. Though obviously you can launch from anywhere.

& 'C:\Program Files\ngrok\ngrok.exe' start -config ngrok.config.yml --all

Forwarding                    tcp://6.tcp.ngrok.io:15252 -> 192.168.0.29:8080
Forwarding                    http://yourProject-dev-auth.ngrok.io -> http://192.168.0.29:9099
Forwarding                    https://yourProject-dev-auth.ngrok.io -> http://192.168.0.29:9099
Forwarding                    http://yourProject-dev-functions.ngrok.io -> http://192.168.0.29:5001
Forwarding                    https://yourProject-dev-functions.ngrok.io -> http://192.168.0.29:5001
Forwarding                    http://yourProject-dev-ui.ngrok.io -> http://192.168.0.29:4000
Forwarding                    https://yourProject-dev-ui.ngrok.io -> http://192.168.0.29:4000

Connections                   ttl     opn     rt1     rt5     p50     p90 

Then in a suitably early place for intialising FirebaseAuth, and FirebaseFireStore in my Flutter project. (i have this in main_dev.dart for my dev flavour.

Future<void> main() async {
...
  FirebaseAuth.instance.useAuthEmulator('yourProject-dev-auth.ngrok.io',80);//9099
  FirebaseFirestore.instance.useFirestoreEmulator('6.tcp.ngrok.io',16334);//8080
...
}

I had followed the above suggestions but lazily missed out the fact that i had to change the proto to tcp in my config file. An intermediate error i recieved, due to my half assed attempt to resolve the issue was.

Status{code=INTERNAL, description=error in frame handler, cause=java.io.IOException: FRAME_SIZE_ERROR: 4740180

This post made me realise i was passing http as the protocol when it was actually checking for tcp.

Anyway, i hope this helps others spend less time getting firebase up and running with Ngrok.

Note: I believe that both the following worked, in terms of an android device being able to work with the emulator. As long as they are on the same network.

 FirebaseFirestore.instance.useFirestoreEmulator('6.tcp.ngrok.io',16334);

 FirebaseFirestore.instance.useFirestoreEmulator('192.168.0.29.',8080);