Next.js 实战 (九)：使用 next-auth 完成第三方身份登录验证

什么是 next-auth

next-auth 是一个专门为 Next.js 设计的、易于使用的、灵活的身份验证库。它简化了为你的应用程序添加身份验证（如登录、注册、登出等）的过程。next-auth 支持多种认证方式，包括通过电子邮件和密码、OAuth 2.0 提供商（如 Google、GitHub、Facebook 等）、以及自定义提供商。

以下是它的一些主要特点：

1. 内置 OAuth 提供商：next-auth 内置支持多个 OAuth 和 OpenID Connect 提供商，使得与第三方服务集成变得简单。
2. 会话管理：提供了简单的 API 来处理用户会话，允许开发者轻松地获取当前用户的会话信息。
3. 数据库兼容性：可以与多种数据库一起使用，以存储用户数据。它支持无头 CMS 和自定义后端。
4. 多语言支持：内置对多语言的支持，可以根据用户的偏好语言显示错误消息和其他文本。
5. 自定义页面：允许创建自定义的登录、注册或错误页面，以便更好地融入应用程序的设计风格。
6. 安全默认值：采用了安全的默认设置，帮助保护应用免受常见的安全问题影响。
7. API 路由：利用 Next.js 的 API 路由功能来处理身份验证逻辑，这意味着你可以创建自己的端点来进行登录、登出等操作。
8. JWT 或数据库会话：可以选择使用 JSON Web Tokens (JWT) 进行状态无会话管理，或者选择基于数据库的会话。
9. 适配器支持：对于想要将用户数据持久化到数据库中的情况，next-auth 提供了适配器（adapters），可以方便地与不同的数据库系统进行集成，比如 Prisma、TypeORM 等。

具体步骤

1. 安装依赖

pnpm add next-auth@beta

2. 设置环境
   唯一强制的环境变量是 AUTH_SECRET，这是库用来加密令牌和电子邮件验证散列的随机值。运行以下命令随机生成一个：

npx auth secret

这也会将其添加到本地的 .env 文件中

3. 配置
   在应用的根目录下创建一个新的 auth.ts 文件，包含以下内容:

import NextAuth from "next-auth"
 
export const {
    handlers, signIn, signOut, auth } = NextAuth({
   
  providers: [],
})

4. 在 /app/api/auth/[...nextauth]/route.ts 下添加路由处理程序：

import {
    handlers } from "@/auth" // Referring to the auth.ts we just created