FirebaseServerApp could not login user with provided authIdToken in Emulator

[caestrada]

Operating System

N/A

Browser Version

N/A

Firebase SDK Version

10.12.2

Firebase SDK Product:

Auth

Describe your project's tooling

Next.js using TypeScript using App Hosting.

Describe the problem

When using the Emulator and initializing server side with initializeServerApp, getAuth returns null. Client side initializing and retrieval of auth instance with getApps works as expected.

Server side is dependent on a service worker appending a token to the header. This process is working as expected. Only problem seems to be server side never returning an accurate auth instance.

Note: This issue only occurs when using the Emulator. When running directly against the firebase server, everything works fine.

Server Error:

FirebaseServerApp could not login user with provided authIdToken:  FirebaseError: Firebase: Error (auth/invalid-user-token).
    at createErrorInternal (webpack-internal:///(rsc)/./node_modules/firebase/node_modules/@firebase/auth/dist/node-esm/totp-7e96920d.js:615:41)
    at _fail (webpack-internal:///(rsc)/./node_modules/firebase/node_modules/@firebase/auth/dist/node-esm/totp-7e96920d.js:593:11)
    at _performFetchWithErrorHandling (webpack-internal:///(rsc)/./node_modules/firebase/node_modules/@firebase/auth/dist/node-esm/totp-7e96920d.js:1051:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async AuthImpl.initializeCurrentUserFromIdToken (webpack-internal:///(rsc)/./node_modules/firebase/node_modules/@firebase/auth/dist/node-esm/totp-7e96920d.js:2753:30)
    at async eval (webpack-internal:///(rsc)/./node_modules/firebase/node_modules/@firebase/auth/dist/node-esm/totp-7e96920d.js:2717:13) {
  code: 'auth/invalid-user-token',
  customData: {}
}

Steps and code to reproduce issue

Service Worker

Here is the fetch event listener in the service worker and relevant methods. Notice that I configure the emulator in the service worker so that a valid token is added to header. THIS CODE IS WORKING AS EXPECTED.

const firebaseConfig = {
  ..
};

let emulatorsStarted = false;

self.addEventListener("fetch", async (event) => {
  const fetchEvent = event as FetchEvent;

  const { origin } = new URL(fetchEvent.request.url);
  if (origin !== self.location.origin) return;

  fetchEvent.respondWith(fetchWithFirebaseHeaders(fetchEvent.request));
});

async function fetchWithFirebaseHeaders(request: Request) {
  if (!firebaseConfig) {
    return await fetch(request);
  }

  const firebaseApp = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
  const installations = getInstallations(firebaseApp);
  const auth = getAuth(firebaseApp);
  const firestore = getFirestore(firebaseApp);

  startEmulatorsForDevEnvironments(auth, firestore);

  const [authIdToken, installationToken] = await Promise.all([
    getAuthIdToken(auth),
    getToken(installations),
  ]);

  const headers = new Headers(request.headers);
  headers.append("Firebase-Instance-ID-Token", installationToken);
  if (authIdToken) {
    headers.append("Authorization", `Bearer ${authIdToken}`);
  }
  const newRequest = new Request(request, { headers });
  return await fetch(newRequest);
}

function startEmulatorsForDevEnvironments(a: Auth, firestore: Firestore) {
  if (process.env.NODE_ENV !== "development" || emulatorsStarted) {
    return;
  }

  emulatorsStarted = true;
  try {
    // connectFirestoreEmulator(firestore, "127.0.0.1", 8080);

    const authUrl = "http://127.0.0.1:9099";
    // const res = await fetch(authUrl);
    connectAuthEmulator(a, authUrl);
  } catch (error) {
    console.error("SW Failed to connect to the Firestore emulator", error);
  }
}

Server Code

Here is the initialization server side. NOTE the NULL IS RETURN HERE comment.

let emulatorsStarted = false;
async function setupEmulators(a: Auth, firestore: Firestore) {
  // process.env.FIREBASE_AUTH_EMULATOR_HOST = "http://127.0.0.1:9099";
  if (process.env.NODE_ENV !== "development" || emulatorsStarted) {
    return;
  }

  emulatorsStarted = true;

  try {
    connectFirestoreEmulator(firestore, "127.0.0.1", 8080);

    const authUrl = "http://127.0.0.1:9099";
    await fetch(authUrl);
    connectAuthEmulator(a, authUrl, { disableWarnings: true });
  } catch (error) {
    console.info("🔥 Firebase Auth: not emulated", error);
  }
}

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

  const auth = getAuth(firebaseServerApp); // NULL IS RETURN HERE

  await auth.authStateReady();
  const db = getFirestore(firebaseServerApp);

  await setupEmulators(auth, db);

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

[DellaBitta]

Hi @caestrada,

I believe your issue is due to the app awaiting authStateReady() before connecting the emulator. Auth instances initialized with an instance of FirebaseServerApp that includes an authIdToken will attempt to sign in the user almost immediately, and authStateReady() won't complete until this attempt finishes.

There is a window to configure the Auth emulator with use of FirebaseServerApp, however. Auth will wait for 1 tick before attempting to sign in the user. The 1 tick wait is specifially for provide apps enough time to configure the emulator.

So my suggestion is to connect your emulator immediately following the call to getAuth().

Something like this:

 const auth = getAuth(firebaseServerApp);
 setupEmulators(auth, db);
 await auth.authStateReady();
 const db = getFirestore(firebaseServerApp);

Also, is there a reason for this statement in setupEmulators()?

await fetch(authUrl);

Any asynchronous request (in this case fetch) in between creating an instance of Auth and connecting an Auth emulator will lose in a similar race condition for reasons mentioned above.

In short, call connectAuthEmulator() immediately following calling getAuth(firebaseServerApp) and you should be in a good spot.

[caestrada]

Hey @DellaBitta, that did it! Thanks! 🎉
Working like a charm now. Maybe I missed something in the docs, but it wasn't oblivious to me until now.

As for the await fetch(authUrl); that was just me testing and experimenting with Stackoverflow solutions.

Thanks again for the quick response and solution.

Kudos to the team for App Hosting, Data Connect and Genkit. Game changer!

[DellaBitta]

Thanks! I'll close this issue. Let us know if anything else pops up!