部署至Netlify后Firebase手机OTP认证无法发送验证码问题

1. 检查Firebase控制台的授权域配置 #

本地localhost默认在Firebase Auth的授权域列表里，但Netlify部署后的域名（比如your-site.netlify.app或自定义域名）需要手动添加：

• 打开Firebase控制台，进入你的项目 → 认证 → 登录方法 → 下拉到「授权域」
• 点击「添加域」，输入Netlify的域名（包含自定义域名），保存后等待配置生效（通常几分钟内）

2. 确认Netlify的环境变量配置正确 #

React项目里的Firebase配置依赖环境变量（比如REACT_APP_FIREBASE_API_KEY），本地.env文件不会上传到Netlify，必须在Netlify后台手动配置：

• 登录Netlify，进入你的站点 → 站点设置 → 环境变量 → 「添加变量」
• 把本地.env里所有Firebase相关的变量（REACT_APP_FIREBASE_API_KEY、REACT_APP_FIREBASE_AUTH_DOMAIN、REACT_APP_FIREBASE_PROJECT_ID等）完整复制过来，确保变量名和值与本地完全一致
• 触发Netlify后台的「重新部署」，让新的环境变量生效

3. 验证reCAPTCHA的域名配置 #

Firebase手机认证依赖reCAPTCHA，生产环境需确保域名在允许列表中：

• 若使用Firebase默认reCAPTCHA，检查Firebase控制台「认证」→「登录方法」→「电话号码」里的reCAPTCHA设置，确认已包含Netlify域名
• 若自定义了reCAPTCHA密钥，在Google reCAPTCHA后台把Netlify域名加到允许的域名列表中

4. 确保站点使用HTTPS #

Firebase Auth在生产环境强制要求HTTPS（localhost例外），Netlify默认会配置HTTPS，但自定义域名需确认SSL证书已生效：

• 访问站点，检查地址栏的锁形图标，确保使用HTTPS协议
• 若自定义域名SSL有问题，在Netlify「域名管理」里重新配置证书

5. 排查浏览器控制台错误 #

部署后打开浏览器开发者工具（F12），切换到「控制台」标签，查看Firebase相关错误信息：

• 常见错误如auth/operation-not-allowed（授权域未添加）、auth/invalid-api-key（环境变量错误），可根据错误提示针对性解决

内容的提问来源于stack exchange，提问作者Chandra Sekhar Moturu