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