supabase_flutter

Flutter 集成 Supabase。该软件包可让开发人员轻松构建安全且可扩展的产品。

Supabase 是一个开源的 Firebase 替代品。我们提供了一项服务，用于

  • 监听数据库更改
  • 查询您的表，包括过滤、分页和深度嵌套的关系（如 GraphQL）
  • 创建、更新和删除行
  • 管理您的用户及其权限
  • 通过简单的 UI 与数据库进行交互

状态

  • [x] Alpha：开发中
  • [x] 公测版：可供测试。但请对我们温柔点，会有 bug 和缺失的功能。
  • [x] 公测版：稳定。此版本预计不会有破坏性更改，但可能会有 bug。
  • [ ] 生产就绪版

入门

导入包

import 'package:supabase_flutter/supabase_flutter.dart';

在使用之前初始化 Supabase

import 'package:supabase_flutter/supabase_flutter.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  Supabase.initialize(
    url: SUPABASE_URL,
    anonKey: SUPABASE_ANNON_KEY,
    authCallbackUrlHostname: 'login-callback', // optional
    debug: true // optional
  );

  runApp(MyApp());
}

authCallbackUrlHostname 是可选的。它将用于过滤 Supabase 身份验证重定向的深度链接。如果您在应用中使用深度链接来处理其他功能，则需要提供此参数。

debug 是可选的。如果您在调试模式下运行应用（flutter run --debug），则默认启用它。

认证

使用身份验证可以轻松完成。

邮箱认证

import 'package:supabase_flutter/supabase_flutter.dart';

void signIn(String email, String password) async {
  final response = await Supabase.instance.client.auth.signIn(email: _email, password: _password);
  if (reponse.error != null) {
    /// Handle error
  } else {
    /// Sign in with success
  }
}

SupabaseAuthState

它可以帮助您处理来自 Google、Github、Twitter 等第三方服务的深度链接身份验证。

有关更多详细信息，请在此处查看示例 链接

当与嵌套的身份验证流程一起使用时，请记住在导航到新屏幕之前/之后调用 startAuthObserver() 和 stopAuthObserver()，以防止多个观察者同时运行。在此处查看示例 链接

SupabaseAuthRequiredState

它可以帮助您保护需要已认证用户的路由。

有关更多详细信息，请在此处查看示例 链接

signInWithProvider

此方法将自动启动身份验证 URL，并打开浏览器供用户使用第三方登录进行登录。

Supabase.instance.client.auth.signInWithProvider(
  Provider.github,
  options: supabase.AuthOptions(redirectTo: ''),
);

自定义本地存储

默认情况下，supabase_flutter 使用 hive 插件来持久化用户会话。但是，您可以通过创建 LocalStorage 实现来使用任何其他插件。

例如，我们可以使用 flutter_secure_storage 插件将用户会话存储在安全存储中。

// Define the custom LocalStorage implementation
class SecureLocalStorage extends LocalStorage {
  SecureLocalStorage() : super(
    initialize: () async {},
    hasAccessToken: () {
      const storage = FlutterSecureStorage();
      return storage.containsKey(key: supabasePersistSessionKey);
    }, accessToken: () {
      const storage = FlutterSecureStorage();
      return storage.read(key: supabasePersistSessionKey);
    }, removePersistedSession: () {
      const storage = FlutterSecureStorage();
      return storage.delete(key: supabasePersistSessionKey);
    }, persistSession: (String value) {
      const storage = FlutterSecureStorage();
      return storage.write(key: supabasePersistSessionKey, value: value);
    },
  );
}

// use it when initializing
Supabase.initialize(
  ...
  localStorage: SecureLocalStorage(),
);

您可以使用 EmptyLocalStorage 来禁用会话持久化

Supabase.initialize(
  ...
  localStorage: const EmptyLocalStorage(),
);

深度链接配置

Supabase 重定向 URL 配置

  • 转到您的 Supabase 项目的认证设置页面。
  • 您需要在“其他重定向 URL”字段中输入您的应用重定向回调。

重定向回调 URL 应采用此格式：[您的 SCHEME]://[您的 AUTH HOSTNAME]

authentication settings page

Supabase 第三方登录配置

请遵循指南 https://supabase.io/docs/guides/auth#third-party-logins

对于 Android

深度链接可以有任何自定义方案。缺点是任何应用程序都可以声明一个方案，因此请确保您的方案尽可能唯一，例如：HST0000001://host.com。

<manifest ...>
  <!-- ... other tags -->
  <application ...>
    <activity ...>
      <!-- ... other tags -->

      <!-- Deep Links -->
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
        <data
          android:scheme="[YOUR_SCHEME]"
          android:host="[YOUR_HOST]" />
      </intent-filter>
    </activity>
  </application>
</manifest>

对于深度链接，android:host 属性是可选的。

更多信息：https://developer.android.com.cn/training/app-links/deep-linking

对于 iOS

自定义 URL 方案可以…拥有任何自定义方案，并且没有主机特异性、权利或许可文件。缺点是任何应用程序都可以声明任何方案，因此请确保您的方案尽可能唯一，例如：hst0000001 或 myIncrediblyAwesomeScheme。

对于自定义 URL 方案，您需要在
ios/Runner/Info.plist（或通过 Xcode 的 Target Info 编辑器，
在 URL Types 下）进行声明

<!-- ... other tags -->
<plist>
<dict>
  <!-- ... other tags -->
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>[YOUR_SCHEME]</string>
      </array>
    </dict>
  </array>
  <!-- ... other tags -->
</dict>
</plist>

这使得您的应用程序可以通过 您的 SCHEME://ANYTHING 链接启动。

更多信息：https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app

GitHub

https://github.com/supabase/supabase-flutter