构建身份验证入门项目：整合 Next.js、PostgreSQL、Prisma 和 NextAuth 的经验教训

Source: Dev.to

介绍

当开始一个新的网页项目时，设置用户认证往往会感觉是一个显著的初始阻力。管理用户数据、保护路由、处理不同的登录方式以及保持所有内容的类型安全都是常见的挑战。为了解决这些问题，我创建了一个 Next.js 认证入门应用，它为未来的项目提供了坚实的基础，并且开箱即用地处理这些复杂性。

核心技术

功能

• 用户表单：登录、注册、电子邮件验证、密码更新和密码重置页面。支持电子邮件/密码登录以及社交登录（Google、GitHub）。
• 受保护的路由：middleware.ts 在授予对受保护页面（例如 /settings）的访问权限之前检查用户会话。
• 电子邮件验证与密码重置：通过 Resend 进行安全令牌生成和邮件发送。
• 数据处理：使用 actions/ 进行变更操作，data/ 进行只读操作，实现关注点分离。

项目结构

app/                # 路由定义（公共和受保护）
actions/            # 用于数据库变更的服务器操作
data/               # 只读数据获取函数
components/         # 可复用的 UI 元素
lib/                # 通用工具和帮助函数
prisma/             # Prisma 模式和生成的客户端
schemas/            # Zod 验证模式
middleware.ts       # 路由保护逻辑
auth.config.ts      # NextAuth 配置（提供者、回调）

示例：NextAuth 配置 (auth.config.ts)

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import GitHubProvider from "next-auth/providers/github";

export const authOptions = {
  providers: [
    GoogleProvider({ clientId: process.env.GOOGLE_ID!, clientSecret: process.env.GOOGLE_SECRET! }),
    GitHubProvider({ clientId: process.env.GITHUB_ID!, clientSecret: process.env.GITHUB_SECRET! }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub;
      return session;
    },
  },
};

export default NextAuth(authOptions);

示例：Zod 模式 (schemas/login.ts)

import { z } from "zod";

export const loginSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

要点

• 使用 Zod 进行显式验证：提前捕获错误，并为表单输入提供清晰的反馈。
• 关注点分离：区分 actions/（变更）和 data/（查询）简化了服务器端逻辑并提升可维护性。
• 数据获取的灵活性：该入门项目兼容 TanStack Query、useSWR 或任何其他获取策略。

替代方案考虑

• ORMs: 探索了 Neon，但 Prisma 的 TypeScript 类型安全和开发者体验更适合作为入门套件。
• Email Services: 有许多选项；选择 Resend 是因为其简洁的 API，但切换到其他提供商也很简单。

结论

这个 Next.js 身份验证入门项目结合了广受好评的工具，以解决常见的身份验证挑战。它为需要使用 Next.js 14 进行用户身份验证的应用程序提供了可靠的起点。欢迎探索仓库、调整组件或提出改进建议。

Next.js Auth Starter