Firebase托管网站用GoogleAuthProvider登录遇400: redirect_uri_mismatch错误

问题根源 #

这个错误的核心是：当你在自定义域名（如www.{mywebsite}.com）上使用Firebase Auth弹窗登录时，必须在Google Cloud控制台中手动配置对应的重定向URI。多数入门教程只覆盖本地开发场景（localhost），Firebase会自动处理本地的重定向配置，因此跳过了这一步，导致部署到自定义域名后出错。

分步解决办法 #

1. 进入关联的Google Cloud项目
   打开Firebase控制台→进入目标项目→点击左上角「项目设置」→拉到「常规」标签页底部，点击「您的项目也在Google Cloud Console中」的链接，直接跳转到绑定的Google Cloud项目。

2. 配置OAuth 2.0客户端ID的重定向URI
   在Google Cloud控制台中，搜索进入「API和服务」→「凭据」页面：

   • 找到对应Firebase Web应用的OAuth 2.0客户端ID（如果没有，就新建一个「Web应用」类型的客户端ID）
   • 点击编辑该客户端ID，在「已授权的重定向URI」列表中添加错误提示里的地址：https://www.{mywebsite}.com/__/auth/handler
   • 保存配置，等待5-10分钟让设置生效（Google的配置同步有延迟）

3. 修复代码中的错误
   你初始化GoogleAuthProvider时错误传入了firebaseConfig，这个构造函数不需要任何参数，修正为：

   const GoogleProvider = new GoogleAuthProvider();
   

4. 验证Firebase托管域名配置
   如果你的网站是通过Firebase托管部署的，确保在Firebase控制台「托管」→「设置」中，已正确绑定www.{mywebsite}.com，且域名状态显示为「已验证」。

额外注意点 #

• 本地测试时，http://localhost的重定向URI会被Firebase自动加入允许列表，无需手动配置
• 检查重定向URI的拼写：确保域名、路径完全匹配，注意大小写和斜杠
• 确认Google Cloud中的OAuth同意屏幕已配置完成：至少设置应用名称、支持邮箱，若处于测试状态，需将测试用户添加到列表中

内容的提问来源于stack exchange，提问作者Thea Young