The 'Firebase Auth: invalid API key' error means the API key in your Firebase configuration is wrong, missing, or not exposed to client code. The most common cause is a missing environment variable prefix (NEXT_PUBLIC_, VITE_, REACT_APP_) making the key silently undefined. Check your Firebase config object and ensure the API key matches what is shown in the Firebase Console project settings.
What does "Firebase Auth: invalid API key" mean?
This error appears as auth/invalid-api-key or auth/api-key-not-valid in the Firebase SDK. The exact messages include: "Firebase: Error (auth/invalid-api-key)", "Firebase: Error (auth/api-key-not-valid. Please pass a valid API key)", and "Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)". It means the apiKey field in your Firebase configuration is either wrong, empty, or undefined.
The most frequent cause is environment variable misconfiguration. Each frontend framework requires a specific prefix for client-side variables: NEXT_PUBLIC_ for Next.js, VITE_ for Vite-based apps (including Lovable), REACT_APP_ for Create React App, and EXPO_PUBLIC_ for Expo. Without the correct prefix, the variable is silently undefined — no error, no warning, just undefined passed as the API key.
This is one of the most common Firebase errors in AI-generated code because AI tools frequently set up Firebase configuration without properly handling environment variables for the specific framework being used.
Common causes
The environment variable holding the API key is
missing the required framework prefix (NEXT_PUBLIC_, VITE_, REACT_APP_) making it undefined on the client
The API key was copied incorrectly from
the Firebase Console with extra spaces, newlines, or truncated characters
The .env file is not in
the project root directory or is named incorrectly (.env.local vs .env for the specific framework)
The Firebase project's API key was restricted in
Google Cloud Console to exclude the domains where the app is deployed
The environment variable is set in
the .env file but the development server was not restarted after adding it
AI-generated code hardcoded a placeholder
API key like 'YOUR_API_KEY' that was never replaced with the real value
How to fix "Firebase Auth: invalid API key"
First, verify your API key is correct. Go to the Firebase Console > Project Settings (gear icon) > General tab. Under 'Your apps,' find the web app configuration. The apiKey field shows your correct API key.
Next, check how the key reaches your code. If you use environment variables, verify the prefix matches your framework. For Next.js: NEXT_PUBLIC_FIREBASE_API_KEY. For Vite: VITE_FIREBASE_API_KEY. For Create React App: REACT_APP_FIREBASE_API_KEY. Add a console.log to verify the value is not undefined.
If the value is undefined, check your .env file location (must be in project root), the variable name spelling, and whether you restarted the development server after adding the variable. Environment variable changes require a server restart to take effect.
For deployment environments (Vercel, Netlify, etc.), add the environment variable in the platform's settings UI. The .env file is often not included in deployments. Verify the variable is set in the deployment environment's configuration panel.
If the key is correct but auth still fails, check if the API key has been restricted in Google Cloud Console (APIs & Services > Credentials). API key restrictions can limit which domains and APIs are allowed. Ensure your deployment domain is in the allowed list.
// Missing VITE_ prefix — key is undefined!const firebaseConfig = { apiKey: import.meta.env.FIREBASE_API_KEY, // undefined authDomain: import.meta.env.FIREBASE_AUTH_DOMAIN, projectId: import.meta.env.FIREBASE_PROJECT_ID};// Or hardcoded placeholderconst firebaseConfig = { apiKey: "YOUR_API_KEY_HERE",};// Correct VITE_ prefix for Vite-based appsconst 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};// Validate before initializingif (!firebaseConfig.apiKey || firebaseConfig.apiKey === 'undefined') { throw new Error( 'Firebase API key is missing. Add VITE_FIREBASE_API_KEY to your .env file.' );}const app = initializeApp(firebaseConfig);Prevention tips
- Always use the correct environment variable prefix for your framework: NEXT_PUBLIC_ for Next.js, VITE_ for Vite, REACT_APP_ for CRA — without it, the variable is silently undefined
- Add a validation check that throws a clear error if the Firebase API key is undefined before calling initializeApp()
- Restart your development server after adding or changing environment variables — changes to .env files are not hot-reloaded
- For deployed apps, verify environment variables are set in the hosting platform's settings (Vercel, Netlify, etc.) separately from local .env files
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm getting 'Firebase: Error (auth/invalid-api-key)' in my React app. My Firebase config uses environment variables but the API key appears to be undefined. How do I debug environment variable issues in a Vite + React project?
My Firebase app throws auth/invalid-api-key. Here is my Firebase config code and .env file: [paste both]. Tell me exactly what is wrong and how to fix the environment variable setup for my framework.
Frequently asked questions
What causes "Firebase Auth: invalid API key" errors?
The most common cause is a missing environment variable prefix. Without NEXT_PUBLIC_ (Next.js), VITE_ (Vite), or REACT_APP_ (CRA), the variable is silently undefined on the client. Other causes include typos in the API key, placeholder values not replaced, and API key restrictions in Google Cloud Console.
Is it safe to expose the Firebase API key in frontend code?
Yes, the Firebase API key is designed to be public. It only identifies your Firebase project — it does not grant access to data. Security is enforced through Firestore security rules, Firebase Auth, and API key restrictions in Google Cloud Console. Never expose service account keys in frontend code.
Why does my Firebase API key work locally but not in production?
Your local .env file has the correct variable, but the production environment does not. Add the environment variable in your hosting platform's settings (Vercel, Netlify, etc.). Also check if the API key is restricted to specific domains in Google Cloud Console — your production domain may not be in the allowed list.
Do I need to restart the dev server after changing .env variables?
Yes. Environment variables from .env files are loaded at build time, not runtime. After adding or changing a variable, you must restart the development server for the change to take effect. This catches many developers who add the variable and expect it to work immediately.
Can AI-generated code cause this Firebase error?
Yes. AI tools frequently generate Firebase configurations with placeholder API keys, incorrect environment variable prefixes, or without environment variable setup at all. Always verify the generated Firebase config matches your actual project settings from the Firebase Console.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your issue.
Book a free consultation