NextAuth集成邮箱登录时输入框不显示问题求助

问题根源 #

你的代码里存在一个大小写拼写错误：CredentialsProvider配置项里的Credentials（首字母大写）应该改为credentials（全小写）。NextAuth的配置字段严格区分大小写，这个错误会导致内置登录表单无法识别你定义的邮箱、密码字段，直接造成输入框不显示。

修正后的代码 #

把错误的字段名修正后，输入框就能正常显示了，修正后的完整代码如下：

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

export const authOptions = {
    secret: process.env.NEXT_AUTH_PUBLIC_KEY,
    session: {
        strategy: 'jwt',
    },
    providers: [
        CredentialsProvider({
            // 此处改为小写的credentials
            credentials: {
                email: {
                    label: 'Email',
                    type: 'email',
                    placeholder: 'Enter Email'
                },
                password: {
                    label: 'Password',
                    type: 'password',
                    placeholder: 'Enter Password'
                }
            },
            async authorize(credentials) {
                if (!credentials) {
                    return null;
                }
                // 注意：这里仅为测试逻辑，实际项目中需替换为数据库校验邮箱密码的真实逻辑
                return true;
            }
        })
    ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }

额外说明 #

• 你当前使用CredentialsProvider实现邮箱密码登录的方案是完全可行的，不需要更换方案，修正拼写错误即可解决问题。
• 后续需要完善authorize方法的逻辑：比如接收前端传入的邮箱和密码，去数据库查询是否存在匹配的用户，验证通过后返回用户对象，验证失败则返回null。
• 务必严格对照NextAuth官方文档的配置字段大小写，避免这类低级错误。

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