初识next-auth，和在实际应用中的几个基本场景（本文以v5为例，v4和v5的差别主要是在个别显式配置和api，有兴趣的同学可以看官网教程学习）

一、what，明确next-auth是一个用来做什么的库

next-auth是nextjs官方推出，专门用于nextjs项目中进行登录认证的最主流库。

二、why，明确为什么要用next-auth这个库

next-auth通过非常简洁明确的配置，让开发者避免从0开发一套完备的能适应各种场景的登录认证逻辑。举例来说，引入库之后，对开发者来说只需要专注于本系统的基本认证，其余对接github、twitter、Facebook等第三方登录的场景，开发者只需要在配置中增加next-auth库内置的配置项即可，非常方便：

ts 复制代码

import NextAuth from "next-auth"
...
// 下面两个就是auth库中内置的针对github和推特登录场景的provider
import GitHub from "next-auth/providers/github"
import Twitter from "next-auth/providers/twitter"
...
export const { auth, signIn, signOut, handlers } = NextAuth({
  ...authConfig,
  providers: [
    GitHub,
    Twitter,
    // 这个是开发者可以自定义的逻辑
    Credentials({...})
  ]

三、how，如何使用next-auth这个库

1. next-auth基本配置项（官网有文档，此处仅以案例阐述个人学习中认为最终的几个）

ts 复制代码

// 此处是next-auth
import type { NextAuthConfig } from "next-auth"

export const authConfig = {
  // 用来告诉NextAuth你的页面路由在哪里，NextAuth默认的页面非常难看
  pages: {
    signIn: "/login",
  },
  // callbacks可以粗略看成是实际上控制权限和数据流向的地方
  // 具体文档配置可以参考 https://next-auth.js.org/configuration/callbacks
  // 下面只是做一个用处说明
  callbacks: {
    // 在实际登陆之前拦截，检验控制用户是否能成功登录，
    async signIn({ user, account, profile, email, credentials }) {
      return true
    },
    // 如果有设置，可以控制登录成功之后，重定向到具体某个地址
    async redirect({ url, baseUrl }) {
      return baseUrl
    },
    // 此处是用于读取成功登录之后，进入实际网页之前覆写session的地方
    async session({ session, user, token }) {
      return session
    },
    // 此处是用于读取成功登录之后，进入实际网页之前覆写token的地方
    async jwt({ token, user, account, profile, isNewUser }) {
      return token
    }
    // next-auth专门针对middleware增加的认证拦截方法，v4暂不支持
    authorized({ auth, request }) {...},
  },
  // providers最身份提供者，通常都是在基础配置中设置为空数组，然后抛出给外部自己定义，此处仅作说明
  // providers的值就像上面举例why的部分中列举的
  providers: [
    GitHub,
    Twitter,
    // 这个是客户自己开发认证逻辑
    Credentials({
      async authorize(credentials) {...}
    }),
  ], 
} satisfies NextAuthConfig

2. 和middleware对接关联（只有v5有这个特性）

ts 复制代码

const { auth, signIn, signOut, handlers } = NextAuth({...})
export default auth
// 匹配的路由
export const config = {
  matcher: ["..."],
}

实例化标准配置之后，我们可以得到几个通用方法，auth就是给到middware中，可以直接作为路由守卫使用。

3. 和actions对接

实例化auth配置之后，除了auth这个用于实时获取当前登录信息的方法，还有signIn、signOut用于登录和登出。如在action.ts中：

ts 复制代码

'use server'
...
// sign通常传两个参数，第一个是providers中的键值对的键名，第二个是这个键名对应的登陆方式用到的参数
// 此处为开发者自定义逻辑
export const authenticate = async (formData) => {
    await signIn("credentials", formData)
}
...
// 此处为对接github
export const authenticateGithub = async () => {
  await signIn("github", { redirectTo: "/dashboard" })
}

4、一定要注意配置认证专用的routes.ts

在使用NextAuth通过第三方登录时，一定要注意在项目中增加\app\api\auth[...nextauth]\route.ts，这个接口文件，因为对接第三方登录都需要请求/api/auth/开头的接口。文件内容如下：

ts 复制代码

import { handlers } from "@/auth"
// 此处的handlers就是上面实例化auth配置之后获得的handlers，这个时NextAuth专门用来处理第三方认证的内置辅助函数，完全黑箱，无需额外配置
const { GET, POST } = handlers
export { GET, POST }