使用Expo+React Native连接Supabase时遇URL无效错误求助

问题描述 #

我用React Native结合Expo框架尝试连接Supabase服务，代码完全按照Supabase官方Expo集成教程编写：

lib/supabase.ts

import 'react-native-url-polyfill/auto'
import * as SecureStore from 'expo-secure-store'
import { createClient } from '@supabase/supabase-js'

const ExpoSecureStoreAdapter = {
  getItem: (key: string) => {
    return SecureStore.getItemAsync(key)
  },
  setItem: (key: string, value: string) => {
    SecureStore.setItemAsync(key, value)
  },
  removeItem: (key: string) => {
    SecureStore.deleteItemAsync(key)
  },
}

const supabaseUrl = String(process.env.SUPABASE_URL)
const supabaseAnonKey = String(process.env.SUPABASE_KEY)

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: ExpoSecureStoreAdapter as any,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false
  },
})

运行时出现错误：

TypeError: Invalid URL: undefined/auth/v1, js engine: hermes

已经尝试清除缓存、重新安装node_modules，且确认密钥正确，但问题仍未解决。

解决方案 #

问题根源 #

Expo不支持直接通过process.env读取无特定前缀的环境变量，你代码中使用的process.env.SUPABASE_URL和process.env.SUPABASE_KEY实际为undefined，导致Supabase客户端初始化时无法构造有效请求URL。

修复步骤 #

1. 创建并配置.env文件
   在项目根目录新建.env文件，添加带EXPO_PUBLIC_前缀的环境变量（Expo仅暴露以此前缀开头的变量给客户端代码）：

   EXPO_PUBLIC_SUPABASE_URL=你的Supabase项目URL
   EXPO_PUBLIC_SUPABASE_KEY=你的Supabase匿名密钥
   

2. 修改环境变量读取代码
   更新lib/supabase.ts中的变量定义，改为读取带前缀的环境变量：

   const supabaseUrl = String(process.env.EXPO_PUBLIC_SUPABASE_URL)
   const supabaseAnonKey = String(process.env.EXPO_PUBLIC_SUPABASE_KEY)
   

3. 重启Expo开发服务器
   修改.env文件后必须重启Expo开发服务器，否则新的环境变量不会生效。

验证方式 #

可以在代码中临时添加打印语句，确认环境变量是否正确读取：

console.log('Supabase URL:', process.env.EXPO_PUBLIC_SUPABASE_URL)
console.log('Supabase Anon Key:', process.env.EXPO_PUBLIC_SUPABASE_KEY)

若打印出正确的URL和密钥，说明配置生效。

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