[🐛] useEmulator() unable to parse host and port from url

Issue

I’m trying to connect my app to Firebase auth emulator but getting error firebase.auth().useEmulator() unable to parse host and port from URL.

function onSignUp() {
    auth()
      .useEmulator('http://localhost:9099/')
      .createUserWithEmailAndPassword(email, 'SuperSecretPassword!')
      .then(() => {
        console.log('User account created & signed in!');
      })
      .catch((error) => {
        if (error.code === 'auth/email-already-in-use') {
          console.log('That email address is already in use!');
        }

        if (error.code === 'auth/invalid-email') {
          console.log('That email address is invalid!');
        }

        console.error(error);
      });
  }

Project Files

Javascript

Click To Expand

package.json:

# N/A

firebase.json for react-native-firebase v6:

# N/A

iOS

Click To Expand

ios/Podfile:

  • I’m not using Pods
  • I’m using Pods and my Podfile looks like:
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'

target 'AppName' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  target 'AppNameTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
  end
end

target 'AppName-tvOS' do
  # Pods for AppName-tvOS

  target 'AppName-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

AppDelegate.m:

// N/A

Android

Click To Expand

Have you converted to AndroidX?

  • my application is an AndroidX application?
  • I am using android/gradle.settings jetifier=true for Android compatibility?
  • I am using the NPM package jetifier for react-native compatibility?

android/build.gradle:

// N/A

android/app/build.gradle:

// N/A

android/settings.gradle:

// N/A

MainApplication.java:

// N/A

AndroidManifest.xml:

<!-- N/A -->

Environment

Click To Expand

react-native info output:

System:
    OS: macOS 11.0.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 200.47 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.18.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
    Android SDK:
      API Levels: 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.2/12B45b - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_275 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
  • Platform that you’re experiencing the issue on:
    • iOS
    • Android
    • iOS but have not tested behavior on Android
    • Android but have not tested behavior on iOS
    • [] Both
  • react-native-firebase version you’re using that has this issue:
    • 10.1.0
  • Firebase module(s) you’re using that has the issue:
    • auth
  • Are you using TypeScript?
    • Y & 3.8.3

1 possible answer(s) on “[🐛] useEmulator() unable to parse host and port from url

  1. Example usages:

    firebase.auth().useEmulator(‘http://localhost:9099’);
    * @param url: emulator URL, must have host and port (eg, ‘http://localhost:9099’)

    The regex does not allow for that trailing slash:

    const hostPortRegex = /^http:\/\/([\w\d.]+):(\d+)$/;

    You could reach in there and alter the regex to optionally allow for a trailing slash if you like, to make it a little more robust and PR that if you want, but right now the docs and the regex line up and it should work if you remove the slash

[🐛] useEmulator() unable to parse host and port from url

Issue

I’m trying to connect my app to Firebase auth emulator but getting error firebase.auth().useEmulator() unable to parse host and port from URL.

function onSignUp() {
    auth()
      .useEmulator('http://localhost:9099/')
      .createUserWithEmailAndPassword(email, 'SuperSecretPassword!')
      .then(() => {
        console.log('User account created & signed in!');
      })
      .catch((error) => {
        if (error.code === 'auth/email-already-in-use') {
          console.log('That email address is already in use!');
        }

        if (error.code === 'auth/invalid-email') {
          console.log('That email address is invalid!');
        }

        console.error(error);
      });
  }

Project Files

Javascript

Click To Expand

package.json:

# N/A

firebase.json for react-native-firebase v6:

# N/A

iOS

Click To Expand

ios/Podfile:

  • I’m not using Pods
  • I’m using Pods and my Podfile looks like:
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'

target 'AppName' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  target 'AppNameTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
  end
end

target 'AppName-tvOS' do
  # Pods for AppName-tvOS

  target 'AppName-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

AppDelegate.m:

// N/A

Android

Click To Expand

Have you converted to AndroidX?

  • my application is an AndroidX application?
  • I am using android/gradle.settings jetifier=true for Android compatibility?
  • I am using the NPM package jetifier for react-native compatibility?

android/build.gradle:

// N/A

android/app/build.gradle:

// N/A

android/settings.gradle:

// N/A

MainApplication.java:

// N/A

AndroidManifest.xml:

<!-- N/A -->

Environment

Click To Expand

react-native info output:

System:
    OS: macOS 11.0.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 200.47 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.18.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
    Android SDK:
      API Levels: 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.2/12B45b - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_275 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
  • Platform that you’re experiencing the issue on:
    • iOS
    • Android
    • iOS but have not tested behavior on Android
    • Android but have not tested behavior on iOS
    • [] Both
  • react-native-firebase version you’re using that has this issue:
    • 10.1.0
  • Firebase module(s) you’re using that has the issue:
    • auth
  • Are you using TypeScript?
    • Y & 3.8.3

1 possible answer(s) on “[🐛] useEmulator() unable to parse host and port from url

  1. Example usages:

    firebase.auth().useEmulator(‘http://localhost:9099’);
    * @param url: emulator URL, must have host and port (eg, ‘http://localhost:9099’)

    The regex does not allow for that trailing slash:

    const hostPortRegex = /^http:\/\/([\w\d.]+):(\d+)$/;

    You could reach in there and alter the regex to optionally allow for a trailing slash if you like, to make it a little more robust and PR that if you want, but right now the docs and the regex line up and it should work if you remove the slash