关于Next-Auth Credentials Provider登录与注册分离的疑问

Credentials Provider 本身确实没有单独的登录/注册方法，但可以通过两种方式实现业务上的登录、注册逻辑分离，解决你遇到的「错误用户名自动注册」问题：

方案一：给 signIn 传递自定义标识参数 #

在调用 signIn 时添加自定义参数（比如 action），在 authorize 方法中根据该参数判断执行登录还是注册逻辑：

1. 组件中调用 signIn 时区分动作 #

登录组件：

await signIn('credentials', {
  redirect: false,
  email,
  password,
  action: 'login', // 标识当前是登录操作
  callbackUrl: `${window.location.origin}`
})

注册组件：

await signIn('credentials', {
  redirect: false,
  email,
  password,
  action: 'register', // 标识当前是注册操作
  callbackUrl: `${window.location.origin}`
})

2. 在 CredentialsProvider 的 authorize 中处理逻辑 #

export default CredentialsProvider({
  name: '',
  credentials: {
    email: { label: 'Username', type: 'text', placeholder: 'email' },
    password: { label: 'Password', type: 'password' },
    action: { type: 'hidden' } // 声明自定义参数类型
  },
  async authorize(credentials, req) {
    if (!credentials?.email || !credentials?.password || !credentials?.action) {
      throw new Error('Invalid Credentials or Action')
    }

    const { email, password, action } = credentials;

    if (action === 'login') {
      // 仅执行登录逻辑：先尝试登录，失败则抛出错误，不触发注册
      try {
        const signInQuery = UserOperations.Mutations.signIn
        const response = await client.query<SignInResponse, SignInInput>({
          query: signInQuery,
          variables: { email, password }
        })
        const user = response.data?.signIn
        if (user) return user
        throw new Error('用户不存在或密码错误')
      } catch (err) {
        throw new Error(err.message || '登录失败')
      }
    } else if (action === 'register') {
      // 仅执行注册逻辑：先检查用户是否存在，存在则抛出错误
      try {
        // 先查询用户是否已存在
        const checkUserQuery = UserOperations.Queries.checkUserExists
        const existsResponse = await client.query<CheckUserResponse, CheckUserInput>({
          query: checkUserQuery,
          variables: { email }
        })
        if (existsResponse.data?.checkUserExists) {
          throw new Error('用户已存在，请直接登录')
        }
        // 执行注册
        const signUpMutation = UserOperations.Mutations.signUp
        const response = await client.mutate<SignUpResponse, SignUpInput>({
          mutation: signUpMutation,
          variables: { email, password }
        })
        const user = response.data?.signUp
        if (user) return user
        throw new Error('注册失败')
      } catch (err) {
        throw new Error(err.message || '注册失败')
      }
    }

    return null
  }
})

方案二：拆分两个独立的 Credentials Provider #

创建两个不同 ID 的 Credentials Provider，分别处理登录和注册逻辑：

1. 在 [...nextauth].js 中配置双 Provider #

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

export default NextAuth({
  providers: [
    // 登录专用 Provider
    CredentialsProvider({
      id: 'credentials-login',
      name: 'Login',
      credentials: {
        email: { label: 'Username', type: 'text', placeholder: 'email' },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          throw new Error('Invalid Credentials')
        }
        // 仅执行登录逻辑
        try {
          const signInQuery = UserOperations.Mutations.signIn
          const response = await client.query<SignInResponse, SignInInput>({
            query: signInQuery,
            variables: { email: credentials.email, password: credentials.password }
          })
          const user = response.data?.signIn
          return user || null
        } catch (err) {
          throw new Error('用户不存在或密码错误')
        }
      }
    }),
    // 注册专用 Provider
    CredentialsProvider({
      id: 'credentials-register',
      name: 'Register',
      credentials: {
        email: { label: 'Username', type: 'text', placeholder: 'email' },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          throw new Error('Invalid Credentials')
        }
        // 仅执行注册逻辑
        try {
          // 先检查用户是否存在
          const checkUserQuery = UserOperations.Queries.checkUserExists
          const existsResponse = await client.query<CheckUserResponse, CheckUserInput>({
            query: checkUserQuery,
            variables: { email: credentials.email }
          })
          if (existsResponse.data?.checkUserExists) {
            throw new Error('用户已存在')
          }
          const signUpMutation = UserOperations.Mutations.signUp
          const response = await client.mutate<SignUpResponse, SignUpInput>({
            mutation: signUpMutation,
            variables: { email: credentials.email, password: credentials.password }
          })
          const user = response.data?.signUp
          return user || null
        } catch (err) {
          throw new Error(err.message || '注册失败')
        }
      }
    })
  ],
  // 其他 NextAuth 配置...
})

2. 组件中调用对应 Provider #

登录组件：

await signIn('credentials-login', {
  redirect: false,
  email,
  password,
  callbackUrl: `${window.location.origin}`
})

注册组件：

await signIn('credentials-register', {
  redirect: false,
  email,
  password,
  callbackUrl: `${window.location.origin}`
})

补充说明 #

Next-Auth 的 Credentials Provider 设计核心是「验证凭据并返回用户会话」，登录和注册本质都是完成这一流程的业务场景，因此没有内置拆分的方法。但通过上述两种方式，完全可以实现业务逻辑的分离，避免误注册问题。

内容的提问来源于stack exchange，提问作者Louis Sankey