Nextjs全栈实战(二):熟悉supabase 的 auth 体系

supabase 是自带账号登录注册等一系列 Auth 功能的,Auth 相关文档在这里。我们刚刚生成的项目模板里,也有登录注册的页面,本地输入 http://localhost:3000/login 即可进入登录注册页。

项目模版里使用最简单的邮箱验证注册,输入邮箱和密码后,点击注册,会收到一封验证邮件,点击邮件里的链接,然后浏览器会重定向到 http://localhost:3000/,并且是已登录态。

修复注册后的自动跳转

但是当我在部署后的线上环境测试注册的时候,发现点击邮箱的链接,然后浏览器也重定向到 http://localhost:3000/,但是注册是成功的,因为可以使用邮箱和密码在 login 页面登录成功。也就是说注册后的自动跳转出现了问题。

经过一番研究后,发现 supabase 后台有个 Auth 相关的 site url 需要配置,Site URL

所以对于部署后的线上环境,需要配置正确的 site url,这样才能正确的跳转到正确的地址。

我把这里改成了 harmonica-home.vercel.app/

然后又新建了一个 supabase project,用于本地开发,这样本地和线上就不会共用一个数据库了。

将测试项目的配置填入 .env.local ,删除了 .env 文件,线上的数据库配置,填入了 vercel 部署时的环境变量里。

至此,线上和本地都可以有正常的注册回调了。

项目模板中 supabase 的初始化

项目模板中 supabase 的初始化,主要是在 utils/supabase 目录下,分为三种使用场景:

  • 客户端
  • 服务端
  • Nextjs 中间件

客户端

代码在 utils/supabase/client.ts 文件中,这里面主要是对 supabase 的初始化,然后导出 supabase 实例。通过引用这个文件的 createClient 方法,就可以在客户端组件里使用 supabase 了。

服务端

代码在 utils/supabase/server.ts 文件中,这里面主要是对 supabase 的初始化,然后导出 supabase 实例。通过引用这个文件的 createClient 方法,就可以在服务端组件里使用 supabase 了。

Nextjs 中间件

代码在 utils/supabase/middleware.ts 文件中,中间件里初始化 supabase 跟服务端里初始化基本相同,只是操作的 cookie 不同,服务端是从请求头里获取,而中间件是从请求对象里获取。

项目模板中 supabase 的使用

服务端场景 + Nextjs server Action 实现登录注册

app/login/page.tsx 文件中,我们可以看到登录注册的页面,这里使用了 supabase.auth 的 signUpsignIn 方法来实现登录注册。

这里使用了 Nextjs 14 新推出的 server Action 来实现登录注册,除此之外,也可以把逻辑放到客户端组件里去实现。

我们还注意到,signUp 方法的 option 入参里有一个 emailRedirectTo 字段,这个字段的作用是,当注册成功后,会重定向到这个字段指定的地址,来实现注册后的自动登录。而且这个地址必须匹配 Auth 相关的 site url,否则就会出现我前面提到的自动跳转失败的问题。

模版项目这里填的地址是 ${origin}/auth/callback,这是一个 Nextjs 的 api 路由,代码在 app/auth/callback/route.ts 文件中。

这个路由的作用是,接收 supabase auth api 的回调,将 supabase 返回的 合法 code 兑换成 登录态 session,然后重定向到 / 页面。这样首页就有登录态了。

重新梳理一下整个注册流程:

  1. 用户在登录注册页面输入邮箱和密码,点击注册按钮
  2. server action 中调用服务端 supabase.auth 的 signUp 方法,并声明 /auth/callback 路由,成功后,supabase 会发送一封验证邮件到用户的邮箱
  3. 用户点击邮箱里的验证链接,重定向到 /auth/callback 路由,这个路由会接收 supabase auth api 的回调,将 supabase 返回的 合法 code 兑换成 登录态 session,然后重定向到 / 页面。这样首页就有登录态了。

middleware 实现登录态刷新

middleware.ts 文件中,我们可以看到,这里先创建了一个 middleware 场景的 supabase client。然后调用 supabase.auth.getSession() 实现登录态刷新。

最后

本章我们创建了一个 supabase 的本地环境,并学习了 supabase 的 auth 系统,方便我们后续对项目的账号系统二次开发做准备。

相关推荐
Cacciatore->1 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~2 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo4 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末22 分钟前
React——基础
前端·react.js·前端框架
aklry34 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9341 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子42 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982442 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug44 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo44 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos