告别密码遗忘：Convex + Better Auth 邮件验证与密码重置实战指南
告别密码遗忘Convex Better Auth 邮件验证与密码重置实战指南【免费下载链接】better-authConvex Better Auth 项目地址: https://gitcode.com/gh_mirrors/con/better-auth忘记密码是每个网站用户都会遇到的痛点也是开发者必须提前设计好的基础功能。本项目Convex Better Auth将 Convex 后端平台与 Better Auth 认证库深度结合让你用极少的代码就能实现完整的邮件验证与密码重置流程。本文将以新手视角一步步带你配置邮箱验证、找回密码链接和重置页面彻底告别密码遗忘带来的客服负担与用户流失。为什么你的应用必须内置邮件验证与密码重置邮件验证确认邮箱真实有效防止垃圾注册也为后续营销与通知打好基础。密码重置用户忘记密码时能自助找回大幅降低流失率避免注册后永久失联。Better Auth 天生内置这两套能力只需在配置里开启并接入发信服务即可无需从零造轮子。Convex Better Auth 如何协同工作Better Auth 负责注册、登录、会话、验证与重置逻辑Convex 负责数据存储与后端函数执行两者通过本项目的createClient桥接数据库直接使用 Convex 的表结构前端则用authClient一行调用接口。整个流程只需四个角色用户邮箱、邮件服务商如 Resend、Better Auth 配置和前端页面。第一步配置邮件发送服务Resend所有验证码、验证链接、重置链接都要通过邮件送达。示例项目使用 Convex 的 Resend 组件封装了统一的发信入口四个发送函数一目了然sendEmailVerification发送验证邮件sendResetPassword发送密码重置邮件sendMagicLink、sendOTPVerification发送免密登录链接与验证码核心代码位于 email.tsx邮件模板放在 emails/ 目录下例如 resetPassword.tsx 就是标准的重置邮件模板包含重置链接与安全提示文案。第二步开启邮件验证5 分钟搞定在 auth.ts 的createAuthOptions中配置emailVerification当用户注册时自动触发发送验证邮件emailVerification: { sendVerificationEmail: async ({ user, url }) { await sendEmailVerification(requireActionCtx(ctx), { to: user.email, url, }); }, }, emailAndPassword: { enabled: true, requireEmailVerification: true, // 未验证邮箱禁止登录 sendResetPassword: async ({ user, url }) { await sendResetPassword(requireActionCtx(ctx), { to: user.email, url, }); }, },其中requireEmailVerification: true是关键开关开启后用户只有点击验证链接、确认邮箱后才能真正登录有效拦截用假邮箱注册的行为。第三步实现密码重置完整闭环密码重置是三个环节串起来的流程Better Auth 全部封装好了① 前端发起请求用户在登录页点击忘记密码调用authClient.requestPasswordReset见 SignIn.tsx/sign-in/SignIn.tsx) 中的handleResetPassword通过redirectTo指定重置页地址await authClient.requestPasswordReset({ email, redirectTo: ${process.env.NEXT_PUBLIC_SITE_URL}/reset-password, });② 后端发送邮件Better Auth 生成带一次性 token 的重置链接通过上面配置的sendResetPassword回调发出邮件。③ 用户设置新密码在重置页拿到 token 后调用authClient.resetPassword见 reset-password.tsxawait authClient.resetPassword({ token, // 从 URL 参数中获取 newPassword: password, });成功后将用户重定向回登录页若 token 无效或过期页面会友好提示链接无效或已过期请重新申请。第四步完善重置页面的用户体验一个合格的重置页应包含三个细节两次输入校验新密码与确认密码不一致时立即提示避免用户反复提交。加载状态请求期间禁用按钮并显示加载动画防止重复点击。错误兜底onError回调中展示具体错误信息而不是白屏或静默失败。这些交互在示例的 reset-password.tsx 中都有完整实现可直接复用。安全与体验值得注意的 5 个细节重置链接必须短期有效Better Auth 默认带过期机制过期后需重新申请。未请求时忽略邮件邮件模板中应提示如果不是你本人操作请忽略本邮件。验证通过再放行登录requireEmailVerification别忘记开启。邮件发送走服务端通过 Convex Action 发送避免把 API Key 暴露在前端。密码强度前端校验在提交前先做长度与复杂度检查减少无效请求。常见问题排查速查表现象排查方向收不到验证邮件检查 Resend 发件域名是否完成 DNS 验证、是否处于 testMode点击链接报错/失效确认SITE_URL环境变量与邮件中链接的域名一致验证后仍无法登录确认requireEmailVerification配置与用户表字段是否同步重置后无法登录检查新密码是否通过长度校验确认会话是否已重置总结有了 Convex Better Auth邮件验证与密码重置不再是动辄上千行代码的大工程。你只需要配置一个回调、写一封模板邮件、接一个前端页面完整的安全闭环就自动运转起来。从注册到验证、从忘记密码到重新登录用户全程自助完成体验顺滑、安全可控。如果你也想在自己项目里复刻这套能力直接参考示例工程的 convex/auth.ts、convex/email.tsx 与 reset-password 目录动手试一次就会彻底掌握。告别密码遗忘就从今天开始【免费下载链接】better-authConvex Better Auth 项目地址: https://gitcode.com/gh_mirrors/con/better-auth创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
