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

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

修复注册后的自动跳转

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

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

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

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

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

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

项目模板中 supabase 的初始化

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

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

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

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

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

这里使用了 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,然后重定向到 / 页面。这样首页就有登录态了。

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

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

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

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