Проблема с входом через Google SSO

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

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import axios from 'axios';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  // страницы: {
  //   вход: '/login', // Пользовательская страница входа при необходимости
  // },

  страницы: {
    вход: '/login', // Пользовательская страница входа
    ошибка: '/auth/error', // Пользовательская страница ошибки
  },

  сессия: {
    maxAge: 30 * 60, // Сессия истекает через 2 минуты (120 секунд)
  },
  обратные вызовы: {
    async session({ session, token }) {
      try {
        // Проверить токен доступа через Google API
        const response = await axios.get(`https://www.googleapis.com/oauth2/v3/tokeninfo?access_token=${token.accessToken}`);

        console.log('Сессия Google')

        console.log(response);

        // return;

        if (response.status !== 200) {
          throw new Error('Недействительный токен'); 
        }
        // session.user.email = token.email;
      } catch (error) {
        // Если токен недействительный, верните null или обработайте аннулирование сессии
        // session;
      }
      return session;
    },
  },
});

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

Проблема входа через Google SSO: Ошибка CLIENT_FETCH_ERROR

При интеграции входа через Google SSO с использованием библиотеки NextAuth в вашем приложении возникла ошибка: [next-auth][error][CLIENT_FETCH_ERROR] Unexpected token '<', "<DOCTYPE "... is not valid JSON. Эта ошибка сигнализирует о том, что API возвращает HTML-ответ вместо ожидаемого JSON. Давайте подробно разберем возможные причины и предложим решения для устранения этой проблемы.

Анализ проблемы

1. Ошибочный ответ API: Причина возникновения ошибки заключается в том, что сервер, обрабатывающий ваш запрос авторизации, возвращает HTML-код вместо JSON. Это может происходить в нескольких случаях:

   • Неверный URL API.
   • Проблемы с конфигурацией на стороне сервера.
   • Ошибки при обработке запросов.

2. Путь к файлу: Ваша конфигурация NextAuth расположена в файле \pages\api\auth\[...nextauth].ts, что указывает на то, что ошибки могут происходить именно в этом месте.

3. Настройки конфигурации:

   • Убедитесь, что значения переменных окружения (например, GOOGLE_CLIENT_ID и GOOGLE_CLIENT_SECRET) корректны. Сброс значений не всегда решает проблему, если неверные значения по-прежнему используются.
   • Добавление secret: NEXTAUTH_SECRET в конфигурацию может помочь, несмотря на то, что по документации это не обязательно.

Шаги по устранению ошибки

1. Проверка переменных окружения:
   Проверьте, что переменные окружения правильно настроены. Например, выполните вывод значений GOOGLE_CLIENT_ID и GOOGLE_CLIENT_SECRET в консоль, чтобы убедиться, что они не пустые и соответствуют данным, предоставленным в Google Cloud Console.

2. Обновление и очистка браузера:

   • Очистка кэша и cookies из браузера может помочь устранить проблемы, связанные с предыдущими сессиями. Убедитесь, что вы выполнили эту операцию для http://localhost:3000.
   • Проверьте обновление библиотеки NextAuth с версии 4.14.0 до 4.15.0. Убедитесь, что у вас нет несовместимых версий зависимостей.

3. Настройка обратного URL:

   • Проверьте, правильно ли вы настраиваете обратный URL для OAuth в Google Cloud Console, чтобы он соответствовал http://localhost:3000/api/auth/callback/google.
   • Попробуйте напрямую перейти по адресу localhost:3000/api/auth/callback/google и посмотрите, возвращает ли сервер ожидаемый JSON или HTML.

4. Отладка:

   • В вашем коде добавьте дополнительный логгинг в обработчике session для отслеживания каждого этапа обработки и ответов от Google API.

     console.log('Sending request to Google API for token validation');
     console.log(`Access Token: ${token.accessToken}`);

     Это поможет вам диагностицировать, на каком этапе происходит сбой.

5. Обработка ошибок:

   • В вашем коде стоит обработать случаи, когда запрос к Google API возвращает ошибку. Добавьте коды ошибок для лучшей диагностики, чтобы не получить молчаливые ошибки:

     if (response.status !== 200) {
     console.error('Error validating token:', response.data);
     throw new Error('Invalid token'); 
     }

Заключение

Работа с SSO и OAuth может быть сложной, особенно если вы не учитываете признаки неправильной конфигурации или ошибок. Следуйте указанным выше шагам для диагностики и устранения возникшей проблемы. Не забудьте проверить изменения в документации NextAuth и Google API, так как они могут влиять на работу вашего кода. Удачи!