Next.js 14 + Auth.js v5集成VK OAuth遇Code Challenge Method错误

问题根源 #

你的代码存在两个关键问题：

1. 重复注册了VK Provider（同时添加了无配置的Vk和带密钥配置的Vk({...})），会导致配置冲突。
2. 之前尝试的codeChallengeMethod配置路径错误，Auth.js v5的参数嵌套规则和旧版本不同，导致配置未生效。

修复步骤 #

1. 移除重复的VK Provider

首先删除无配置的Vk项，只保留携带clientId和clientSecret的Provider配置。

2. 禁用PKCE或修改Code Challenge Method

VK不支持S256类型的code challenge，你可以通过以下两种方式解决：

方式一：直接禁用PKCE（推荐）

在VK Provider配置中添加pkce: false，这会完全跳过code challenge相关参数的发送，直接解决错误：

import NextAuth from "next-auth";
import Vk from "next-auth/providers/vk";

export const { handlers, auth, signIn, signOut } = NextAuth({
  pages: {
    signIn: "/auth/login",
  },
  providers: [
    Vk({
      clientId: process.env.AUTH_VK_ID,
      clientSecret: process.env.AUTH_VK_SECRET,
      pkce: false, // 禁用PKCE流程，跳过code challenge参数
    }),
  ],
});

方式二：指定Code Challenge Method为plain

如果需要保留PKCE流程，可在authorization.params中显式设置code_challenge_method为plain：

import NextAuth from "next-auth";
import Vk from "next-auth/providers/vk";

export const { handlers, auth, signIn, signOut } = NextAuth({
  pages: {
    signIn: "/auth/login",
  },
  providers: [
    Vk({
      clientId: process.env.AUTH_VK_ID,
      clientSecret: process.env.AUTH_VK_SECRET,
      authorization: {
        params: {
          code_challenge_method: "plain",
        },
      },
    }),
  ],
});

为什么之前的配置无效 #

你之前写的authorization: { codeChallengeMethod: 'plain' }不符合Auth.js v5的配置规范，该参数需要嵌套在authorization.params下，或者通过顶级的pkce配置项来控制PKCE流程的开启状态。

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