NextAuth.js 抽象化了管理会话、登录和注销以及身份验证的其他方面所涉及的大部分复杂性操作。虽然您可以手动实现这些功能，但该过程可能非常耗时且容易出错。NextAuth.js简化了流程，为 Next.js 应用程序中的身份验证提供了统一的解决方案。
步骤
通过在终端中运行以下命令来安装 NextAuth.js
pnpm i next-auth@beta
接下来，为您的应用程序生成密钥。此密钥用于加密 Cookie，确保用户会话的安全性。您可以通过在终端中运行以下命令来执行此操作。
openssl rand -base64 32
然后，在您的.env文件中，将生成的 key 添加到变量中AUTH_SECRET
在项目的根目录中创建一个auth.config.ts
import type { NextAuthConfig } from 'next-auth';export const authConfig = {pages: {signIn: '/login',},callbacks: {authorized({ auth, request: { nextUrl } }) {const isLoggedIn = !!auth?.user;const isOnDashboard = nextUrl.pathname.startsWith('/ui/dashboard');if (isOnDashboard) {if (isLoggedIn) return true;return false; // Redirect unauthenticated users to login page} else if (isLoggedIn) {return Response.redirect(new URL('/ui/dashboard', nextUrl));}return true;},},providers: [], // Add providers with an empty array for now
} satisfies NextAuthConfig;
您可以使用该pages选项指定自定义登录、注销和错误页面的路由。这不是必需的，但通过添加signIn: ‘/login’，用户将被重定向到我们的自定义登录页面，而不是NextAuth.js默认页面。
回调authorized用于验证请求是否有权通过 Next.js Middleware 访问页面,它在请求完成之前调用，并接收具有 auth 和 request 属性的对象。Auth 属性包含用户的会话，而 request 属性包含传入的请求。
providers选项是一个数组，您可以在其中列出不同的登录选项。目前，它是一个满足 NextAuth 配置的空数组。
接下来，您需要将authConfig对象导入到 Middleware 文件中。在项目的根目录中，创建 middleware.ts
import NextAuth from 'next-auth';
import { authConfig } from './auth.config';export default NextAuth(authConfig).auth;export const config = {// https://nextjs.org/docs/app/building-your-application/routing/middleware#matchermatcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
};
使用authConfig对象初始化 NextAuth.js 并导出auth属性。使用 Middleware 中的matcher选项来指定它应该在特定路径上运行。
使用 Middleware 的优点是，在 Middleware 验证身份验证之前，受保护的路由甚至不会开始渲染，从而增强了应用程序的安全性和性能。
创建一个名为 auth.ts 的新文件，该文件扩展了 authConfig 对象
import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import Credentials from 'next-auth/providers/credentials';
import { z } from 'zod';
import { User } from './app/lib/definitions';
import { sql } from '@vercel/postgres';
import bcrypt from 'bcrypt';async function getUser(email: string): Promise<User | undefined> {try {const user = await sql<User>`SELECT * FROM users WHERE email=${email}`;return user.rows[0];} catch (error) {console.error('Failed to fetch user:', error);throw new Error('Failed to fetch user.');}}export const { auth, signIn, signOut } = NextAuth({...authConfig,providers: [Credentials({async authorize(credentials) {const parsedCredentials = z.object({ email: z.string().email(), password: z.string().min(6) }).safeParse(credentials);if (parsedCredentials.success) {const { email, password } = parsedCredentials.data;const user = await getUser(email);if (!user) return null;const passwordsMatch = await bcrypt.compare(password, user.password);if (passwordsMatch) return user;}return null;},})],
});
使用的是 Credentials provider（凭证提供程序），但通常建议使用其他提供程序，例如 OAuth 或电子邮件提供程序。有关选项的完整列表，请参阅 NextAuth.js 文档。
使用该authorize函数来处理身份验证逻辑。与 Server Actions 类似，您可以用于zod在检查用户是否存在于数据库中之前验证电子邮件和密码
验证凭证后，创建一个从数据库中查询用户的新getUser函数。然后，调用 bcrypt.compare 以检查密码是否匹配。如果密码匹配，则返回用户，否则返回null以阻止用户登录。
这样你可以在登录页面调用的服务器操作中使用signIn
'use server';import { signIn } from '@/auth';
import { AuthError } from 'next-auth';// ...export async function authenticate(prevState: string | undefined,formData: FormData,
) {try {await signIn('credentials', formData);} catch (error) {if (error instanceof AuthError) {switch (error.type) {case 'CredentialsSignin':return 'Invalid credentials.';default:return 'Something went wrong.';}}throw error;}
}
并且可以使用 React 的来useActionState调用服务器操作，处理表单错误，并显示表单的 pending 状态：
