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

General
3

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.

:white_check_mark: 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.

:white_check_mark: 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.

:white_check_mark: 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.

:white_check_mark: 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.