DEV Community
·
使用Better_Auth、Next.js、Prisma、Shadcn和TailwindCSS实现用户名和密码认证
💡
原文英文，约2000词，阅读约需8分钟。
📝
内容提要
本文介绍了如何在现代Web应用中实现用户名和密码认证，支持用户名或电子邮件登录，并可选用基于OTP的双因素认证。使用的技术栈包括Better_Auth、Next.js和Prisma。教程涵盖环境配置、数据库设置、用户模型更新及登录注册组件修改等步骤，最终实现灵活的用户登录体验。
🎯
关键要点
- 本文介绍了如何在现代Web应用中实现用户名和密码认证。
- 支持用户名或电子邮件登录，并可选用基于OTP的双因素认证。
- 使用的技术栈包括Better_Auth、Next.js和Prisma。
- 教程涵盖环境配置、数据库设置、用户模型更新及登录注册组件修改等步骤。
- 确保安装Node.js、包管理器和PostgreSQL数据库。
- 可以从头开始或克隆启动项目。
- 配置.env文件以设置认证和数据库参数。
- 更新schema.prisma文件以添加用户名字段。
- 在auth.ts和auth-client.ts文件中添加用户名插件。
- 更新登录和注册的Zod模式以支持用户名。
- 创建generateUsername函数以生成随机用户名。
- 更新SignIn和SignUp组件以支持用户名和电子邮件登录。
- 运行应用程序并测试用户注册和登录功能。
- 成功实现用户名和密码认证系统，提升用户体验。
❓
延伸问答
如何在Web应用中实现用户名和密码认证？
可以使用Better_Auth、Next.js和Prisma等技术栈，通过配置环境、更新数据库模型和修改登录注册组件来实现。
支持哪些登录方式？
支持使用用户名或电子邮件进行登录，并可选用基于OTP的双因素认证。
需要哪些前置条件才能开始实现认证？
需要安装Node.js、包管理器（如npm或pnpm）和PostgreSQL数据库。
如何配置数据库连接？
在项目根目录创建.env文件，添加数据库连接字符串和其他认证设置。
如何更新用户模型以支持用户名？
在schema.prisma文件中添加用户名字段，并生成和迁移数据库。
如何在注册组件中自动生成用户名？
可以创建一个generateUsername函数，根据用户输入的名字生成随机用户名，并在注册时自动填充。
➡️
