You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

React+TypeScript中Firebase Auth电话OTP认证出现auth/invalid-app-credential错误求助

React+TypeScript中Firebase Auth电话OTP认证出现auth/invalid-app-credential错误求助

嘿,我看你碰到了Firebase电话OTP认证的棘手问题——测试手机号能正常验证,但自己的私人号码就触发auth/invalid-app-credential错误,而且已经确认配置匹配、是Blaze付费计划、号码格式也没问题,我来帮你梳理几个大概率能解决问题的排查方向:


1. 优先检查域名授权(最可能的原因)

测试手机号不受域名限制,但真实号码的OTP发送要求你的访问域名必须在Firebase的授权列表里:

  • 打开Firebase控制台,进入你的项目 → Authentication设置授权域名
  • 确认当前开发/生产环境的域名已经添加进去(比如本地开发要加localhost,线上要加你的正式域名)
  • 另外,Google reCAPTCHA的授权域名也要同步检查(Firebase的reCAPTCHA通常会关联Firebase授权域名,但偶尔需要手动确认)

2. 排查代码里的reCAPTCHA逻辑问题

看你在handleCodeRequest里手动调用了recaptchaVerifier.verify(),但其实signInWithPhoneNumber会自动触发reCAPTCHA验证流程,手动调用反而可能导致凭证冲突,建议修改这段逻辑:

const handleCodeRequest = async () => {
    if (email) {
        Toast.show("info", `A code has been sent to your email: ${maskEmail(email)}`);
    } else if (phoneNumber) {
        try {
            // 只初始化reCAPTCHA,无需手动调用verify
            initializeRecaptcha();
            
            // 直接调用发送验证码的方法
            const result = await sendCode(phoneNumber);
            if (result) {
                setVerificationId(result.verificationId);
                Toast.show("info", `A verification code was sent to ${phoneNumber}.`);
                setIsTimerActive(true);
            }
        } catch (error) {
            console.error("Error sending verification code:", error);
            Toast.show("error", "Failed to send verification code. Please try again.");
        }
    }
};

同时检查initializeRecaptcha里的挂载逻辑:把实例挂在window上没问题,但要确保组件不会重复初始化导致实例冲突,比如可以用useRef代替window来存储实例,避免全局变量的潜在问题。

3. 检查Firebase项目的电话认证配置

  • 确认Firebase控制台Authentication登录方式电话已经启用,并且没有勾选"仅允许测试电话号码"的选项
  • 查看Blaze计划的计费状态:有没有欠费?付费状态异常也会导致服务受限
  • 部分国家/地区的电话验证需要额外的身份验证,你可以在电话认证的设置页面查看是否有地区限制提示

4. 排查请求的详细错误信息

打开浏览器开发者工具的Network面板,找到失败的accounts:sendVerificationCode请求,查看响应体里的详细错误描述——auth/invalid-app-credential只是大类错误,响应体里通常会有更具体的原因,比如API_KEY_NOT_VALIDDOMAIN_NOT_WHITELISTED等,能帮你精准定位问题。


备注:内容来源于stack exchange,提问作者Saim Sajid

火山引擎 最新活动