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

By Ohad Krispin, founder of VibeRaven · LinkedIn

"Firebase: Error (auth/invalid-api-key)." is thrown by getAuth() in the Firebase JS SDK when the apiKey in the config passed to initializeApp() is undefined, empty or contains a colon. On Vercel the usual cause is that process.env.NEXT_PUBLIC_FIREBASE_API_KEY (import.meta.env.VITE_FIREBASE_API_KEY in Vite) was undefined when the app was built: the variable was never added to that Vercel environment, was added after the build, or is missing its prefix. Add it in Vercel for Production and Preview, check that the code reads it by its full name, and redeploy so a new build inlines it. Reproduced with firebase 13.1.0 on 2026-10-31.

What exactly makes the Firebase SDK throw auth/invalid-api-key?

The Auth component asserts that apiKey has a value and no colon before it creates the auth instance (packages/auth/src/core/auth/register.ts). It checks nothing else. We ran getAuth() against app configs with different apiKey values and no network request. A wrong but well-formed value passes this check, so the SDK cannot tell you the key is for another project; what Google answers to a request with such a key is not shown here. The Firebase API key docs list a deleted key, a key made for another project ID, and key restrictions as causes of an invalid-key error.

apiKey: undefined                       auth/invalid-api-key
apiKey: ""                              auth/invalid-api-key
apiKey: "1:1234567890:web:abcdef"       auth/invalid-api-key   (a value with colons)
apiKey: "undefined"                     no error from getAuth()
apiKey: "your-api-key-here"             no error from getAuth()

Why does it work locally and fail after the Vercel deploy?

Next.js replaces process.env.NEXT_PUBLIC_FIREBASE_API_KEY with the value from the environment that runs next build, and the built app no longer reads the variable. Vercel says a changed environment variable applies only to new deployments, and a variable is applied per environment, Production or Preview. So a key that is only in .env.local, only set for Production, or set after the last build reaches the browser as undefined. Vite does the same with import.meta.env at build time, and a variable without the VITE_ prefix is undefined in client code.

Next.js inlines only the full property name. Its docs show that process.env[varName] and a copy such as const env = process.env are not inlined, so a helper that reads the keys from a copy of process.env gets undefined in the browser bundle.

// inlined at build time
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,

// not inlined in the browser bundle
const env = process.env
apiKey: env.NEXT_PUBLIC_FIREBASE_API_KEY,

Is it safe to expose the Firebase API key with NEXT_PUBLIC_?

The Firebase docs say the config object holds unique but non-secret identifiers, and that API keys for Firebase services are OK to include in code or checked-in config files; access to data is controlled by Security Rules and IAM, not by hiding the key. So the NEXT_PUBLIC_ or VITE_ prefix is expected here. This does not apply to a service account private key, which must stay in a server-only variable.

Checklist

How to fix it, then check the fix

Find where the config is built and which names it reads, including committed .env files:

grep -rnE "FIREBASE_API_KEY|apiKey" --exclude-dir=node_modules --exclude-dir=.next --exclude-dir=dist .

02Copy the config object of your web app from the Firebase console, and check that the apiKey field holds the key and not the value of another field, because any value with a colon fails.
03
Add every config value in Vercel with the prefix your framework needs (NEXT_PUBLIC_ for Next.js, VITE_ for Vite), for each environment that serves the app:
```
vercel env add NEXT_PUBLIC_FIREBASE_API_KEY production
vercel env add NEXT_PUBLIC_FIREBASE_API_KEY preview
```
04Make the code read each value by its full name, process.env.NEXT_PUBLIC_FIREBASE_API_KEY or import.meta.env.VITE_FIREBASE_API_KEY, not through a variable or a copy of process.env.
05Redeploy so a new build runs with the variables, then open the sign-in page on the deployment: the browser console no longer shows auth/invalid-api-key.

Sources

Official docs behind this checklist

More Vercel errors

Browse all launch guides · Read resources · How to make and check your next change

FAQ

FAQ for builders before launch

Does an empty value in Vercel cause the same error?

Yes. An apiKey of "" threw auth/invalid-api-key in our run, the same as undefined, so a variable saved with no value fails the same way once the build reads it as an empty string.

I use Vite. What changes?

Name the variables VITE_FIREBASE_API_KEY and so on, and read them as import.meta.env.VITE_FIREBASE_API_KEY. The Vite docs say variables without the VITE_ prefix are not exposed to client code, and that import.meta.env values are replaced statically at build time.

Why does a colon in the key make it fail?

The check in register.ts accepts an apiKey only when it has a value and no colon. In our run a value like 1:1234567890:web:abcdef threw the same error, so pasting another config field into the apiKey slot fails here.