Firebase Authentication Emulator UI in docker container doesn't work on localhost

Question

I have this dockerfile:

FROM node:16

ADD . /src
WORKDIR /src
# Install OpenJDK-11
RUN echo 'deb http://ftp.debian.org/debian stretch-backports main' | tee /etc/apt/sources.list.d/stretch-backports.list

RUN apt-get update && \
    apt-get install -y openjdk-11-jre-headless && \
    apt-get clean;
RUN npm i -g firebase-tools
RUN firebase --version
EXPOSE 9099 4000

I have this firebase.json:

{
  "emulators": {
    "auth": {
      "port": 9099
    },
    "ui": {
      "enabled": true,
      "port": 4000
    }
  }
}

I have this docker-compose file:

version: "3.0"
services:
  firebase:
    build:  
      context: .
      dockerfile: Dockerfile.firebase-emulator
    volumes:
      - ./fb-data:/src
    ports:
      - "9099:9099"
      - "4000:4000"
    stdin_open: true
    tty: true

Then I run docker exec -it <container-id> sh and start running these commands inside:

1. firebase login --no-localhost
2. firebase emulators:start --project demo-test

The result is this:

When I access in the browser the http://localhost:4000/auth the result is:

Is there something wrong with the exposed docker ports?

Thx for any help!

Harrow

Answer 1

After more digging, to make this work, the firebase.json needs to have the "host" attribute:

{
  "emulators": {
    "auth": {
      "port": 9099,
      "host": "0.0.0.0"
    },
    "ui": {
      "enabled": true,
      "host": "0.0.0.0",
      "port": 4000
    }
  }
}

Harrow

The problem with this approach is that Realtime Database won't work, since it will call 0.0.0.0 and not 127.0.0.1. I'm currently searching for a way to put the Firebase services into a container and also be able to properly use them. – Ked

any updates on this @RicardoPassos ? – Lorrianelorrie

Answer 2

I ran into the same problem recently, and my logs were filled with warnings like:

ui: Error when trying to check port 4000 on ::1: Error: listen EADDRNOTAVAIL: address not available ::1:4000

It turns out that this issue is tied to how Docker handles IPv6 and IPv4. You can dive deeper into the details here.

Although I couldn't solve the problem directly, I did stumble upon a Docker configuration that seems to work, following this guide & repo.

Note: this will not work immediately when you run this. You should run firebase login --no-localhost and firebase init in the container shell. This will connect you to existing/new firebase project you have and setup the firebase configuration files, depending on your choices.

Dockerfile would look like:

# Start with a Node.js base image
FROM node:20-alpine

# Install necessary packages
RUN apk --no-cache add openjdk11-jre bash curl openssl gettext nano nginx sudo \
    && npm cache clean --force \
    && npm install -g firebase-tools@$FIREBASE_VERSION

# Copy the nginx configuration file from your project directory to the container
COPY nginx.conf /etc/nginx/nginx.conf

# Copy the serve.sh script into the container and ensure it is executable
COPY serve.sh /usr/local/bin/serve.sh
RUN chmod +x /usr/local/bin/serve.sh

# Set the working directory
WORKDIR /srv/firebase

# Copy the rest of your application (firebase directory contents)
COPY . /srv/firebase

# Expose the ports used by your services
EXPOSE 4000 4400 4600 5001 8080 8085 9000 9099 9199 6000

# Define the command to run your application
CMD ["/usr/local/bin/serve.sh"]

docker-compose.yaml:

version: '3.8'
services:
  emulator:
    build:
      context: ./firebase
      dockerfile: Dockerfile
      args:
        - FIREBASE_VERSION=13.6.0
    stop_grace_period: 1m
    environment:
      FIREBASE_AUTH_EMULATOR_HOST: "localhost:9099"
      FIRESTORE_EMULATOR_HOST: "localhost:8080"
      PUBSUB_EMULATOR_HOST: "localhost:8085"
      FUNCTIONS_EMULATOR_HOST: "localhost:5001"
      FIREBASE_PROJECT: "test-project"
      GCLOUD_PROJECT: "test-project"
      FORCE_COLOR: 'true'
      DATA_DIRECTORY: "data"
      CHOKIDAR_USEPOLLING: 'true'
    ports:
      - "4000:4001" # ui
      - "4400:4401" # hub
      - "4600:4601" # logging
      - "5001:5002" # functions
      - "8080:8081" # firestore
      - "8085:8086" # pubsub
      - "9000:9001" # database
      - "9099:9100" # auth
      - "9199:9200" # Storage
      - "6000:6001" # Hosting
    volumes:
      - ./firebase:/srv/firebase:rw
      - ./firebase/cache:/root/.cache/:rw
      - ~/.config/:/root/.config
      - ./firebase/data:/srv/firebase/data:rw

You should end up with something like

Also, if functions are not working at first. Go into the functions directory and run npm run build. Even if you get errors, go back into /srv/firebase and restart the emulators.

Flambeau