使用 Supabase

编辑页面

使用 Supabase 为你的 React Native 应用添加 Postgres 数据库和用户认证。


For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

Supabase 是一个 Backend-as-a-Service(BaaS)应用开发平台,提供托管的后端服务,例如 Postgres 数据库、用户身份验证、文件存储、边缘函数、实时同步,以及向量和 AI 工具包。它是 Google Firebase 的开源替代方案。

Supabase 会自动根据你的数据库生成一个 REST API,并采用一种称为行级安全性(RLS)的概念来保护你的数据,使你可以直接从 React Native 应用与数据库交互,而无需经过服务器!

Supabase 提供了一个名为 supabase-js 的 TypeScript 客户端库,用于与 REST API 交互。或者,Supabase 也提供 GraphQL API,如果你愿意,可以使用你喜欢的 GraphQL 客户端(例如 Apollo Client)。

前提条件

前往 database.new 创建一个新的 Supabase 项目。

获取 API 密钥

从 API 设置中获取 Project URL,并从 API Keys 中获取 Publishable key

  1. 打开 Dashboard 中的 API Settings 页面。
  2. 在此页面上找到你的项目 URLservice_role 密钥。
  3. 然后前往 API Keys
  4. 在 API Keys 选项卡下找到你的项目 Publishable key

使用 Supabase TypeScript SDK

使用 supabase-js 是充分利用 Supabase 技术栈全部能力最方便的方式,因为它将所有不同的服务(数据库、auth、realtime、storage、edge functions)都方便地组合在一起。

安装并初始化 Supabase TypeScript SDK

1

在你创建好 Expo 项目 之后,使用以下命令安装 @supabase/supabase-js 和所需依赖:

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

2

创建一个辅助文件来初始化 Supabase 客户端(@supabase/supabase-js)。你需要之前复制的 API URL 和 Publishable key earlier。由于 Supabase 已在数据库中启用 行级安全性,这些变量在你的 Expo 应用中公开是安全的。

utils/supabase.ts
import 'expo-sqlite/localStorage/install'; import { createClient } from '@supabase/supabase-js'; const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL; const supabasePublishableKey = YOUR_REACT_NATIVE_SUPABASE_PUBLISHABLE_KEY; export const supabase = createClient(supabaseUrl, supabasePublishableKey, { auth: { storage: localStorage, autoRefreshToken: true, persistSession: true, detectSessionInUrl: false, }, });

现在你可以在整个应用中 import { supabase } from '/utils/supabase',以利用 Supabase 的全部能力!

接下来的步骤

构建用户管理应用

了解如何在这个快速入门指南中将 Supabase Auth 和 Database 结合起来。

使用 Apple 登录

Supabase Auth 支持在 Web 端以及 iOS、macOS、watchOS 或 tvOS 的原生应用中使用 Apple 登录。

使用 Google 登录

Supabase Auth 支持在 Web 端、原生 Android 应用以及 Chrome 扩展中使用 Google 登录。

OAuth 和 Magic Links 的深度链接

在原生移动应用中执行 OAuth 或发送 magic link 邮件时,了解如何为 Android 和 iOS 应用配置深度链接。

使用 WatermelonDB 的离线优先 React Native 应用

了解如何将数据本地存储并使用 WatermelonDB 与 Postgres 同步。

使用 Supabase Storage 进行 React Native 文件上传

了解如何在 React Native 应用中实现身份验证和文件上传。