firebase-js-sdk icon indicating copy to clipboard operation
firebase-js-sdk copied to clipboard

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

Open ishowta opened this issue 3 years ago • 7 comments

[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/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/util/assert.ts:142:44)
      at _assert (node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/util/assert.ts:167:30)
      at node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/auth/register.ts:68:11
      at Component.instanceFactory (node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/auth/register.ts:95:10)
      at Provider.Object.<anonymous>.Provider.getOrInitializeService (node_modules/.pnpm/@[email protected]/node_modules/@firebase/component/src/provider.ts:318:33)
      at Provider.Object.<anonymous>.Provider.initialize (node_modules/.pnpm/@[email protected]/node_modules/@firebase/component/src/provider.ts:242:27)
      at initializeAuth (node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/auth/initialize.ts:66:25)
      at getAuth (node_modules/.pnpm/@[email protected]_@[email protected]/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');

ishowta avatar Nov 10 '22 03:11 ishowta

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.

jbalidiong avatar Nov 23 '22 15:11 jbalidiong

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)

osttra-j-joyce avatar Dec 24 '23 05:12 osttra-j-joyce

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

drewbkil avatar Jan 11 '24 05:01 drewbkil

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.

ben-hamel avatar Jul 22 '24 03:07 ben-hamel

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();

osttra-j-joyce avatar Jul 22 '24 06:07 osttra-j-joyce

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.

leonardobandeira avatar Aug 07 '24 05:08 leonardobandeira

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

r1zaac avatar Oct 02 '24 14:10 r1zaac

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

rorunsolu avatar Feb 09 '25 16:02 rorunsolu

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.

hsubox76 avatar Feb 14 '25 15:02 hsubox76

@hsubox76

Even with the 'demo' prefix added, the error still occurs. https://codesandbox.io/p/sandbox/q4fl3v?file=%2Fsrc%2Findex.mjs%3A10%2C1

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

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

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

This PR should fix the issue once it's merged, but it has been left unattended. https://github.com/firebase/firebase-js-sdk/pull/7278

ishowta avatar Feb 15 '25 03:02 ishowta

@rorunsolu

Please, take a look at the issue title and content.

ishowta avatar Feb 15 '25 12:02 ishowta

@hsubox76

Even with the 'demo' prefix added, the error still occurs. https://codesandbox.io/p/sandbox/q4fl3v?file=%2Fsrc%2Findex.mjs%3A10%2C1

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

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

connectAuthEmulator(auth, "http://localhost:8081"); This PR should fix the issue once it's merged, but it has been left unattended. #7278

Same here. Can anyone merge #7278?

@hsubox76

rafaeloledo avatar Jul 22 '25 04:07 rafaeloledo

As per https://firebase.google.com/docs/auth/web/custom-dependencies - getAuth should initiatlise your Auth library.

But, I am using " initializeAuth" instead - and it works fine.

This is for both my test & prod flows... And then for test using emulators, I call connectAuthEmulator..

From your stack trace it looks like its crashing on "loadResources" - so maybe the "getAuth" is trying to initialise too many things which you may not even need....

On Tue, 22 Jul 2025 at 06:14, Rafael Ledo @.***> wrote:

rafaeloledo left a comment (firebase/firebase-js-sdk#6776) https://github.com/firebase/firebase-js-sdk/issues/6776#issuecomment-3100832338

@hsubox76 https://github.com/hsubox76

Even with the 'demo' prefix added, the error still occurs. https://codesandbox.io/p/sandbox/q4fl3v?file=%2Fsrc%2Findex.mjs%3A10%2C1

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

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

connectAuthEmulator(auth, "http://localhost:8081"); This PR should fix the issue once it's merged, but it has been left unattended. #7278 https://github.com/firebase/firebase-js-sdk/pull/7278

Same here.

— Reply to this email directly, view it on GitHub https://github.com/firebase/firebase-js-sdk/issues/6776#issuecomment-3100832338, or unsubscribe https://github.com/notifications/unsubscribe-auth/A35YEATVRZ3SQALLSXQWZO33JW3B5AVCNFSM6AAAAACCBSWO66VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTCMBQHAZTEMZTHA . You are receiving this because you commented.Message ID: @.***>

--

The information contained in this message is intended only for the recipient, and may be a confidential attorney-client communication or may otherwise be privileged and confidential and protected from disclosure and subject to important terms and conditions available at Disclaimer - Osttra https://osttra.com/disclaimer/. If the reader of this message is not the intended recipient, or an employee or agent responsible for delivering this message to the intended recipient, please be aware that any dissemination or copying of this communication is strictly prohibited. If you have received this communication in error, please immediately notify us by replying to the message and deleting it from your computer. OSTTRA Group Ltd. reserves the right, subject to applicable local law, to monitor, review and process the content of any electronic message or information sent to or from OSTTRA Group Ltd. e-mail addresses without informing the sender or recipient of the message. By sending electronic messages or information to OSTTRA Group LTd. e-mail addresses you, as the sender, are consenting to OSTTRA Group Ltd. processing any of your personal data therein.

osttra-j-joyce avatar Jul 22 '25 12:07 osttra-j-joyce

I tried initializeAuth and the error is the same. The problem is on initialize the app without the api key, which is possible using other emulators, but when using the auth, it appears. @osttra-j-joyce can you share some snippets on how you're initializing?

After that, i'm still facing the same problem of @ishowta

@osttra-j-joyce i've noticed you're using older versions but even if i change it, nothing happens.

rafaeloledo avatar Jul 22 '25 17:07 rafaeloledo