# How to Fix "Firebase Auth: invalid API key" in Firebase

- Tool: Firebase
- Difficulty: Intermediate
- Fix time: 5-15 minutes
- Compatibility: Firebase Auth (Web, React, Next.js, Vue, Angular)
- Last updated: March 2026

## TL;DR

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.

Before:

```
// 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 placeholder
const firebaseConfig = {
  apiKey: "YOUR_API_KEY_HERE",
};
```

After:

```
// Correct VITE_ prefix for Vite-based apps
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
};

// Validate before initializing
if (!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);
```

## Tips to prevent this

- 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

## 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.

---

Source: https://www.rapidevelopers.com/ai-build-errors/firebase-auth-invalid-api-key
© RapidDev — https://www.rapidevelopers.com/ai-build-errors/firebase-auth-invalid-api-key