Firebase: Error (auth/popup-closed-by-user)

[MubieSam_Lin]

A prototype was created successfully using Firebase Studio, tested with email/password was successfully added into Authentication and Firestore users collection.

But when trying to add Google Sign-In, first got “Firebase: Error (auth/unauthorized-domain)”, found the connection was not established to Firebase Console.

Created the project manually in Firebase Console and added .env.local with Firebase configuration, restarted the server.

Then added https://6000-firebase-studio-1748093797246.cluster-6dx7corvpngoivimwvvljgokdw.cloudworkstations.dev as URI in GCP OAuth Client

Google Sign-In popup seems working but closed with error Google Sign-up Cancelled or Failed as screenshot below.

Any suggestion where to look into…
Thanks

[weilies]

i have the same issue

i pasted the URL into firebase auth > authorized domain but issue remain

worse thing is if i run via prototyper (screenshot below), same code base, it run without issue.

hopefully firebase “viber” or the developer could give us some youtube tutorial to address such issue. thanks

[DoctorDev2023]

Try this and let me know if you’re able to pinpoint the issue.

Summary

App Check & Auth Troubleshooting Guide

If you are seeing the auth/popup-closed-by-user error during sign-in, and you are certain you did not close the window, it is almost always caused by a misconfiguration in Firebase App Check or Firebase Authentication domain settings.

The authentication request is being blocked before our application’s code can even run, causing the browser to kill the pop-up window prematurely.

How It Works: The Chain of Trust

To fix this, you must ensure three separate services all trust your application’s domain.

1. Firebase Authentication: Needs to know your domain is allowed to start a login.
2. Google Cloud (reCAPTCHA): The underlying service for App Check needs to know your domain is allowed to generate a security token.
3. Firebase App Check: Needs your developer debug token for local development.

A failure in any one of these steps will cause the login pop-up to fail silently.

---

The Complete Setup Checklist (CRITICAL)

Follow these steps exactly. The issue is almost certainly a missed step here.

Step 1: Authorize Your Domain in Firebase Auth

This is the most common point of failure.

1. Go to the Firebase Console.
2. Navigate to Build > Authentication.
3. Select the Settings tab.
4. Under Authorized domains, click Add domain.
5. Add the full domain of your development environment (e.g., your complete cloud workstation URL: 9000-firebase-studio-....cloudworkstations.dev).
6. Add your production domain (e.g., dealvault.pro).
7. Click Add.

Step 2: Whitelist Your Domain for reCAPTCHA in Google Cloud

This is the second most common point of failure.

1. Go to the Google Cloud Console Credentials Page for your project.
2. Find the key named reCAPTCHA v3 Site key for [your-project-id].
3. Click the pencil icon to edit this key.
4. Under Website restrictions, click ADD.
5. Add the domain of your development environment (e.g., your complete cloud workstation URL, localhost).
6. Add your production domain (YOURDOMAIN.COM).
7. Click Save.

Step 3: Add Your Debug Token to App Check

This is required for local development.

1. In the Firebase Console, go to Build > App Check.
2. Select the Apps tab and register your web application if you haven’t already. Ensure reCAPTCHA v3 is selected and enforcement has been turned on.
3. Run your application locally (pnpm dev).
4. Open the browser’s developer console. You will see a message like this:

   App Check debug token: [A-LONG-TOKEN-STRING]. You will need to add it to your app's App Check settings...
   

5. Copy this token.
6. Go back to the Firebase Console > App Check > Apps tab.
7. Find your web app, click the three-dot menu, and select Manage debug tokens.
8. Click Add debug token and paste the token you copied.

Step 4: Configure OAuth Redirect URIs in Google Cloud

This is the final, critical step. It tells Google’s OAuth service which specific URLs are allowed to receive the response from the login pop-up. A mismatch here causes the redirect_uri_mismatch error.

1. Go to the Google Cloud Console Credentials Page for your project.

2. Under OAuth 2.0 Client IDs, find the client ID being used by your web application. It will likely be named something like “Web client (auto created by Google Service)”. Click the pencil icon to edit it.

3. Under Authorized redirect URIs, click ADD URI.

