CrabNote螃蟹笔记

如何接入Supabase

如何接入Supabase

如何接入Supabase 如何接入Supabase Modified September 20, 2025 Code block SQL Copy Supabase Supabase project url: Supabase anon public api key: Site URL for Authentication: Redirect URL for post authentication: Requirements when integrating with Supabase: For authentication, remember to build page (served at route /onauthsuccess) to handle the process after the user finish sign up and the email verification. For database, always use SQL file for table configuration, including add and update operations. Each time database table configuration is needed, create an SQL file in the directory . The naming format for the SQL files is as follows: . The leading number is very important, it will increase by one for a new SQL file each time the database table configuration is need to updated. For each command used in SQL file, always add logic for it. And remember to info the user to copy the sql file content and run it in the supabase project. Use to import the supabase javascript client. Use the following way to create supabase client. 步骤 2:使用 Supabase 身份认证添加账号注册与登录功能 1. 使用提示词 “Add login/signup page using Supabase”,Trickle AI 会自动生成登录注册页面并通过 Supabase 身份认证 API 完成集成。 2. 在 Trickle 应用中注册账号。当使用邮箱注册时,Supabase 会向该邮箱发送验证邮件。 3. 在 Supabase 项目中查看已注册的用户账户。 步骤 3:使用 Supabase 保存和获取数据 通过 Supabase 数据库保存或获取数据。使用类似 “Save data using Supabase database” 的提示词,Trickle AI 会自动生成数据结构并调用 Supabase 数据库 API 进行保存或查询。以下是示例: 1. 使用提示词 “All logged in users can submit questions or answer other users’ questions, and save the questions using the Supabase database.” 2. 将生成的 SQL 文件内容复制到 Supabase 项目中并运行脚本。 3. 现在即可在应用中创建新问题,并将数据保存到 Supabase 数据库中。 const supabase = window.supabase.createClient( '<Supabase project url ', '<Supabase anon public api key ', '<options ' ); 步骤 2:使用 Supabase 身份认证添加账号注册与登录功能 1. 使用提示词 “Add login/signup page using Supabase”,Trickle AI 会自动生成登录注册页面并通过 Supabase 身份认证 API 完成集成。 2. 在 Trickle 应用中注册账号。当使用邮箱注册时,Supabase 会向该邮箱发送验证邮件。 3. 在 Supabase 项目中查看已注册的用户账户。 步骤 3:使用 Supabase 保存和获取数据 通过 Supabase 数据库保存或获取数据。使用类似 “Save data using Supabase database” 的提示词,Trickle AI 会自动生成数据结构并调用 Supabase 数据库 API 进行保存或查询。以下是示例: 1. 使用提示词 “All logged in users can submit questions or answer other users’ questions, and save the questions using the Supabase database.” 2. 将生成的 SQL 文件内容复制到 Supabase 项目中并运行脚本。 3. 现在即可在应用中创建新问题,并将数据保存到 Supabase 数据库中。 如何接入Supabase <aside 🚘 Trickle 官网直通车:https://trickle.so </aside Supabase 是一个功能强大的开源后端即服务(BaaS)平台,旨在帮助开发者构建和扩展 Web 与移动应用。 Supabase 它是 Firebase 的一个稳健替代方案,提供了一系列功能,如 PostgreSQL 数据库、实时数据同步、安全的身份验证与授权、文件存储以及无服务器边缘函数。Supabase 灵活性极高,既支持自托管,也支持托管服务,非常适合需要扩展性、性能和可控性的项目。 Firebase PostgreSQL 设置 Supabase 将 Trickle 应用连接到 Supabase 快速又简单,只需按照以下步骤操作: 步骤 1:创建 Supabase 账户 注册一个 Supabase 账户。可以在 这里 创建新账户,或者如果已有账户,直接 登录。 这里 登录 步骤 2:创建新项目 登录后,进入 Projects 下拉菜单,点击 ‘+ New Project’ 来新建一个 Supabase 项目。 步骤 3:将 Supabase 连接到 Trickle 按照以下步骤,将 Supabase 项目与 Trickle 应用关联: 1. 在项目 首页,向下滚动到 ‘Connecting to your new project’。获取你的 Supabase Project URL 和 Anonymous Public API Key。 2. 复制你的 Trickle App Link。 3. 进入 Supabase 的 Authentication 并点击 URL Configuration。将 Trickle App Link 粘贴到 Site URL 中并点击 Save。这样,当应用用户完成注册和邮箱验证时,Supabase 会跳转到该地址。 Trickle 设置 回到 Trickle,进入需要连接 Supabase 的具体项目: 步骤 1:配置 Knowledge 将以下配置说明复制到 Knowledge 面板中。把你的 Project URL 和 Anonymous Public API Key 填入对应字段,并替换 Site URL for Authentication 与 Redirect URL 为你自己的值。