React Native中Supabase+Twilio手机认证无法发送OTP问题求助

核心问题定位 #

你遇到的AuthRetryableFetchError: Network request failed属于网络层面请求失败，优先从格式规范、网络连通、配置准确性这几个方向排查。

具体排查步骤 #

• 修复手机号格式：代码中手机号带有空格（+61 xxx xxx xxx），必须严格遵循E.164标准，去掉所有空格，改为+614xxxxxxxxx格式。Supabase对手机号格式校验严格，不符合规范会直接导致请求失败。
• 排查模拟器网络：Android模拟器常出现网络波动，先确认模拟器能正常访问外网（比如打开内置浏览器访问公开网站）。可尝试重启模拟器，或切换网络模式（如从Wi-Fi切换到模拟移动数据）；若连接本地Supabase实例，需用10.0.2.2代替localhost才能让模拟器访问本地服务。
• 验证Supabase配置：
  • 确认Supabase控制台已开启手机号认证（路径：Auth > Providers > Phone）
  • 核对Twilio的Account SID、Auth Token、发送号码在Supabase后台填写完全正确，且Twilio账户状态正常（无欠费、无发送限制）
  • 检查Supabase初始化时的URL和anon key是否准确，无拼写错误
• 增强日志排查：修改代码打印完整错误信息，而非仅输出'error'，便于定位具体问题：

  if (error) { 
    console.log('完整错误信息:', error); 
    return; 
  }
  

• 真机测试：模拟器的网络或权限限制可能导致请求失败，直接在Android真机上运行测试，排除模拟器环境问题。
• 检查权限与依赖：
  • 确保AndroidManifest.xml中添加了网络权限：<uses-permission android:name="android.permission.INTERNET" />
  • 确认@supabase/supabase-js使用最新稳定版，避免版本兼容性问题

修正后的代码示例 #

async function signInWithPhoneNumber() {
  // 严格遵循E.164格式的手机号
  const validPhone = '+61412345678';
  let { data, error } = await supabase.auth.signUp({ 
    phone: validPhone, 
    password: 'some-password' 
  });  
  setConfirm(data);
  console.log('返回数据:', data);
  if (error) { 
    console.log('错误详情:', error);
    return; 
  }
}

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