4. You must add the URI for the Firebase-provided authentication domain. This is the domain that actually handles the pop-up logic. You can find this in your Firebase project settings, it will look like YOUR_PROJECT_ID.firebaseapp.com.

   • The URI to add:

     https://YOUR_PROJECT_ID.firebaseapp.com/__/auth/handler
     

     (Example: YOURDOMAIN.COM/__/auth/handler)

5. Click Save.

---

After completing all four steps, your authentication flow should be correctly configured for both development and production.

[DoctorDev2023]

Ideally, Firebase would set this all up for you, but this is a manual process where any step can go wrong and you likely won’t have any relevant logging server or client side to let you know which step failed.

It’s inconvenient to have to authorize domains in the OAUTH credentials page, ReCAPTCHA page, and in Firebase Console. That’s three different platforms that all need to be configured properly just to have your basic authentication flow working. Surely this could be simplified for users.

[DoctorDev2023]

@kirupa @jamesor

Humble request to simplify this process within Firebase Studio, perhaps with an .authorized-domains file that can then use the SDK or gcloud to facilitate changes without leaving the IDE.

[MubieSam_Lin]

Hi @DoctorDev2023

Thank you for the comprehensive Troubleshooting Guide. 100% agree with you…

@DoctorDev2023

Surely this could be simplified for users.

I had followed your guide steps as below…

1. Authorize Domain in Firebase Auth (see screenshot 114512)
2. If reCAPTCHA is not enabled, this should not be the problem, right?
3. If not Running application locally, App Check is not necessary, right?
4. Configure OAuth Redirect URIs in Google Cloud (see screenshot 115342)

But still got Firebase Error (auth/unauthorized-domain) (see screenshot 115440)

Any suggestion…

[MubieSam_Lin]

An error occurred: Sorry, new users can only put one embedded media item in a post.

[MubieSam_Lin]

An error occurred: Sorry, new users can only put one embedded media item in a post.

[DoctorDev2023]

You might need to put in the App check debug token.

Can you open Developer Tools and show the Console too?

I like to pin it to the right side of my screen with the preview and prototyper open.

[MubieSam_Lin]

Here is the screenshot and log.

Thanks for your help.

studio.firebase.google.com-1751978637542.log

[DoctorDev2023]

MubieSam,

I can’t say for certain what the issue is, but I would also setup ReCAPTCHA.

If you can, paste the full developer console logs for us to review.

Console

Like this

I’m looking for any logs that may reference Firebase App Check.

[MubieSam_Lin]

Hi @DoctorDev2023

The log is attached under the screenshot. studio.firebase.google.com-1751978637542.log

Thanks

An error occurred: Sorry, new users can only put 2 links in a post. (there are too many links in the log)

[DoctorDev2023]

@MubieSam_Lin

studio.firebase.google.com-1751978637542.log

The HTTP 502 errors at the start are peculiar.

I would take that log and feed it back into the prototyper so it can look for issues.

I don’t see any Firebase App Check initialization happening based on your logs.

I would ask it to review your Firebase implementation.

[Antonio_Scott]

Did you resolve this? I can help if you still need it

[MubieSam_Lin]

it will be nice to learn since I will use Firebase Studio anyway, thank you

[Antonio_Scott]

Forum Reply Draft

Subject: Google Sign In Failure after email/password works — domain/redirect check

Hi MubieSam_Lin — awesome job getting the email/password + Firestore flow working. That shows your Firebase config is mostly solid. For the Google Sign-In step, the two usual culprits are:

1. Authorized Domains
Go to your Firebase Console → Authentication → Settings (tab) → Authorized domains.
Make sure the exact domain you’re using (for example: 6000-firebase-studio-1748093797246.cluster-6dx7corvpngoivimwvvljgokdw.cloudworkstations.dev) is added there. If it isn’t, Google sign-in will fail with an unauthorized-domain error.

