`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

[rorunsolu]

Man this is stupid. Turns out to fix the problem is to do what r1zaac mentioned above but then also delete the .env file and then recreate it the exact same as before and then restart the dev server...

I found this out here https://answers.netlify.com/t/env-firebase-api-key-returns-undifined/69490/5

[hsubox76]

It looks like we might be talking about at least 2 different problems in this issue. The first few posts seem to revolve around a case where the users don't want to use a real project at all when working with the emulators. In that case, the demo option here: https://firebase.google.com/docs/emulator-suite/use_hosting#choose_a_firebase_project seems like it's what you're looking for. When you start the emulators, specify a project option, which can be any string that starts with demo- like firebase emulators:start --project demo-test

The second problem seems to be related to having trouble getting values from an .env file and making sure that your build tooling handles caching of that file the way you want, which doesn't seem related to Firebase? If you feel it is an issue with the Firebase SDK, however, let us know why, and create a separate issue for it.

If anyone's having trouble with trying to use demo- projects, post in this issue.