InvalidCheck: значение pkceCodeVerifier не может быть разобрано. Читайте подробнее на https://errors.authjs.dev#invalidcheck

Содержание

Вопрос или проблема
Ответ или решение
Причины возникновения проблемы
Предложенное решение
Заключение

Вопрос или проблема

Я пытаюсь настроить next-auth, используя учебник для authjs v5. Я получаю эту ошибку InvalidCheck на Vercel: InvalidCheck: значение pkceCodeVerifier не может быть разобрано. Узнайте больше на https://errors.authjs.dev#invalidcheck, когда пытаюсь зарегистрироваться с помощью Google в первый раз.

Мне показывается страница входа в Google, и процесс Oauth, похоже, завершается, прежде чем я попадаю на страницу с ошибкой.

Это приводит к ошибке 504 Эта серверная функция превысила время ожидания., что затем требует от меня очистить хранилище и куки перед повторной попыткой.

Я использую NextJS 15.

Мой код работает идеально на localhost.

Вот мой auth.ts:

  import NextAuth from "next-auth"
  import Google from "next-auth/providers/google"
  import client from "@lib/db"
  import User from "@models/user"
  import { connectToDB } from "@utils/database"

  export const { handlers, signIn, signOut, auth } = NextAuth({
    providers: [Google],
    callbacks:{

      async session({session}){
        const sessionUser = await User.findOne({  email: session.user.email })
        // console.log("sessionUser", session)
        if(sessionUser){
          session.user.id = sessionUser.id
        }
        return session;
      },
      async signIn({ account, profile, user, credentials }) {
        try {
          await connectToDB();

          // проверить, существует ли пользователь
          const userExists = await User.findOne({ email: profile.email });

          // если нет, создайте новый документ и сохраните пользователя в MongoDB
          if (!userExists) {
            await User.create({
              email: profile.email,
              username: profile.name.replace(" ", "").toLowerCase(),
              image: profile.picture,
            });
          }

          return true
        } catch (error) {
          console.log("Ошибка при проверке существования пользователя: ", error.message);
          return false
        }
      },
    }
  })```

Я пытался следовать шагам для ошибки `PKCE code_verifier cookie was missing on upgrade`. Однако это, похоже, не решило мою проблему. Буду очень признателен за любую помощь.

Ответ или решение

Ошибки в аутентификации с использованием PKCE в NextAuth для Google

При настройке аутентификации через NextAuth и использовании Google в вашем приложении на Next.js версии 15, возникла ошибка InvalidCheck: pkceCodeVerifier value could not be parsed, что указывает на проблемы с обработкой значения кодового проверяющего устройства PKCE (Proof Key for Code Exchange). Это может приводить к сбоям в процессе входа, как вы столкнулись с ошибкой 504 — "This Serverless Function has timed out".

Причины возникновения проблемы

Некорректные куки: PKCE требует, чтобы определенные куки были отправлены и правильно обработаны. Если cookie с pkceCodeVerifier отсутствует или искажен, это может вызвать ошибку. Это происходит чаще всего при смене окружения — в вашем случае, переход от localhost к Vercel.
Серверное окружение: Разные режимы (localhost и продакшн) могут иметь различные настройки, что влияет на доступность и обработку кук. Проверьте, правильно ли настроены переменные окружения на Vercel, такие как NEXTAUTH_URL, который должен совпадать с URL вашего приложения. Например, это может выглядеть так: https://<ваш-домен.com>.
Проблемы с кэшированием и сессиями: Если браузер с кэшированными данными (куки или хранилище локальных данных) пытается повторять аутентификацию, это может вызвать конфликты. Очистка куки и локального хранилища, как вы уже делали, может временно помочь, но не является полноценным решением.

Предложенное решение

Проверьте маршрутизацию и переменные окружения: Убедитесь, что переменные окружения установлены правильно, особенно NEXTAUTH_URL. На Vercel она должна указывать на базовый URL вашего приложения.
Настройте код проверяющего устройства PKCE: Убедитесь, что в вашем коде, при обработке OAuth, корректно генерируется и отправляется pkceCodeVerifier. Этот процесс должен проходить автоматически через библиотеку next-auth, но в случае вызова ошибок проверка логики может быть опциональной.
Логи и отладка: Пусть логирование ошибок в процессе выполнения signIn будет более детализированным. Это может помочь вам отследить, на каком этапе происходит сбой. Например, добавьте больше информации о сессии и пользователе в ваших логах.
Проверка на наличие куки: Убедитесь, что куки действительно отправляются и доступны в браузере во время выполнения. Используйте инструменты разработчика для анализа сетевого трафика и обнаружения отсутствующих или поврежденных куки.

Заключение

Проблемы с PKCE в NextAuth могут быть связаны с неправильной конфигурацией сервера, некорректными куками или недостаточной обработкой ошибок. Проведение тщательного анализа логов и систематическая проверка переменных окружения помогут выявить причину и устранить ошибки, что гарантирует успешную аутентификацию пользователей через Google на платформе Vercel.

Если предложенные шаги не решают проблему, рекомендуется обратиться к документации по NextAuth и поддержке сообщества, чтобы специалистам было легче помочь в вашей уникальной ситуации.