NextAuth凭证认证语法错误求助：预期分号问题

我在Next.js中使用NextAuth搭建认证系统，实现凭证认证功能时出现语法错误，提示“预期分号”和“预期','，却得到';'”，反复检查代码未能定位问题，以下是我的代码及错误信息：

import NextAuth,{ NextAuthOptions }  from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
import GithubProvider from 'next-auth/providers/github'
import CredentialsProvider from "next-auth/providers/credentials";
// import Providers from 'next-auth/providers'
// import sessionProvider from 'next-auth'
// const client_Id="207449855842-gv24ltosjj4ahf1r7lelc4jiii5qsqe8.apps.googleusercontent.com"
// const client_secret="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"
export default NextAuth({
  
  providers: [
    GoogleProvider({
      client_Id:process.env.GOOGLE_ID,
      clientSecret:process.env.GOOGLE_SECRET,
    
    }),
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    CredentialsProvider({
      type: "Credentials",
      credentials: {
        // email: { label: "Email address", type: "text" },
        // password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        
          const { email, password } = credentials as {
          email: string;
          password: string;
        };
        if (email !== "john@gmail.com" || password !== "1234") {
          throw new Error("invalid credentials");
        }
        return {
          id: "1234",
          name: "John Doe",
          email: "john@gmail.com",
          role: "admin",
        };
  
       
      }
    }),
    callbacks: {
      jwt(params) {
        // update token
        if (params.user?.role) {
          params.token.role = params.user.role;
        }
        // return final_token
        return params.token;
      },
    },
    session: {
      strategy: "jwt",
    },
    pages: {
      signIn: "/login",
      
    },
    
  ],
  secret:"[6j2Ld_PiUl3etQENg0swsJnuMaAJ]",
  debug:true
  
   
})

错误信息：

Error:
  x 预期分号
    ,-[C:\Users\acer\Desktop\next\fundraiser\pages\api\auth\[...nextauth].js:26:1]
 26 |       },
 27 |       async authorize(credentials, req) {
 28 |
 29 |           const { email, password } = credentials as {
    :                                                   ^^
 30 |           email: string;
 31 |           password: string;
 31 |         };
    `----

  x 预期','，却得到';'
    ,-[C:\Users\acer\Desktop\next\fundraiser\pages\api\auth\[...nextauth].js:29:1]
 29 |           const { email, password } = credentials as {
 30 |           email: string;
 31 |           password: string;
 32 |         };
    :          ^
 33 |         if (email !== "john@gmail.com" || password !== "1234") {
 34 |           throw new Error("invalid credentials");
 34 |         }
    `----

Caused by:
    语法错误

错误原因及修复方案 #

1. JavaScript文件误用TypeScript语法
   你的文件是.js后缀，但代码中使用了TypeScript专属的类型断言credentials as { email: string; password: string; }，JavaScript不支持该语法。可以二选一修复：

   • 移除类型断言，直接解构：const { email, password } = credentials;
   • 将文件后缀改为.ts，确保项目已配置TypeScript支持

2. 配置项层级错误
   callbacks、session、pages属于NextAuth配置对象的顶级属性，你错误地将它们放在了providers数组内部，需要移到数组外与providers同级。

3. 参数名拼写错误
   GoogleProvider的配置参数client_Id拼写错误，正确应为clientId，否则会导致Google登录功能失效。

修复后的完整代码 #

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
import GithubProvider from 'next-auth/providers/github'
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    CredentialsProvider({
      type: "Credentials",
      credentials: {
        // email: { label: "Email address", type: "text" },
        // password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        const { email, password } = credentials;
        if (email !== "john@gmail.com" || password !== "1234") {
          throw new Error("invalid credentials");
        }
        return {
          id: "1234",
          name: "John Doe",
          email: "john@gmail.com",
          role: "admin",
        };
      }
    })
  ],
  callbacks: {
    jwt(params) {
      if (params.user?.role) {
        params.token.role = params.user.role;
      }
      return params.token;
    },
  },
  session: {
    strategy: "jwt",
  },
  pages: {
    signIn: "/login",
  },
  secret:"[6j2Ld_PiUl3etQENg0swsJnuMaAJ]",
  debug:true
})

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