React Native集成Supabase认证时出现网络请求失败及Google SSO登录无响应问题

看起来你在React Native + Expo项目里集成Supabase认证时遇到了两个头疼的问题：邮箱密码注册触发AuthRetryableFetchError: Network request failed，Google SSO登录也没响应。我结合你的代码和错误日志，整理了几个核心排查点和解决方案，你可以一步步试下：

一、先解决「网络请求失败」的核心问题 #

错误里status: 0的提示很关键——这说明请求根本没成功发往Supabase服务器，或者在本地就被拦截了，优先排查以下几点：

1. 确认Supabase URL和密钥的准确性 #

你的supabase.ts已经做了初始化日志，先仔细看日志里的信息：

• 确保URL是完整的Supabase项目地址（格式应该是https://xxxxxx.supabase.co，不能缺漏https://，也不能带多余的路径后缀）
• 匿名密钥要和Supabase后台「Settings」->「API」里的「anon public key」完全一致，注意不要复制到多余的空格或者漏掉末尾字符

可以在初始化后加一行日志，直接验证客户端配置：

console.log('Supabase 客户端配置:', supabase.config)

如果这里显示URL或密钥为undefined，说明环境变量加载有问题。

2. 排查Expo环境变量加载异常 #

Expo对环境变量的加载有严格要求，你可以检查：

• .env文件是否放在项目根目录，文件名有没有写错（比如写成.env.local但没配置加载规则）
• 确认已经安装了expo-constants或者react-native-dotenv，并且在babel.config.js里配置了@env的插件（比如用babel-plugin-module-resolver或者react-native-dotenv的babel配置）
• 重启Expo开发服务器时加清除缓存参数：expo start -c，避免旧的缓存影响

3. 检查网络和Supabase项目状态 #

• 测试模拟器/真机的网络：可以在浏览器里打开你的Supabase项目URL，确认能正常访问后台
• 去Supabase后台「Settings」->「Status」，确认项目处于「Running」状态，没有被暂停

4. Expo专属的网络适配 #

iOS模拟器偶尔会有网络请求限制，你可以：

• 切换到真机测试，真机的网络请求逻辑更接近生产环境
• 如果是iOS，确认项目的Info.plist没有限制HTTPS请求（Supabase用的是HTTPS，所以一般没问题，但如果有自定义代理可能会影响）

二、解决Google SSO无响应的问题 #

Google SSO没反应，大概率和重定向URL配置或回调处理有关：

1. 确保重定向URL完全一致 #

你的signInWithProvider里用的是innersight://auth/callback，必须同时满足：

• 在Supabase后台「Authentication」->「Providers」->「Google」的「Allowed Redirect URLs」里添加这个地址
• 在Google Cloud平台的OAuth客户端配置里，「Authorized redirect URIs」也添加同一个地址
• 你的Expo项目已经配置了对应的深度链接：
  安装expo-linking：npx expo install expo-linking
  在app.json里添加scheme：

  {
    "expo": {
      "scheme": "innersight",
      // 其他配置...
    }
  }
  

2. 完善Deep Link回调处理 #

你的createSessionFromUrl函数逻辑没问题，但需要在App入口监听链接打开事件，确保回调能被触发：

// 比如在App.tsx里
import * as Linking from 'expo-linking';
import { createSessionFromUrl } from './path/to/supabase';

useEffect(() => {
  // 处理打开App时的链接
  const handleOpenUrl = async (url: string) => {
    try {
      await createSessionFromUrl(url);
      console.log('Session created successfully from deep link');
    } catch (err) {
      console.error('Failed to process deep link:', err);
    }
  };

  // 监听实时链接打开事件
  const subscription = Linking.addEventListener('url', (event) => handleOpenUrl(event.url));
  // 检查App启动时的初始链接
  Linking.getInitialURL().then(url => url && handleOpenUrl(url));

  return () => subscription.remove();
}, []);

3. 检查Google OAuth的基础配置 #

• 去Google Cloud平台，确认你的OAuth客户端是对应类型：如果是模拟器测试，选「桌面应用」类型会更稳定；真机测试选「iOS应用」
• 确认OAuth consent screen已经添加了测试用户（如果是未发布的应用），否则只有项目所有者能登录

三、针对你的代码的优化建议 #

1. 完善Supabase客户端配置 #

给客户端加上React Native专属的认证存储配置，避免会话丢失或异常：

import AsyncStorage from '@react-native-async-storage/async-storage';

export const supabase = createClient(
  EXPO_PUBLIC_SUPABASE_URL,
  EXPO_PUBLIC_SUPABASE_ANON_KEY,
  {
    auth: {
      storage: AsyncStorage,
      autoRefreshToken: true,
      persistSession: true,
      detectSessionInUrl: false, // 我们自己处理Deep Link，所以关闭自动检测
    },
  }
);

记得先安装@react-native-async-storage/async-storage：npx expo install @react-native-async-storage/async-storage

2. 增强错误日志 #

在authHelpers的各个方法里添加更详细的日志，方便定位问题：

signUp: async (email: string, password: string, name?: string) => {
  console.log(`尝试注册邮箱: ${email}`);
  const [error, data] = await safeAwait(
    supabase.auth.signUp({
      email,
      password,
      options: { data: { name: name ?? '' } },
    })
  );
  if (error) console.error('注册错误详情:', error);
  return { data, error };
},

四、测试顺序建议 #

1. 先测试简单的数据库查询，验证Supabase客户端能正常连接：

   const testConnection = async () => {
     const { data, error } = await supabase.from('profiles').select('*').limit(1);
     console.log('数据库连接测试:', data, error);
   }
   testConnection();
   

   如果这个查询也报错，优先解决网络连接问题；如果正常，再排查认证模块。
2. 解决网络问题后，先测试邮箱密码登录/注册，再测试Google SSO流程。
3. 可以先在Supabase后台「Authentication」->「Providers」->「Google」里点击「Test Provider」，验证Google端的配置是否正常。

内容来源于stack exchange