React PWA自定义域名下Firebase Google认证（signInWithPopup）异常，Auth重定向被PWA拦截

我完全懂你这种卡了好几天的崩溃感——毕竟默认域名好好的，换了自定义域名就掉坑里，太闹心了。结合你已经做的所有基础配置（域名授权、OAuth客户端设置、Cloudflare DNS绑定，这些都没毛病），咱们从几个核心可疑点再深挖，先解决最可能的元凶：

1. 先把Firebase Hosting的重写规则改对，别让PWA吞了Auth路径 #

你提到修改过firebase.json的rewrites，但大概率是没把Firebase Auth的专属路径排除在外。默认Firebase域名下，/__/auth/**这类路径是被保留给官方服务的，但自定义域名下如果你的rewrites把所有请求都导向index.html，就会把Auth的请求直接转给你的React SPA，导致出现404/PageNotFound。

正确的firebase.json重写配置：要优先让Auth路径走Firebase的官方处理，再处理SPA的路由：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // 第一优先级：让Firebase Auth的路径直接走官方服务
      {
        "source": "/__/auth/**",
        "run": {
          "serviceId": "firebaseauth",
          "region": "us-central1" // 你的Firebase项目区域，默认一般是us-central1
        }
      },
      // 其他所有路径走React SPA的index.html
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

改完之后记得重新部署：firebase deploy --only hosting

2. 检查PWA的Service Worker，别让它拦截Auth请求 #

作为PWA，你的Service Worker可能会缓存或拦截所有HTTP请求，包括Firebase Auth的/__/auth/**路径。如果是用Create React App的默认PWA配置，或者自己写的Service Worker，一定要把这个路径排除在外：

示例（用Workbox的情况）： #

在src/service-worker.js里添加路由排除：

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

// 只缓存/处理非Auth路径的请求
registerRoute(
  ({ url }) => !url.pathname.startsWith('/__/auth/'),
  new StaleWhileRevalidate()
);

如果是CRA的craco配置，也可以在craco.config.js里添加Workbox的排除规则：

module.exports = {
  pwa: {
    workbox: {
      exclude: [/^\/__\/auth\//]
    }
  }
};

修改完Service Worker后，必须清浏览器缓存、用隐私模式测试，因为旧的Service Worker可能还在生效。

3. Cloudflare这边别给Auth路径“添乱” #

Cloudflare的缓存和代理规则很容易把Auth请求拦截，要检查这几点：

• 缓存规则：给/__/auth/**路径设置「缓存级别：绕过」（Cache Level: Bypass），不让Cloudflare缓存这个路径的请求，直接转发给Firebase Hosting。
• SSL模式：Cloudflare的SSL/TLS设置要选「完全」或「完全（严格）」，Firebase Hosting强制HTTPS，SSL不匹配会导致请求被拦截。
• 代理状态：如果你的A记录是指向Firebase的IP，Cloudflare的代理状态可以设为「仅DNS」（DNS Only），避免额外的代理规则干扰；如果是「已代理」（Proxied），要确保没有Page Rules把/__/auth路径转发到其他地方。

4. 排查Prod/Staging环境的OAuth配置冲突 #

你同时有Prod和Staging两个域名，要严格区分各自的OAuth配置：

• 每个环境的Firebase Config里的authDomain必须对应各自的域名（Prod是my-custom-domain.app，Staging是staging.my-custom-domain.app）。
• Google Cloud Console里的OAuth 2.0客户端ID要分开：Prod的客户端ID只加Prod的授权来源和重定向URI，Staging的只加Staging的，别混在一起。
• 确认每个环境的Firebase项目里的「授权域名」都加了对应域名，没有漏。

5. 最后别忘了清缓存+硬刷新 #

PWA的缓存和Firebase Hosting的缓存都很顽固，每次修改配置后：

1. 用浏览器的「清除浏览数据」功能，清空缓存和Service Worker。
2. 用Shift+F5硬刷新页面，或者直接用隐私模式测试，避免旧配置干扰。

如果还是不行，可以尝试暂时关闭PWA的Service Worker（在Chrome的DevTools > Application > Service Workers里点「Unregister」），测试Auth是否正常——如果正常，那就是Service Worker的问题无疑。

内容来源于stack exchange