Docs Overview/
Supabase 集成/

Supabase 集成

Supabase Authentication（通常简称为 Supabase Auth）是 Supabase 平台提供的完整用户认证和管理系统。它允许开发者轻松实现用户注册、登录、身份验证和访问控制功能，而无需从零构建这些复杂的安全系统。


概览

本指南为开发者提供快速集成 Supabase Auth 的步骤说明，以及基础的边缘函数功能开发，并提供将项目部署在 EdgeOne Pages 的教程。下文将详细介绍集成步骤，快速完成项目中的用户管理功能开发。


快速入门

您可以选择 Pages 提供的 Supabase Auth 集成模版，快捷迅速进入到开发当中，点击 Supabase Auth Starter 模版。本教程大致分为三步：Supabase 配置、开发调试、EdgeOne Pages 部署配置，下面将详细介绍每个步骤的具体操作。


Supabase 准备

1、账号注册和配置

如果您是首次接触 Supabase，请参阅我们的 Supabase 集成指南，获取账户注册及环境初始化的完整流程。


2、Authentication 介绍

Supabase 平台提供的 Authentication 功能可高效管理用户数据。通过左侧导航栏访问 Authentication 管理界面，您将看到预配置的用户数据表及相关设置。此界面支持配置电子邮件验证流程、访问策略(Policies)以及会话(Session)参数等核心功能。如需深入了解特定功能，请参阅官方文档中的详细说明。



本地开发

1、Supabase 用户管理接口说明

Supabase 平台为用户管理提供了全面的预置API接口。您可通过左侧导航栏的 API Docs 部分，选择 User Management 选项卡查阅这些接口文档。

这套完备的接口体系覆盖了主要用户管理需求。在后续章节中，我们将详细探讨如何在边缘函数环境中调用这些 Supabase 接口，实现 Next.js 应用中的完整用户管理流程。



2、边缘函数调用 Supabase 用户管理接口

开始实践前，请先参考 EdgeOne CLI 文档了解边缘函数的本地开发与调试流程。本指南将基于 Supabase Auth Starter 模版开发代码，演示如何实现用户身份管理的核心功能，包括注册、登录、注销以及密码管理等操作。

首先，在您的 Next.js 项目根目录创建 .env 文件，并配置以下必要环境变量：
# supabase 连接参数
SUPABASE_URL=https://xxxxx.supabase.co
SUPABASE_ANON_KEY=xxxx

# local dev vars
# 前端启动地址
FRONT_END_URL_DEV=http://localhost:5173/

# 后台边缘函数地址
VITE_PUBLIC_API_URL_DEV=http://localhost:8088/

DEV=true

本地开发启动项目可以在命令行执行 npm run dev 启动前端，前端运行成功后点击 New Terminal，并在新的命令行接口执行 edgeone pages dev --fePort=5173 启动边缘函数后台服务。

在边缘函数 functions 文件夹下需要创建两套接口，分别是 auth 认证核心功能接口和 lib 基本功能函数。


在 lib 基本功能函数中创建 Supabase 客户端配置。
import { createClient } from "@supabase/supabase-js";

export const createSupabaseClient = (env, access_token) => {
  return createClient(
    // 连接参数
    env.SUPABASE_URL,
    env.SUPABASE_ANON_KEY,
    {
      // 认证配置
      auth: {
        autoRefreshToken: false,
        persistSession: false,
        detectSessionInUrl: false
      },
      // 全局配置
      global: {
        headers: access_token ? {
          Authorization: Bearer ${access_token}
        } : {}
      }
    }
  );
}

在 auth 中以用户注册功能为例，我们可在 API 层实现定制化的数据校验逻辑。首先对邮箱格式与密码强度进行严格验证，随后通过导入createSupabaseClient工具函数，并调用await createSupabaseClient(env).auth.xxx()方法序列来无缝对接 Supabase 提供的服务。
import { createSupabaseClient } from "../libs/supabase";

export async function onRequestPost(context) {
  const { request, env } = context;
  const formData = await request.formData();
  const email = formData.get("email")?.toString();
  const password = formData.get("password")?.toString();

  if (!email || !password) {
    return new Response("Email and password are required", { status: 400 });
  }

  const { data, error } = await createSupabaseClient(env).auth.signUp({
    email,
    password,
  });

  if (error) {
    return new Response(error.code, { status: 500 });
  }
 
  return new Response(null, { status: 200 });
}

其他身份验证功能如登录、注销及密码管理等，均可采用相似的边缘函数实现模式。建议参考提供的模板代码，以便了解这些功能的实现。


部署到 EdgeOne Pages

这一节会详细介绍将开发好的项目部署到 EdgeOne Pages。

1、上传项目到 git（从模版创建项目忽略此步）

创建新仓库
登录您的 GitHub 账户，进入 Dashboard
点击右上角的 New 按钮
填写仓库名称、描述等信息
选择仓库可见性（Public 或 Private）
点击 Create repository 完成创建

上传本地项目
在本地项目目录下初始化 Git（如未初始化）
将项目文件提交并推送到新建的远程仓库

然后在本地关联远程仓库，并上传本地代码。
# Push your code to your git repository (e.g. GitHub, Gitee).

git init
git add .
git commit -m "First commit"
git remote add origin "your Git address"
git push -u origin master
通过以上步骤，您的项目代码将成功托管至 GitHub，为后续部署做好准备。

进入到 EdgeOne Pages 控制台中，上传自己的项目到 Github，点击 Create project -> Import Git repository，选择您的项目。


2、填写环境变量

在部署设置页面填写 Environment Variables。如果是自定义部署，Variable name 应该与本地项目中的 .env 保持一致。


当出现 "Congratulations！" 表示部署成功，部署大致会花费1-3分钟。如果项目出现部署失败，可以根据 Build Logs 和 Build Summary 信息修改项目，或者联系工作人员解决。


部署成功后到项目首页复制 Domain。


接下来，访问 Supabase 控制台并导航至 URL 配置部分。将您的域名信息复制到 Site URL 字段中，这样在用户完成注册流程后，将自动重定向至您的网站主页。



更多相关内容

Supabase 集成详细操作： Supabase 集成指南
Supabase 更多 Auth 功能：Supabase auth 文档
了解 EdgeOne CLI 的使用：EdgeOne CLI 使用说明
了解更多的边缘函数使用：边缘函数使用文档