How to Fix Firebase Authentication Not Working

1// This error means the provider is not enabled:
2// FirebaseError: Firebase: Error (auth/operation-not-allowed)
3
4// Fix: Go to Firebase Console > Authentication > Sign-in method
5// Click the provider and toggle 'Enable' to on

1import { initializeApp } from 'firebase/app'
2import { getAuth } from 'firebase/auth'
3
4// Copy this exactly from Firebase Console > Project Settings
5const firebaseConfig = {
6  apiKey: 'AIzaSy...',           // Must match your project
7  authDomain: 'your-project.firebaseapp.com',
8  projectId: 'your-project',
9  storageBucket: 'your-project.appspot.com',
10  messagingSenderId: '123456789',
11  appId: '1:123456789:web:abc123'
12}
13
14const app = initializeApp(firebaseConfig)
15const auth = getAuth(app)

1// This error means your domain is not authorized:
2// FirebaseError: Firebase: Error (auth/unauthorized-domain)
3
4// Fix: Firebase Console > Authentication > Settings > Authorized domains
5// Add: your-app.vercel.app (or your custom domain)

1import { getAuth, onAuthStateChanged } from 'firebase/auth'
2
3const auth = getAuth()
4
5// WRONG: currentUser may be null during initialization
6console.log(auth.currentUser) // Often null on page load
7
8// CORRECT: Wait for auth state to initialize
9onAuthStateChanged(auth, (user) => {
10  if (user) {
11    console.log('User is signed in:', user.uid)
12  } else {
13    console.log('User is signed out')
14  }
15})

1import { signInWithEmailAndPassword } from 'firebase/auth'
2
3try {
4  await signInWithEmailAndPassword(auth, email, password)
5} catch (error: any) {
6  switch (error.code) {
7    case 'auth/user-not-found':
8      console.log('No account exists with this email')
9      break
10    case 'auth/wrong-password':
11      console.log('Incorrect password')
12      break
13    case 'auth/too-many-requests':
14      console.log('Too many failed attempts. Try again later.')
15      break
16    case 'auth/network-request-failed':
17      console.log('Network error. Check your connection.')
18      break
19    case 'auth/invalid-credential':
20      console.log('Email or password is incorrect')
21      break
22    default:
23      console.log('Auth error:', error.code, error.message)
24  }
25}

1// Symptoms of API key restriction issues:
2// - signInWithPopup opens but immediately closes
3// - signInWithEmailAndPassword returns auth/api-key-not-valid
4// - Network tab shows 403 on identitytoolkit.googleapis.com
5
6// Fix in Google Cloud Console > Credentials > API Keys:
7// 1. Click your Firebase API key
8// 2. Under API restrictions, ensure these APIs are allowed:
9//    - Identity Toolkit API
10//    - Token Service API
11//    - Firebase Installations API
12// 3. Under Application restrictions, add your domains