This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

使用 Supabase 为你的 React Native 应用添加 Postgres 数据库和用户身份验证

Supabase 是一个构建于 Postgres 之上的后端即服务（BaaS）应用开发平台。它从你的数据库生成 REST API，并使用行级安全策略保护数据，因此你的 React Native 应用可以直接查询该 API，中间无需服务器。

EAS CLI 集成会自动完成标准设置：授权你的 Supabase 帐户、创建或关联项目、安装 SDK，以及写入环境变量。你也可以手动设置，然后不加修改地使用本指南的其余部分。

你将学到什么

• 在 React Native 应用中安装和配置 Supabase
• 使用第 2 步中创建的客户端添加身份验证
• 为本地开发、Production 和 Preview设置环境
• 管理集成并排查常见问题

安装和配置 Supabase

import 'expo-sqlite/localStorage/install';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!;
const supabasePublishableKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY!;

export const supabase = createClient(supabaseUrl, supabasePublishableKey, {
  auth: {
    storage: localStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

create table public.todos (
  id bigint generated always as identity primary key,
  title text not null
);
alter table public.todos enable row level security;
create policy "Anyone can read todos" on public.todos for select using (true);
grant select on public.todos to anon, authenticated;
insert into public.todos (title) values ('Hello from Supabase');

import { useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import { supabase } from '@/lib/supabase';

export default function Index() {
  const [titles, setTitles] = useState<string[]>([]);

  useEffect(() => {
    supabase
      .from('todos')
      .select()
      .then(({ data, error }) => {
        if (error) {
          setTitles([error.message]);
          return;
        }
        setTitles(data.map(todo => todo.title));
      });
  }, []);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      {titles.map(title => (
        <Text key={title}>{title}</Text>
      ))}
    </View>
  );
}

有关这些步骤背后的概念，请参阅 Supabase 数据库概览：

添加身份验证

第 2 步中的客户端已经会存储会话，因此电子邮件和密码登录无需额外配置。新的 Supabase 项目默认会确认电子邮件地址。首次调用 signUp 时，在地址确认之前，或者你在项目的电子邮件提供商设置中关闭 Confirm email 之前，返回的 data.user 中 data.session 会设置为 null。

autoRefreshToken 会在 Android 和 iOS 上持续运行刷新循环，因此 Supabase 的startAutoRefresh 参考文档建议将该循环与应用状态绑定。将以下内容添加到客户端文件中：

import { AppState } from 'react-native';

AppState.addEventListener('change', state => {
  if (state === 'active') {
    supabase.auth.startAutoRefresh();
  } else {
    supabase.auth.stopAutoRefresh();
  }
});

OAuth 提供商和魔法链接需要一个返回应用的深层链接，详见 Supabase 的移动端深层链接指南。

设置环境

connect 会将这些值存储为EAS 环境变量，因此每个构建或更新都会从其运行的环境中读取这些值。

一个 Supabase 项目包含一个环境的数据，因此不同环境意味着不同项目。创建第二个项目之前，请查看你的 Supabase 计划限制。

Development 使用 Supabase CLI在本地运行。启动 Docker，然后运行：

将 .env.local 中的托管值替换为 supabase status 输出的 API URL 和可发布密钥。在 shell 中导出的变量优先于 .env.local，因此请编辑文件，而不要导出变量。本地数据库初始为空，因此也要针对它运行表 SQL。重新运行 connect 会将托管值写回。

信息 本地 URL 指向你的计算机。实体设备或 Android Emulator 无法访问它，因此应在这里使用计算机的 LAN 地址，而不是 127.0.0.1。

Production 使用 connect 设置的项目。

Preview 默认没有自己的项目。若要为 Preview 或任何其他 EAS 环境提供自己的托管项目，请使用 --environment 重新运行 connect。这会创建第二个项目，并计入计划的活跃项目限制：

新项目的 URL 和密钥仅会写入指定的环境，其他环境仍会指向第一个项目。如果目标环境中已经存在 EXPO_PUBLIC_SUPABASE_* 值，命令会在替换这些值前要求确认。与不带 --environment 的 connect 不同，该命令不会安装 SDK，也不会修改 .env.local。不能将 --environment 与 --link、--reauth 或 --organization 结合使用。

若要让 EAS 环境指向已有的 Supabase 项目，请使用 eas env:set 自行设置两个变量，而不要使用 --environment。如上所示，先将共享变量替换为两个变量，以便其他环境继续使用当前项目。

管理集成

之后可以使用两个命令管理集成：

dashboard 会打开已关联的 Supabase 项目。disconnect 只会移除 Expo 端的关联。你的 Supabase 项目、其中的数据以及环境变量都不会改变。

断开关联后，connect 将不再找到已关联的项目，因此会创建一个新项目。若要让应用重新指向同一个项目，请使用其引用 ID 运行 connect --link。

手动设置

connect 是标准 Supabase 设置流程的快捷方式。手动执行步骤如下：

1. 在 database.new 创建项目。

2. 从 API Settings 复制项目 URL，并从 API Keys 复制可发布密钥。

3. 安装 SDK：

   Terminalnpmyarnpnpmbun

   Copy

   - npx expo install @supabase/supabase-js expo-sqlite

   - yarn expo install @supabase/supabase-js expo-sqlite

   - pnpm expo install @supabase/supabase-js expo-sqlite

   - bun expo install @supabase/supabase-js expo-sqlite

4. 将 expo-sqlite 配置插件添加到你的应用配置中。

5. 在 .env.local 中设置 EXPO_PUBLIC_SUPABASE_URL 和 EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY，然后根据第 2 步创建客户端文件。

故障排除

延伸阅读