2. OAuth Redirect URIs / Google Cloud OAuth Setup
In the Google Cloud Console, locate your OAuth 2.0 client for the project. Under the “Authorized redirect URIs” setting you need the exact URL that Google will redirect back to after sign-in (often something like https://your-domain.com/__/auth/handler or whatever callback your Firebase config uses). If the URI doesn’t match, the popup may open but then fail or cancel.

Things to check:

• The authDomain in your Firebase config (firebaseConfig) should match the domain you are using.

• The authorized domain list in Firebase and the OAuth redirect URIs in Google must both include your exact domain/URL including sub-domains.

• Clear browser cache or try in incognito to make sure there are no old auth flows hanging.

Once you’ve confirmed both the domain and the redirect URI match exactly, retry the Google Sign-In. Let me know the error message if it still fails (including any console logs) and we’ll dig deeper.

I think you may have some deeper problems, for now though, this is something I had to just deal with-again. The difference here is you may have missed the Google Console part. Don’t get discouraged if this returns an error.

Try this if it does return more errors:

Diagnostic CLI Tool: firebase-auth-domain-check.js

#!/usr/bin/env node
/**
 * Firebase Auth Domain & OAuth Redirect Checker
 */

import fs from 'fs';
import path from 'path';
import readline from 'readline/promises';
import { stdin as input, stdout as output } from 'node:process';

async function ask(question) {
  const rl = readline.createInterface({ input, output });
  const answer = await rl.question(question);
  rl.close();
  return answer.trim();
}

function readEnvAuthDomain() {
  const envPath = path.resolve(process.cwd(), '.env.local');
  if (!fs.existsSync(envPath)) return null;
  const content = fs.readFileSync(envPath, 'utf-8');
  const match = content.match(/authDomain\s*=\s*["']([^"']+)["']/i);
  if (match) return match[1];
  const match2 = content.match(/AUTH_DOMAIN\s*=\s*["']([^"']+)["']/i);
  return match2 ? match2[1] : null;
}

(async () => {
  console.log('🔍 Firebase Auth Domain & OAuth Redirect Checker\n');

  const envAuthDomain = readEnvAuthDomain();
  if (envAuthDomain) {
    console.log(`✔️ Found authDomain in .env.local: ${envAuthDomain}`);
  } else {
    console.warn(`⚠️ Could not find authDomain in .env.local. Please check your firebaseConfig or .env file.`);
  }

  const enteredDomain = await ask('Enter the custom domain you added in Firebase Auth → Authorized domains: ');
  console.log(`👉 You entered: ${enteredDomain}`);
  if (envAuthDomain && envAuthDomain.toLowerCase() === enteredDomain.toLowerCase()) {
    console.log('✅ authDomain matches your entered domain.');
  } else {
    console.warn('⚠️ authDomain in your config does NOT match the domain you entered.');
  }

  const redirectUri = await ask('Enter the OAuth Redirect URI you configured in Google Cloud (exact): ');
  console.log(`👉 You entered: ${redirectUri}`);
  console.log('Please verify this exact URI shows up in your Google Cloud OAuth 2.0 client settings.');

  console.log('\n📋 Next steps:');
  console.log('- Go to Firebase Console → Authentication → Settings → Authorized domains, and ensure the domain above is listed.');
  console.log('- Go to Google Cloud Console → APIs & Services → OAuth 2.0 Client → Redirect URIs, and confirm the exact URI you entered is present.');
  console.log('- Verify that your firebaseConfig.authDomain uses the same domain (case-insensitive match).');
  console.log('- After verifying, clear browser cache, try incognito, and test the Google Sign-In flow again.');

  console.log('\n✅ Diagnostic run complete. If any check above showed a warning, that’s likely the root of your issue.');
  process.exit(0);
})();

---

Instructions

1. Place this file at the root of the project (e.g., firebase-auth-domain-check.js).

2. Ensure you have Node.js installed (v14+); you will need to check the most stable version of Node; this part I found also works when you do it manually. Gemini can perform PowerShell and Bash only I found it tends to get the wrong one or stubbornly holds on to older versions in cache.

3. Run it with:

   node firebase-auth-domain-check.js
   
   

4. It will prompt for the domain and redirect URI and verify the authDomain from .env.local.

5. Review the warnings — any mismatch may indicate the root issue.

[MubieSam_Lin]

Hi @Antonio_Scott

Thanks for your detail instructions, our previous project had beeen cancelled, but a new project will begin early next month, will try it out and feedback the result.