The `auth/invalid-credential` error is one of the most abrupt failures in the Firebase ecosystem. It completely halts the authentication flow, leaving users stranded and metrics plummeting.
While the error message seems straightforward, in a modern React or Next.js stack, the root cause is rarely a simple typo. This guide walks through the exact production debugging workflow to identify and fix this error instantly.
TL;DR: How to fix auth/invalid-credential
- 11. Next.js Client: Ensure your environment variable is named `NEXT_PUBLIC_FIREBASE_API_KEY`.
- 22. Vercel: Verify that your production environment variables are exactly matched to your `.env.local`.
- 33. Admin vs Client: Do not pass Admin SDK credentials (service account JSON) to Client SDK methods like `signInWithEmailAndPassword`.
- 44. Redeploy without build cache after changing any environment variables.
Root Causes
Missing or Misconfigured NEXT_PUBLIC_ Prefix
In Next.js, environment variables are only exposed to the Node.js server by default. If you are initializing Firebase Authentication on the client side without prefixing your API keys with `NEXT_PUBLIC_`, the client receives `undefined`, triggering an immediate invalid credential error.
FirebaseError: Firebase: Error (auth/invalid-credential).Admin vs. Client SDK Confusion
Firebase has two distinct SDKs: Client and Admin. A common mistake during backend migrations is accidentally passing a Service Account JSON or Admin credentials into a Client-side SDK method, which strictly expects an API key.
Stale Build Cache on Vercel
You added the correct environment variables in the Vercel dashboard, but the app is still throwing the error. Vercel often caches build outputs; if you don't redeploy without the cache, the old bundle (missing the keys) remains active.
Step-by-Step Fix Guide
Verify Client-Side Environment Variables
Open your `firebase.ts` or `firebase.js` initialization file and ensure you are using the correct prefixes.
const firebaseConfig = {
// Must have NEXT_PUBLIC_ for client side usage
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
};- Add a `console.log(process.env.NEXT_PUBLIC_FIREBASE_API_KEY)` temporarily to ensure it prints the string in the browser console. Remove it immediately after verifying.
Check the Identity Toolkit Request Payload
The fastest way to debug Firebase is via the Chrome Network tab.
- Open DevTools -> Network.
- Filter by `identitytoolkit`.
- Attempt to log in. Click the failed request.
- Under the 'Payload' tab, verify that your API key is being sent correctly in the request URL: `.../identitytoolkit/v3/relyingparty/verifyPassword?key=YOUR_API_KEY`.
Clear the Next.js and Vercel Cache
If the keys are correct locally but failing in production, clear the deployment cache.
# Locally:
rm -rf .next
npm run dev
# Vercel:
# Go to Deployments -> Redeploy -> uncheck 'Use Build Cache'Urgent Firebase Fix Needed?
Stuck on auth/invalid-credential? Users locked out? I can debug your exact configuration and unblock your deployment.
Get Urgent Debugging HelpRelated Errors
auth/user-not-found
The API key is correct, but the user does not exist in the specific Firebase project. Double check your `projectId` environment variable.
auth/api-key-not-valid
The API key is malformed or has been restricted via Google Cloud Console to specific IP addresses or referrer domains.
Prevention Strategy
- Use a schema validation library like `zod` or `joi` to validate that `NEXT_PUBLIC_FIREBASE_API_KEY` is a non-empty string during `npm run build`. If it's missing, fail the build immediately.
- Separate your staging and production Firebase projects to prevent accidental credential overlap.
Still Stuck With This Issue?
Send your exact error message or deployment issue. I'll respond with a targeted fix.
Need a Deeper Fix?
Describe your full project issue below and I'll get back to you with a targeted fix.