5分钟快速上手 Convex Better Auth零基础实现邮箱密码登录【免费下载链接】better-authConvex Better Auth 项目地址: https://gitcode.com/gh_mirrors/con/better-auth如果你正在为你的应用寻找一套简单可靠的登录认证方案那么Convex Better Auth这个组合绝对值得一试。Convex 提供实时后端数据库与函数托管而 Better Auth 是当下流行的开源认证框架两者结合后邮箱密码登录、会话管理、社交登录等功能几乎开箱即用。本文将带你零基础完成一次完整的上手体验全程不需要手写任何复杂的加密、会话或数据库逻辑5 分钟即可跑通从注册到登录的完整流程。 为什么选择 Better Auth 认证框架Better Auth 之所以流行是因为它把认证中最繁琐的部分都封装好了能力说明 邮箱密码登录内置注册、登录、找回密码全流程 会话管理自动生成与刷新会话无需自己造轮子 多因素认证几行代码即可开启 2FA 两步验证 社交登录支持 GitHub、Google、Discord 等 OAuth 服务 框架无关支持 React、Next.js、Svelte、TanStack 等而 Convex 负责数据存储与后端逻辑两套体系通过官方组件无缝衔接开发者只需要关注业务本身。 第一步一键安装依赖首先创建一个新项目并安装核心依赖包npm install convex-dev/better-auth better-auth convex接着在你的 Convex 配置中挂载认证组件。打开项目里的convex.config.ts参考仓库中 examples/next/convex/convex.config.ts 的写法import { defineApp } from convex/server; import betterAuth from ./betterAuth/convex.config; const app defineApp(); app.use(betterAuth); export default app;这一步就是把 Better Auth 以「组件」的形式接入 Convex 应用数据库表、HTTP 路由都会自动生成不需要手动建任何用户表。⚙️ 第二步最快配置方法——创建认证实例这是整个流程的核心。在convex/auth.ts中创建认证组件与配置仓库中的参考实现见 examples/next/convex/auth.tsexport const authComponent createClientDataModel, typeof authSchema( components.betterAuth, { local: { schema: authSchema } }, ); export const createAuthOptions (ctx) { return { baseURL: siteUrl, database: authComponent.adapter(ctx), emailAndPassword: { enabled: true, // ✅ 开启邮箱密码登录 }, }; };关键就一行emailAndPassword: { enabled: true }。开启了它注册、登录、改密、重置密码全部可用。认证相关的表结构定义在 examples/next/convex/betterAuth/schema.ts由代码生成器自动维护。 第三步注册 HTTP 路由Better Auth 的认证请求通过 HTTP 进入需要在convex/http.ts中把路由挂载到认证组件上参考 examples/next/convex/http.tsimport { httpRouter } from convex/server; import { authComponent, createAuth } from ./auth; const http httpRouter(); authComponent.registerRoutes(http, createAuth); export default http;同时在convex/auth.config.ts中声明认证配置提供器参考 examples/next/convex/auth.config.tsexport default { providers: [getAuthConfigProvider()], } satisfies AuthConfig;之后运行npx convex devConvex 会自动生成认证组件所需的_generated文件。 第四步前端登录页面接入后端就绪后前端只需创建认证客户端。在lib/auth-client.tsx中参考 examples/next/lib/auth-client.tsxexport const authClient createAuthClient({ plugins: [convexClient()], });然后在登录页面调用await authClient.signIn.email({ email, password }); await authClient.signUp.email({ email, password, name });对就这两行。注册、登录、获取当前用户authClient.getSession()、退出登录authClient.signOut()全部由客户端自动完成会话状态由 Convex 实时同步。✅ 第五步5 分钟验证清单启动项目后按下面清单自检全部通过即代表认证体系搭建成功打开注册页用邮箱密码成功注册注册后自动创建会话并跳转到登录态页面退出登录后受保护页面自动跳转回登录页刷新页面后登录状态依然保持如果希望进一步限制页面访问仓库还提供了AuthBoundary组件见 examples/next/lib/auth-client.tsx自动拦截未登录用户省去手写中间件。 进阶邮件验证与更多安全能力基础登录跑通后你可以轻松扩展更完善的安全能力邮件验证在配置中开启emailVerification并接入 Resend 等服务发送验证邮件双因素认证2FA安装twoFactor()插件即可支持 TOTP 两步验证魔法链接登录通过magicLink()插件实现免密登录邮箱 OTP 验证码使用emailOTP()插件发送一次性验证码这些插件在官方示例的 examples/next/convex/auth.ts 中都有完整配置示范复制即可使用。项目还支持用户名、匿名登录、社交登录等多种方式插件列表见src/plugins/目录。 总结通过这 5 分钟的上手你已经拥有了一套完整的邮箱密码认证体系Convex 负责后端与数据库Better Auth 负责认证逻辑两者配合几乎零样板代码。无论是个人项目还是生产应用这套方案都足够健壮且易于扩展。现在就动手试一下让登录功能在你的项目里立刻跑起来吧【免费下载链接】better-authConvex Better Auth 项目地址: https://gitcode.com/gh_mirrors/con/better-auth创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考