Firebase Auth error codes for web sign-in: causes and fixes

How Firebase Auth errors are shaped

• Sign-in calls such as signInWithPopup() and getRedirectResult() reject with an AuthError. It extends FirebaseError and carries code, message and customData (appName, plus email, phoneNumber or tenantId when known).
• The long, readable messages live in the SDK's debugErrorMap. Firebase's reference says prodErrorMap is the default, so with a plain getAuth() the message is usually just Firebase: Error (auth/...). You can opt into the long messages while debugging with initializeAuth(app, { errorMap: debugErrorMap }). Either way, branch on error.code.
• The SDK exports an AuthErrorCodes map for comparisons. Firebase notes that you can't tree-shake individual keys, so importing it can make your bundle much larger. Comparing against string literals avoids that.

Watch out for this naming trap

Two AuthErrorCodes keys look like they've been swapped. These values match the official AuthErrorCodes reference and the SDK source:

So error.code === AuthErrorCodes.UNAUTHORIZED_DOMAIN will not catch the common "domain not authorized" sign-in error. Use "auth/unauthorized-domain" (or AuthErrorCodes.INVALID_ORIGIN).

Firebase web sign-in error codes: cause and fix

Codes and SDK messages are from the Firebase JS SDK (@firebase/auth) as of Oct 2026. Console paths follow Firebase's current docs (Security > Authentication). Older guides say Build > Authentication.

The auth/unauthorized-domain error has host-specific guides: localhost, Vercel and Netlify.

Errors that aren't Firebase error codes

Some sign-in failures never reach your catch block as an auth/... code, because they appear on a Google or Firebase page instead:

Handle Firebase Auth errors in React

This button maps codes to friendly messages, stays quiet when the user cancels, and stays disabled while a popup is open, which prevents auth/cancelled-popup-request.

// GoogleSignInButton.jsx
import { useState } from "react";
import { FirebaseError } from "firebase/app";
import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";

// null = user cancelled; don't show anything.
const MESSAGES = {
  "auth/popup-closed-by-user": null,
  "auth/cancelled-popup-request": null,
  "auth/popup-blocked":
    "Your browser blocked the sign-in window. Allow pop-ups for this site and try again.",
  "auth/unauthorized-domain":
    "Sign-in isn't set up for this web address yet.",
  "auth/operation-not-allowed":
    "Google sign-in is turned off for this app.",
  "auth/network-request-failed":
    "We couldn't reach the sign-in service. Check your connection and try again.",
  "auth/account-exists-with-different-credential":
    "You already have an account with this email. Sign in the way you did before.",
  "auth/user-disabled": "This account has been disabled.",
  "auth/too-many-requests": "Too many attempts. Please wait and try again.",
};

export function messageFor(err) {
  if (!(err instanceof FirebaseError)) return "Something went wrong. Please try again.";
  return err.code in MESSAGES
    ? MESSAGES[err.code]
    : "Sign-in failed. Please try again.";
}

export default function GoogleSignInButton() {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState(null);

  async function handleClick() {
    setError(null);
    setBusy(true);
    try {
      // Called directly from the click, with no await before it.
      await signInWithPopup(getAuth(), new GoogleAuthProvider());
    } catch (err) {
      // Keep full details for debugging; show users a short message.
      console.error(err?.code, err?.message, err?.customData);
      setError(messageFor(err));
    } finally {
      setBusy(false);
    }
  }

  return (
    <div>
      <button type="button" onClick={handleClick} disabled={busy}>
        {busy ? "Signing in…" : "Continue with Google"}
      </button>
      {error && <p role="alert">{error}</p>}
    </div>
  );
}

Using signInWithRedirect instead? Redirect errors arrive when the page loads again, through getRedirectResult():

import { useEffect, useState } from "react";
import { getAuth, getRedirectResult } from "firebase/auth";
import { messageFor } from "./GoogleSignInButton";

export function useRedirectError() {
  const [error, setError] = useState(null);
  useEffect(() => {
    getRedirectResult(getAuth()).catch((err) => setError(messageFor(err)));
  }, []);
  return error;
}

How to confirm your error handling works

1. auth/popup-closed-by-user: open the popup and close it. No message should appear and the button should come back.
2. auth/cancelled-popup-request: double-click the button. The second click should do nothing, because the button is disabled.
3. auth/unauthorized-domain: in a test project, open the app on a hostname that isn't in Authorized domains (for example a new preview URL). You should see your "isn't set up" message, and the console should log the code.
4. Check that the code appears in your logs. Don't rely on error.message: with the default error map it's only a short Firebase: Error (auth/...) string.