自定义Next auth的登陆字段

背景

用next auth可以方便的编写用户登陆逻辑，但如果我们不想用email作为登陆主字段，就要做一些定制化开发。
使用 CredentialsProvider 时，你可以完全自定义认证逻辑，包括不使用 email。你可以设置一个只使用用户名和密码的认证系统，而不需要 email。以下是如何实现这一点的步骤：

1. 配置 CredentialsProvider：

在你的 NextAuth.js 配置文件中（通常是 pages/api/auth/[...nextauth].js 或 app/api/auth/[...nextauth]/route.js），你可以这样设置 CredentialsProvider：

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        // 这里添加你的认证逻辑
        const user = await authenticateUser(credentials.username, credentials.password)
        
        if (user) {
          // 返回的对象将被保存在 JWT 的 user 属性中
          return {
            id: user.id,
            username: user.username,
            // 不包含 email 字段
          }
        } else {
          return null
        }
      }
    })
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id
        token.username = user.username
      }
      return token
    },
    async session({ session, token }) {
      session.user = {
        id: token.id,
        username: token.username,
      }
      return session
    }
  },
  // 其他配置...
})

2. 修改类型定义：

如果你使用 TypeScript，你可能需要修改类型定义以反映这种变化。创建或编辑 types/next-auth.d.ts 文件：

import "next-auth"

declare module "next-auth" {
  interface User {
    id: string
    username: string
  }

  interface Session {
    user: User
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    id: string
    username: string
  }
}

3. 实现认证逻辑：

你需要实现 authenticateUser 函数来验证用户名和密码。这可能涉及检查数据库或其他认证服务。