Expo React Native手机号登录注册：RecaptchaVerifier导出错误求助

问题根源 #

RecaptchaVerifier是Firebase Web SDK专属组件，原生React Native环境并不支持，直接从firebase/auth导入必然报错。而expo-firebase-recaptcha已被废弃，加上你无法使用苹果静默通知（需开发者账号），得换用适配React Native的隐形reCaptcha方案。

可行解决方案 #

方案1：React Native Firebase Auth + 第三方隐形reCaptcha组件 #

1. 替换依赖：使用@react-native-firebase/auth（专为React Native优化的Firebase Auth库，而非Web版firebase/auth）。
2. 集成第三方隐形reCaptcha组件，比如react-native-google-recaptcha，配置为隐形模式：
   • 安装依赖：npm install react-native-google-recaptcha
   • 先触发reCaptcha验证拿到令牌，再将令牌传入signInWithPhoneNumber的验证器参数中。

示例代码片段：

import React, { useRef, useState } from 'react';
import { View, Button, TextInput } from 'react-native';
import auth from '@react-native-firebase/auth';
import GoogleRecaptcha from 'react-native-google-recaptcha';

const PhoneLogin = () => {
  const recaptchaRef = useRef(null);
  const [phoneNumber, setPhoneNumber] = useState('');

  const handleSendCode = async () => {
    // 触发隐形reCaptcha验证
    const token = await recaptchaRef.current.open();
    if (!token) {
      console.log('reCaptcha验证失败');
      return;
    }

    // 自定义Firebase验证器，传入reCaptcha令牌
    const appVerifier = {
      type: 'recaptcha',
      verify: () => Promise.resolve(token),
    };

    try {
      const confirmation = await auth().signInWithPhoneNumber(phoneNumber, appVerifier);
      // 保存confirmation用于后续验证码验证
      console.log('验证码已发送', confirmation);
    } catch (error) {
      console.error('发送验证码失败', error);
    }
  };

  return (
    <View>
      <TextInput
        value={phoneNumber}
        onChangeText={setPhoneNumber}
        placeholder="输入手机号"
        keyboardType="phone-pad"
      />
      <Button title="发送验证码" onPress={handleSendCode} />
      <GoogleRecaptcha
        ref={recaptchaRef}
        siteKey="你的reCaptcha Site Key"
        size="invisible"
        onVerify={(token) => console.log('验证令牌', token)}
      />
    </View>
  );
};

export default PhoneLogin;

方案2：使用Firebase App Check替代（推荐） #

Firebase App Check可替代reCaptcha的安全验证，且原生支持React Native：

1. 在Firebase控制台启用App Check，选择reCAPTCHA v3作为验证提供者（隐形模式）。
2. 安装依赖：npm install @react-native-firebase/app-check
3. 初始化App Check：

import appCheck from '@react-native-firebase/app-check';

appCheck().initializeAppCheck({
  provider: appCheck.RecaptchaV3Provider('你的reCaptcha Site Key'),
  isTokenAutoRefreshEnabled: true,
});

4. 之后调用signInWithPhoneNumber时，Firebase Auth会自动使用App Check完成验证，无需手动处理reCaptcha令牌。

注意事项 #

• 在Firebase控制台配置reCaptcha允许的包名/域名：Expo调试环境需添加exp://开头的调试地址，生产环境添加构建后的正式包名。
• 测试时尽量使用真实设备，避免模拟器虚拟手机号，防止验证被拦截。

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