• 产品简介
  • 快速开始
    • 导入 Git 仓库
    • 从模板开始
    • 直接上传
    • 从 AI 开始
  • 框架指南
    • 前端
      • Vite
      • React
      • Vue
      • 其他框架
    • 后端
    • 全栈
      • Next.js
      • Nuxt
      • Astro
      • React Router
      • SvelteKit
      • TanStack Start
      • Vike
    • 自定义 404 页面
  • 项目指南
    • 项目管理
    • edgeone.json
    • 缓存配置
    • 错误码
  • 构建指南
  • 部署指南
    • 概览
    • 触发部署
    • 管理部署
    • 部署按钮
    • 使用 Github Action
    • 使用 Gitlab CI/CD
    • 使用 CNB 插件
    • 使用 IDE 插件
    • 使用 CodeBuddy IDE
  • 域名管理
    • 概览
    • 自定义域名
    • 配置 HTTPS 证书
      • 概览
      • 申请免费证书
      • 使用 SSL 托管证书
    • 配置 DNS 的 CNAME 记录
  • 可观测性
    • 概览
    • 指标分析
    • 日志分析
  • Pages Functions
    • 概览
    • Edge Functions
    • Cloud Functions
      • 概览
      • Node Functions
  • 中间件
  • KV 存储
  • 边缘 AI
  • API Token
  • EdgeOne CLI
  • Pages MCP
  • 消息通知
  • 集成指南
    • AI
      • 对话型大模型集成
      • 图片大模型集成
    • 数据库
      • Supabase 集成
      • Pages KV 集成
    • 电商
      • Shopify 集成
      • WooCommerce 集成
    • 支付
      • Stripe 集成
      • Paddle 集成
    • CMS
      • WordPress 集成
      • Contentful 集成
      • Sanity 集成
      • Payload 集成
    • 身份验证
      • Supabase 集成
      • Clerk 集成
  • 最佳实践
    • 使用通用大模型快速搭建 AI 应用
    • 使用边缘 AI 模型快速搭建对话型 AI 站点
    • 使用 Shopify 搭建电商平台
    • 使用 Supabase 和 Stripe 搭建 SaaS 站点
    • 如何快速搭建公司品牌站点
    • 如何快速搭建博客站点
  • 迁移指南
    • 从 Vercel 迁移至 EdgeOne Pages
    • 从 Cloudflare Pages 迁移至 EdgeOne Pages
    • 从 Netlify 迁移至 EdgeOne Pages
  • 排障指南
  • 常见问题
  • 联系我们
  • 产品动态

Supabase 集成

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

本指南为开发者提供结合 Next.js 全栈开发快速集成 Supabase Auth 的步骤说明,并提供部署模版用于开发参考。下文将详细介绍集成步骤,快速完成项目中的用户管理功能开发。


快速入门

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


1、Supabase 准备

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

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



2、一键部署

进入模板页 Supabase Auth Starter,点击 Deploy登录后进入到控制台部署页面。在控制台部署配置面板中,您需要将上面获取的环境变量填入。


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


部署成功后到项目首页复制 Domain。前往 Supabase 控制台并导航至 URL 配置部分。将您的域名信息复制到 Site URL 字段中,这样在用户完成注册流程后,将自动重定向至您的网站主页。



集成详情

部署完成后,系统将在用户的 GitHub 账户下创建相应的代码仓库。本节将介绍项目的实现细节,便于您开展后续功能的集成与开发。


下载代码

前往您的 Github 仓库,复制 Clone 的地址,在终端执行:
git clone https://github.com/${your-github-account}/supabase-auth-starter
cd supabase-auth-starter


核心功能介绍

这是一个基于 Supabase、Next.js 构建的用户认证解决方案模板。项目部份页面采用服务端渲染(SSR)架构,提供用户注册、登录、会话管理功能。

1、用户注册与登录
注册功能 ( signup/page.tsx): 用户通过邮箱和密码创建新账户
登录功能 ( signin/page.tsx): 已注册用户通过凭据进行身份验证
登出功能 ( signout/route.js): 安全清除用户会话和认证状态

2、Cookies 认证逻辑
项目采用基于 HTTP Cookies 的会话管理机制,确保用户状态在客户端和服务端之间的安全传递。Cookie 设置策略 :
access_token : 用户访问令牌,用于API请求认证
refresh_token : 刷新令牌,用于自动续期会话
user_id : 用户唯一标识符

Cookie安全配置 :
// 生产环境配置
{
path: '/',
maxAge: 604800, // 7天有效期
httpOnly: true, // 防止XSS攻击
secure: true, // HTTPS传输
sameSite: 'lax' // CSRF保护
}

3、API 路由架构
signin/route.js: 处理用户登录请求,验证凭据并设置认证cookies
signup/route.js: 处理用户注册请求,创建新用户账户
user/route.js: 验证用户认证状态,返回当前用户信息
signout/route.js: 处理用户登出,清除所有认证cookies


本地开发调试

在下载项目到本地并对项目实现细节进行解析后,开发者可能需要对其进行本地开发、调试或预览。

要开启本地调试时同样需要配置环境变量,这显得比较繁琐。此时可以使用 EdgeOne CLI,它可以将上文在 EdgeOne Pages 部署的配置信息同步到本地,同时也可以直接在本地对项目进行部署。

使用 EdgeOne CLI 需要安装和登陆,具体详情可以参考 EdgeOne CLI 的文档介绍。

ai-agent
你可以这样问我
如何开始使用 EdgeOne Pages?