I'm developing a React web application using Firebase for authentication (Google Sign-In) and Firestore. I'm running into a persistent auth/unauthorized-domain error that I can't resolve, despite following all the standard troubleshooting steps.
Environment:
The application runs in a dynamic development environment where the origin (window.location.origin) is temporary and changes with each session (e.g., a proxy URL like https://[unique-hash].proxy.googleprod.com).
Problem:
When I try to sign in with Google using signInWithPopup, Firebase consistently throws an auth/unauthorized-domain error.
My application has a built-in guide that correctly identifies the current origin and instructs me to add it to the Firebase Authentication "Authorized domains" list.
I follow these steps precisely, but even after waiting 5-10 minutes for the changes to propagate, every subsequent login attempt fails with the exact same error.
What I've Already Tried:
Adding the Domain: I meticulously copied the full
window.location.originand added it underFirebase Console → Authentication → Settings → Authorized domains. I have double-checked for typos or extra characters.Waiting for Propagation: I have waited for more than 5 minutes after adding the domain before retrying the login, multiple times.
Verifying Config: My
firebaseConfigobject in the code is a direct copy-paste from the one provided in my Firebase project settings and has been verified multiple times.Ensuring SDK Consistency: I initially had conflicting Firebase SDK versions loaded via my
index.htmlimport map. I have since fixed this to ensure only a single, consistent version (10.12.2) is being loaded across all Firebase modules. This did not solve the issue.
Relevant Code:
index.html (Import Map Setup)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HelpDeskApp Firebase</title>
<script src="https://cdn.tailwindcss.com"></script>
<script type="importmap">
{
"imports": {
"react": "https://aistudiocdn.com/react@^19.2.0",
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
"react/": "https://aistudiocdn.com/react@^19.2.0/",
"firebase/app": "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js",
"firebase/auth": "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js",
"firebase/firestore": "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js",
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.28.0"
}
}
</script>
</head>
<body class="bg-gray-900 text-white">
<div id="root"></div>
</body>
</html>
services/firebaseService.ts (Firebase Initialization and Login Logic)
import { initializeApp, getApp, getApps, FirebaseApp } from 'firebase/app';
import {
getAuth,
signInWithPopup,
GoogleAuthProvider,
Auth,
User,
onAuthStateChanged
} from 'firebase/auth';
import { getFirestore, Firestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: "AIzaSyAy-kTbkFrA1Gm6zvZX14I9Ufdeo8SKCTc",
authDomain: "helpdeskapp-firebase.firebaseapp.com",
projectId: "helpdeskapp-firebase",
storageBucket: "helpdeskapp-firebase.firebasestorage.app",
messagingSenderId: "286380499643",
appId: "1:286380499643:web:b3e793a4e53b0a89e97f9e",
measurementId: "G-FJ5VFDQEK7"
};
class FirebaseService {
private app: FirebaseApp | null = null;
private auth: Auth | null = null;
private db: Firestore | null = null;
public get projectId(): string {
return firebaseConfig.projectId;
}
public init(): void {
if (getApps().length === 0) {
this.app = initializeApp(firebaseConfig);
} else {
this.app = getApp();
}
this.auth = getAuth(this.app);
this.db = getFirestore(this.app);
}
public async login(): Promise<User | null> {
if (!this.auth) this.init();
const provider = new GoogleAuthProvider();
try {
const result = await signInWithPopup(this.auth!, provider);
return result.user;
} catch (error) {
console.error("Popup sign-in error:", error);
throw error;
}
}
public onAuthChange(callback: (user: User | null) => void): () => void {
if (!this.auth) this.init();
return onAuthStateChanged(this.auth!, callback);
}
// ... other firestore methods
}
export const firebaseService = new FirebaseService();
Question:
Given that:
- The domain is being correctly added to the authorized list
- I'm waiting for propagation
- The config is correct
- There are no SDK version conflicts
What else could be causing this persistent auth/unauthorized-domain error?
Is there a known issue with dynamic-origin environments like this, a potential caching problem, or are there other debugging steps I might be missing?
