使用Next.js+NextAuth+Prisma+MongoDB注册时遇报错求助

• VS Code中出现错误：TypeError: "ikm" must be an instance of Uint8Array or a string
• 控制台两个错误：
  • Error 1：Failed to load resource: the server responded with a status of 500 (Internal Server Error)
  • Error 2：SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
• 注册时数据库能成功创建账号，但仍会触发上述报错。

[...nextauth] 代码 #

import NextAuth from 'next-auth';
import GithubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
import Credentials from 'next-auth/providers/credentials';
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { compare } from 'bcrypt';
import prismadb from '../../../lib/prismadb';

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID || '',
      clientSecret: process.env.GITHUB_SECRET || '',
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID || '',
      clientSecret: process.env.GOOGLE_CLIENT_SECRET || '',
    }),
    Credentials({
      id: 'credentials',
      name: 'Credentials',
      credentials: {
        email: {
          label: 'Email',
          type: 'text',
        },
        password: {
          label: 'Password',
          type: 'passord',
        },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          throw new Error('Email and password required');
        }

        const user = await prismadb.user.findUnique({
          where: {
            email: credentials.email,
          },
        });

        if (!user || !user.hashedPassword) {
          throw new Error('Email does not exist');
        }

        const isCorrectPassword = await compare(
          credentials.password,
          user.hashedPassword
        );

        if (!isCorrectPassword) {
          throw new Error('Incorrect password');
        }

        return user;
      },
    }),
  ],
  pages: {
    signIn: '/auth',
  },
  debug: process.env.NODE_ENV === 'development',
  adapter: PrismaAdapter(prismadb),
  session: { strategy: 'jwt' },
  jwt: {
    secret: process.env.NEXTAUTH_JWT_SECRET,
  },
  secret: process.env.NEXTAUTH_SECRET,
});

prismadb 代码 #

import { PrismaClient } from '@prisma/client';

const client = global.prismadb || new PrismaClient();
if (process.env.NODE_ENV === 'production') global.prismadb = client;
export default client;

global.d.ts 代码 #

import { PrismaClient } from '@prisma/client';
import type { MongoClient } from 'mongodb';
declare global {
  namespace globalThis {
    var prismadb: PrismaClient | undefined;
  }
}

核心原因 #

1. JWT密钥未正确配置：NEXTAUTH_JWT_SECRET或NEXTAUTH_SECRET为空或未加载，导致NextAuth在生成JWT时加密密钥无效，触发"ikm"类型错误。
2. 服务器内部错误返回HTML：500错误导致服务器返回错误页面（HTML格式），前端期望JSON响应，因此出现Unexpected token '<'语法错误。
3. 表单字段拼写错误：Credentials provider中密码字段的type写成了passord（应为password），虽不影响账号创建，但可能导致表单行为异常。

解决步骤 #

1. 配置环境变量
   在项目根目录的.env.local文件中添加安全的密钥（可通过openssl rand -hex 32生成）：

   NEXTAUTH_JWT_SECRET=生成的32位十六进制密钥
   NEXTAUTH_SECRET=生成的32位十六进制密钥
   

   确保变量无拼写错误，且开发服务器已重启以加载新环境变量。

2. 修复表单字段错误
   修改[...nextauth]代码中Credentials provider的密码字段配置：

   password: {
     label: 'Password',
     type: 'password', // 修正拼写错误
   },
   

3. 验证JWT配置
   确保NextAuth的JWT配置中secret不为undefined，避免因默认密钥生成逻辑出错导致的加密问题。

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