使用FirebaseUI与Firebase示例代码实现Facebook登录认证失败求助

问题概述 #

基于Firebase官方费用追踪项目，使用firebaseui-web-react封装库实现认证功能，添加Facebook登录后，开发环境与线上部署版本均无法完成认证流程，但邮箱/密码、Google登录功能正常。已按文档完成基础配置：获取Facebook App ID/Secret、在Firebase控制台启用Facebook登录、配置重定向URI。

排查与解决方案 #

1. 确认Facebook应用测试用户配置 #

• 若Facebook应用处于开发模式，需将测试使用的Facebook账号（含你的管理员账号）添加到应用的「测试用户」列表（Facebook开发者平台→应用→角色→测试用户）。开发模式下仅测试用户可访问应用登录功能。

2. 验证重定向URI的完整性 #

• 在Facebook开发者平台的「Facebook登录」设置中，确保添加所有环境的重定向URI：
  • 开发环境：http://localhost:3000/__/auth/handler（替换为你的本地端口）
  • 线上环境：https://djawn-d8dbf.web.app/__/auth/handler
• URI需与Firebase控制台中Facebook登录配置页显示的地址完全一致，包括协议（http/https）、域名、路径，无多余空格或字符。

3. 检查Firebase Auth的运行模式 #

• 进入Firebase控制台→Auth→使用情况，确认当前为开发模式：开发模式允许任意用户注册登录，若误设为生产模式，需将你的Facebook账号对应的用户添加到「授权用户」列表才能登录。

4. 排查浏览器弹窗与控制台错误 #

• 尝试Facebook登录时，确认浏览器未阻止弹窗（部分浏览器默认拦截第三方弹窗）；
• 打开浏览器开发者工具（F12）→Console标签，查看登录过程中的错误信息（如OAuth授权失败、重定向不匹配、权限缺失等），这些信息是定位问题的核心依据。

5. 确认Facebook应用的产品配置 #

• 在Facebook开发者平台，确保「Facebook Login」产品已启用；
• 开启「Client OAuth Login」「Web OAuth Login」选项，线上环境需开启「Force HTTPS」；
• 检查「Valid OAuth Redirect URIs」列表中是否包含所有需要的URI，无遗漏。

6. 验证依赖版本兼容性 #

• 检查package.json中firebase与react-firebaseui的版本是否匹配（如firebase v9.x需搭配react-firebaseui v6.x及以上版本），版本不兼容可能导致认证流程异常。

7. 临时切换登录流测试 #

• 暂时将uiConfig中的signInFlow从popup改为redirect，测试是否能正常完成登录，排除弹窗模式的兼容性问题。

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