How to Fix Network Request Failed in Firebase Auth

1// Quick connectivity test in browser console:
2fetch('https://identitytoolkit.googleapis.com')
3  .then(res => console.log('Reachable, status:', res.status))
4  .catch(err => console.error('Unreachable:', err.message))
5
6// Expected: status 404 (endpoint exists but needs params)
7// If error: network is blocking the request

1// Symptoms:
2// - auth/network-request-failed on signIn or signUp
3// - Browser Network tab shows 403 on identitytoolkit.googleapis.com
4// - Works in one environment but not another
5
6// Fix in Google Cloud Console:
7// 1. APIs & Services > Credentials > Click your API key
8// 2. Under 'API restrictions':
9//    - 'Don't restrict key' (safest for web)
10//    - OR allow: Identity Toolkit API, Token Service API
11// 3. Under 'Application restrictions' > HTTP referrers:
12//    - Add: localhost, localhost:*, your-domain.com/*

1// Symptoms:
2// - Console shows 'CORS policy' error alongside network request failed
3// - Network tab shows preflight OPTIONS request failing
4
5// Common causes:
6// 1. A development proxy intercepting Firebase requests
7// 2. A service worker caching or blocking auth endpoints
8// 3. A browser extension (ad blocker, privacy tool) blocking Google domains
9
10// Fix for Vite proxy (vite.config.ts):
11// Do NOT proxy Firebase domains. Only proxy your own API:
12export default defineConfig({
13  server: {
14    proxy: {
15      '/api': 'http://localhost:3001',
16      // Do NOT add entries for googleapis.com
17    }
18  }
19})

1<!-- android/app/src/main/AndroidManifest.xml -->
2<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3  <!-- Add these permissions -->
4  <uses-permission android:name="android.permission.INTERNET" />
5  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
6
7  <application
8    android:usesCleartextTraffic="false"
9    ...>
10  </application>
11</manifest>

1import { getAuth, connectAuthEmulator } from 'firebase/auth'
2
3const auth = getAuth()
4
5// Connect to the emulator in development only
6if (process.env.NODE_ENV === 'development') {
7  connectAuthEmulator(auth, 'http://127.0.0.1:9099', {
8    disableWarnings: true,
9  })
10}
11
12// For React Native or mobile, use your machine's IP:
13// connectAuthEmulator(auth, 'http://192.168.1.100:9099')

1import { signInWithEmailAndPassword, AuthError } from 'firebase/auth'
2
3async function signInWithRetry(
4  auth: any,
5  email: string,
6  password: string,
7  maxRetries = 2
8) {
9  for (let attempt = 0; attempt <= maxRetries; attempt++) {
10    try {
11      return await signInWithEmailAndPassword(auth, email, password)
12    } catch (error) {
13      const authError = error as AuthError
14      if (
15        authError.code === 'auth/network-request-failed' &&
16        attempt < maxRetries
17      ) {
18        // Wait before retrying (exponential backoff)
19        await new Promise(r => setTimeout(r, 1000 * (attempt + 1)))
20        continue
21      }
22      throw error
23    }
24  }
25}