新手必看Convex Better Auth 邮箱密码登录从零到一的完整实战【免费下载链接】better-authConvex Better Auth 项目地址: https://gitcode.com/gh_mirrors/con/better-auth在前后端分离架构越来越普及的今天如何快速、安全地实现邮箱密码登录是每个全栈开发者都绕不开的课题。本文将带你从零开始使用Better Auth与Convex这对黄金组合在一小时内完成一套完整的邮箱密码登录系统从环境搭建、认证配置、HTTP 路由注册到前端登录注册页面与登录态获取全程零基础可上手无需自己造轮子。为什么选择 Convex Better Auth 组合Better Auth是一款专为 TypeScript 全栈应用打造的开源认证库API 设计优雅、插件生态丰富Convex则是一个集数据库、实时同步、服务端函数于一体的 BaaS 平台。两者结合后你只需写少量配置代码就能获得邮箱密码登录、验证码、魔法链接、双因素认证等一整套开箱即用的认证能力。邮箱密码登录核心概念速览在动手之前先理解 Better Auth 的认证链路前端调用authClient.signUpEmail/authClient.signInEmail发起请求请求经 Convex HTTP 路由转发给 Better Auth 服务端服务端校验邮箱密码后写入 Convex 数据库前端通过getCurrentUser查询函数获取登录态。整个过程中用户表、会话表、账户表都由 Better Auth 自动管理你不需要手写任何 SQL。实战准备克隆项目与初始化环境首先克隆官方实战示例仓库git clone https://gitcode.com/gh_mirrors/con/better-auth进入项目后安装依赖并初始化 Convex 数据库cd better-auth npm install cd examples/next npm install npx convex dev --once npm run dev以上步骤完成后访问本地地址即可看到带完整认证流程的示例应用。最快配置方法开启邮箱密码登录打开examples/next/convex/auth.ts找到createAuthOptions函数邮箱密码登录的核心配置就在这里emailAndPassword: { enabled: true, requireEmailVerification: true, sendResetPassword: async ({ user, url }) { ... }, },enabled: true表示开启邮箱密码登录requireEmailVerification可控制是否强制邮箱验证sendResetPassword用于自定义重置密码邮件的发送逻辑。想更深入了解配置项可查看src/auth-options.ts中的类型定义。注册认证路由让登录请求有处可去Better Auth 的认证请求需要通过 HTTP 路由进入 Convex。打开examples/next/convex/http.ts核心代码仅两行import { httpRouter } from convex/server; import { authComponent, createAuth } from ./auth; const http httpRouter(); authComponent.registerRoutes(http, createAuth); export default http;authComponent.registerRoutes会自动把登录、注册、登出等所有认证端点挂载到 Convex 的 HTTP 路由器上真正做到一处注册、处处生效。创建前端认证客户端一行代码接入前端部分更加简单。打开examples/next/lib/auth-client.tsx使用createAuthClient创建认证客户端export const authClient createAuthClient({ plugins: [inferAdditionalFieldstypeof auth(), convexClient()], });其中convexClient()插件让客户端与 Convex 无缝对接。之后在任何组件中都能通过authClient.signUpEmail()和authClient.signInEmail()完成邮箱密码登录的注册与登录操作参考示例页面examples/next/app/(unauth)/sign-in/SignIn.tsx。登录态获取与权限校验保护你的业务数据登录只是开始如何安全地获取当前用户才是关键。示例中通过一个 Convex query 暴露当前登录用户export const getCurrentUser query({ args: {}, handler: async (ctx) { return authComponent.safeGetAuthUser(ctx); }, });前端再配合AuthBoundary组件见examples/next/lib/auth-client.tsx即可在用户未登录时自动跳转到登录页实现整个页面的权限守卫非常简单可靠。常见问题与排错技巧登录报 404检查http.ts是否正确注册了路由以及convex.json中的配置是否生效收不到验证邮件本地开发建议使用邮件调试工具或临时把requireEmailVerification设为false数据库表为空确认已执行npx convex dev --once初始化 schemaBetter Auth 的相关表在examples/next/convex/betterAuth/generatedSchema.ts中自动生成。总结至此你已经通过Convex Better Auth从零到一完成了一套完整的邮箱密码登录系统。相比传统方案这套组合把数据库设计、会话管理、安全校验全部封装好让你能更专注于业务本身。下一步不妨在examples/next/convex/betterAuth/schema.ts中扩展自定义字段或尝试接入 Better Auth 的双因素认证、魔法链接等高级插件开启你的全栈认证进阶之路【免费下载链接】better-authConvex Better Auth 项目地址: https://gitcode.com/gh_mirrors/con/better-auth创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
