auth/invalid-api-key error will occur if it is not set, even when using the auth emulator

[ishowta]

[REQUIRED] Describe your environment

• Operating System version: Windows 10
• Browser version: _____
• Firebase SDK version: 9.13.0
• Firebase Product: auth

[REQUIRED] Describe the problem

same as #4882
related to 5218

When using the auth emulator, apikey probably should not be necessary, but an auth/invalid-api-key error will occur if it is not set.

FirebaseError: Firebase: Error (auth/invalid-api-key).

       7 | });
       8 | export const firestore = getFirestore(app);
    >  9 | export const auth = getAuth(app);
         |                            ^
      10 |
      11 | connectFirestoreEmulator(firestore, 'localhost', 8080);
      12 | connectAuthEmulator(auth, 'http://localhost:8081');

      at createErrorInternal (node_modules/.pnpm/@firebase+auth@0.20.11_@firebase+app@0.8.3/node_modules/@firebase/auth/src/core/util/assert.ts:142:44)
      at _assert (node_modules/.pnpm/@firebase+auth@0.20.11_@firebase+app@0.8.3/node_modules/@firebase/auth/src/core/util/assert.ts:167:30)
      at node_modules/.pnpm/@firebase+auth@0.20.11_@firebase+app@0.8.3/node_modules/@firebase/auth/src/core/auth/register.ts:68:11
      at Component.instanceFactory (node_modules/.pnpm/@firebase+auth@0.20.11_@firebase+app@0.8.3/node_modules/@firebase/auth/src/core/auth/register.ts:95:10)
      at Provider.Object.<anonymous>.Provider.getOrInitializeService (node_modules/.pnpm/@firebase+component@0.5.21/node_modules/@firebase/component/src/provider.ts:318:33)
      at Provider.Object.<anonymous>.Provider.initialize (node_modules/.pnpm/@firebase+component@0.5.21/node_modules/@firebase/component/src/provider.ts:242:27)
      at initializeAuth (node_modules/.pnpm/@firebase+auth@0.20.11_@firebase+app@0.8.3/node_modules/@firebase/auth/src/core/auth/initialize.ts:66:25)
      at getAuth (node_modules/.pnpm/@firebase+auth@0.20.11_@firebase+app@0.8.3/node_modules/@firebase/auth/src/platform_node/index.ts:50:16)
      at Object.<anonymous> (test/firebase.ts:9:28)

When I put a random value in apiKey it seems to work fine.

export const app = initializeApp({
  projectId: 'test',
  apiKey: 'test'
});

The check for apiKey is done on the client side, which was appended before the auth emulator was created, so it is probably not needed.
https://github.com/firebase/firebase-js-sdk/blob/master/packages/auth/src/core/auth/register.ts#L68-L71

Steps to reproduce:

Initialize auth without specifying apiKey in initializeApp

Relevant Code:

import { connectAuthEmulator, getAuth } from 'firebase/auth';
import { initializeApp } from 'firebase/app';

export const app = initializeApp({
  projectId: 'test',
});
export const auth = getAuth(app); // <- error here

connectAuthEmulator(auth, 'http://localhost:8081');

[jbalidiong]

Hi @ishowta, thanks for bringing this to our attention. I was able to reproduce the behavior. Let me check what we can do for this issue or bring someone here that can provide more context about it. I’ll update this thread if I have any information to share.

[osttra-j-joyce]

This is still a problem; it means that the firebase emulators cannot work without a real existing firebase GCP project - ie they cannot work standalone.

I presume this also means no offline development, no sandbox testing etc... Which is a bit of a shame - I would have preferred the test environment to be completely isolated from Google Cloud (perhaps on a switch if both behaviours are require)

[drewbkil]

for some reason this has been an issue for me as well... until now
the way around this is to
apiKey: process.env.FIREBASE_API_KEY || "PUT_IN_A_DUMMY_API_KIEY"
put in a dummy api key like this and it worked for me

[ben-hamel]

Would really like to see Firebase's documentation improved for the demo option. Would be ideal to show users how to get setup with a demo project without a pre-existing project.

[osttra-j-joyce]

Hi Ben,

Actually - now its working ok...

Versions;

• "firebase": "^10.12.0",
• "firebase-admin": "^12.1.0",
• "firebase-functions": "^5.0.0",

When I run the emulators I specify the demo project:
"npm run build && firebase emulators:start --project demo-xxx --only=auth,functions,firestore,storage

And I don't provide any more config - in the functions startup its just:
const app = admin.initializeApp();

[leonardobandeira]

Personally, I solved my case with template string in the key. I don't know why, but the env value was not working when passed to the object.

[r1zaac]

Okay so I was having the same problem. Following steps helped me:

• Stop the dev server

• make sure your .env file looks exactly the same:

VITE_FIREBASE_API_KEY=yourVITE_FIREBASE_API_KEY
VITE_FIREBASE_AUTH_DOMAIN=yourVITE_FIREBASE_AUTH_DOMAIN
VITE_FIREBASE_PROJECT_ID=yourVITE_FIREBASE_PROJECT_ID
VITE_FIREBASE_STORAGE_BUCKET=yourVITE_FIREBASE_STORAGE_BUCKET
VITE_FIREBASE_MESSAGING_SENDER_ID=yourVITE_FIREBASE_MESSAGING_SENDER_ID
VITE_FIREBASE_APP_ID=yourVITE_FIREBASE_APP_ID

(yes no ""/'' or spaces)

• and firebase.js (config) as follows:

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

(optional)

console.log("auth key", import.meta.env.VITE_FIREBASE_API_KEY);
console.log(import.meta.env);

• Clear cache
  npm cache clean --force

• Start the dev server again
  npm run dev
  or whatever package you're using.

Hope this helps