How do you setup emulators for apps initialized with initializeServerApp (NextJS 14)?

[maxijonson]

Hello, I recently followed the codelab for integrating Firebase with NextJS. After that worked, I started working on setting up emulators. For the client-side part, everything worked well as expected. However, on the server, I can't get emulators to work on an app created with initializeServerApp. This might be due to how the guide uses getServerApp, which initializes a new app on each call in order to pass an authIdToken to it.

I was able to make emulators work on the server by moving the initialization outside of the getServerApp function. However, this prevents me from passing the authIdToken

const firebaseServerApp = initializeServerApp(firebaseConfig, {});

const auth = getAuth(firebaseServerApp);
connectAuthEmulator(auth, "http://localhost:9099"); // Works, but cannot be used with an authIdToken

export async function getAuthenticatedAppForUser() {
  // const idToken = headers().get("Authorization")?.split("Bearer ")[1];
  // console.log('firebaseConfig', JSON.stringify(firebaseConfig));
  // const firebaseServerApp = initializeServerApp(
  //   firebaseConfig,
  //   idToken
  //     ? {
  //         authIdToken: idToken,
  //       }
  //     : {}
  // );

  // const auth = getAuth(firebaseServerApp);
  // connectAuthEmulator(auth, "http://localhost:9099"); // This will fail with auth/emulator-config-failed
  // await auth.authStateReady();

  return { firebaseServerApp, currentUser: auth.currentUser };
}

Has anyone been able to get emulators to work with initializeServerApp?

[maxijonson]

I have a tendency of spending days looking for a solution by myself, then finding one not long after I ask publicly for help 🙃

The reason this wasn't working was becore getAuthenticatedAppForUser was being called multiple times, and you can't connect an emulator more than once (hence the error). I initially thought that the error occurred on the very first call, but it ended up being on the second call.

The way I solved this was by checking if the emulator is enabled. Each component has their own way of doing so, but here's how I'm doing it for Auth, Firestore and Database:

export async function getAuthenticatedAppForUser() {
  const idToken = headers().get("Authorization")?.split("Bearer ")[1];
  const firebaseServerApp = initializeServerApp(
    firebaseConfig,
    idToken
      ? {
          authIdToken: idToken,
        }
      : {}
  );

  const auth = getAuth(firebaseServerApp);
  const firestore = getFirestore(firebaseServerApp);
  const db = getDatabase(firebaseServerApp);

  if (
    process.env.NEXT_PUBLIC_VERCEL_ENV === "development" &&
    process.env.NEXT_PUBLIC_USE_EMULATORS === "true"
  ) {
    const emulatorHost = process.env.NEXT_PUBLIC_EMULATOR_HOST || "127.0.0.1";
    if (!auth.emulatorConfig) {
      connectAuthEmulator(auth, `http://${emulatorHost}:9099`, {
        disableWarnings: true,
      });
    }
    if (!(firestore.toJSON() as any).settings.host.includes(emulatorHost)) {
      connectFirestoreEmulator(firestore, emulatorHost, 8080);
    }
    if (!(db as any)._repoInternal.repoInfo_.isUsingEmulator) {
      connectDatabaseEmulator(db, emulatorHost, 9000);
    }
  }

  await auth.authStateReady();
  return { auth, firestore, db };
}

I haven't used this thoroughly yet though, but I wouldn't be surprised if this has some drawbacks...

Leaving this post open in case anyone has a better suggestion

[lucasoares]

I tried to do the same as you but I can't make the emulator to work after user login even tho I double checked all environment variables and emulators ports..

FirebaseServerApp could not login user with provided authIdToken:  Error [FirebaseError]: Firebase: Error (auth/network-request-failed).

Also, do you know how to check if storage is connected to the emulator? Your examples only have auth, firestore and storage haha

I don't believe they don't have a better way to do this to be honest

[MILLERMARRU]

The root cause is that initializeServerApp creates a new app instance on every call, and you cannot attach an emulator to the same service more than once — Firebase throws auth/emulator-config-failed on the second attempt.

Fix: guard the connectXxxEmulator calls with an "already configured" check.

import { initializeServerApp } from 'firebase/app';
import { getAuth, connectAuthEmulator } from 'firebase/auth';
import { getFirestore, connectFirestoreEmulator } from 'firebase/firestore';
import { getDatabase, connectDatabaseEmulator } from 'firebase/database';

export async function getAuthenticatedAppForUser(authIdToken?: string) {
  const firebaseServerApp = initializeServerApp(
    firebaseConfig,
    authIdToken ? { authIdToken } : {}
  );

  const auth = getAuth(firebaseServerApp);

  if (process.env.NODE_ENV === 'development') {
    // Guard: only connect if not already connected
    if (!auth.emulatorConfig) {
      connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
    }

    const db = getFirestore(firebaseServerApp);
    // Firestore does not expose emulatorConfig, check the internal host instead
    if (!(db as any)._settings?.host?.includes('localhost')) {
      connectFirestoreEmulator(db, '127.0.0.1', 8080);
    }

    const rtdb = getDatabase(firebaseServerApp);
    // RTDB: check if emulator host is already set
    if (!(rtdb as any).repo_.repoInfo_.isCustomHost) {
      connectDatabaseEmulator(rtdb, '127.0.0.1', 9000);
    }
  }

  await auth.authStateReady();
  return { firebaseServerApp, currentUser: auth.currentUser };
}

Why the guards look different per service:

• Auth exposes auth.emulatorConfig (null if not connected) — clean check.
• Firestore stores the host in internal _settings — use the localhost check.
• RTDB uses repoInfo_.isCustomHost internally.

Tested with Next.js 14 App Router + Firebase 10.x emulator suite.