Supabase密码恢复流程如何配置自定义重定向地址

使用Nuxt 3、Vercel、Supabase技术栈开发时，无法配置自定义密码恢复跳转URL：

• 现状：密码重置邮件内的验证链接默认重定向到站点根路径，格式为https://url.supabase.co/auth/v1/verify?token=XYZ&type=recovery&redirect_to=https://example.vercel.app/
• 预期：验证链接重定向到带/recover后缀的自定义路径，格式为https://url.supabase.co/auth/v1/verify?token=XYZ&type=recovery&redirect_to=https://example.vercel.app/recover

• 修改Supabase后台配置：已将自定义恢复路径地址加入Additional redirect URLs设置项，但测试发现redirectTo参数似乎仅对auth.signIn()方法生效；向auth.api.resetPasswordForEmail()传入redirectTo参数时触发报错：Could not read verification params: json: cannot unmarshal object into Go struct field RecoverParams.email of type string
• 监听onAuthStateChange事件：点击邮件内的重置密码链接后可正常获取用户状态，能依次监听到SIGNED_IN和PASSWORD_RECOVERY事件，该现象与公开讨论中记录的表现一致，但无法完成自定义页面跳转
• 中间件拦截：尝试通过中间件根据URL路径判断场景做跳转，但当前重定向仅落到站点根路径，URL中无密码恢复场景的标识参数，无法识别对应跳转逻辑

1. 修复接口调用报错 #

触发参数反序列化报错的核心原因是调用了错误的方法、传参格式不对：

• 不要调用内部低阶方法auth.api.resetPasswordForEmail，直接使用公开方法auth.resetPasswordForEmail
• redirectTo参数要放在第二个配置项对象中传入，不要塞到第一个参数的邮箱字段对象里，正确调用示例：

const { error } = await supabase.auth.resetPasswordForEmail('目标用户邮箱', {
  redirectTo: 'https://example.vercel.app/recover'
})

2. 修复事件监听跳转失效问题 #

Nuxt 3下onAuthStateChange的跳转逻辑必须放在客户端插件中执行，不要在服务端代码里绑定监听，正确实现方式：
在项目plugins目录下新建仅客户端生效的supabase插件，写入以下逻辑：

export default defineNuxtPlugin(() => {
  const supabase = useSupabaseClient()
  const router = useRouter()

  supabase.auth.onAuthStateChange(async (event) => {
    if (event === 'PASSWORD_RECOVERY' && window.location.pathname !== '/recover') {
      await router.replace('/recover')
    }
  })
})

• 不要在全局服务端中间件里写相关跳转逻辑，服务端无法实时捕获客户端侧的auth状态变更事件，会导致跳转不触发
• 跳转前增加路径判断，避免进入/recover页面后重复触发跳转导致死循环

3. 兜底配置校验 #

完成上述代码修改后，检查两处配置避免拦截：

• 进入Supabase后台认证模块的URL配置页，将https://example.vercel.app/recover完整地址加入Additional redirect URLs列表，不要只填写路径片段
• 检查Vercel部署配置、Nuxt 3全局路由中间件，不要设置根路径强制重定向规则，避免Supabase回跳时路径被改写；未登录拦截逻辑需要给PASSWORD_RECOVERY场景加白，不要把通过恢复链接完成临时登录的用户拦回首页

内容的提问来源于stack exchange，提问作者wittgenstein