Конфигурация провайдеров: GitHub, Google, Email

1. Конфигурируем GitHub Provider

Как работает OAuth в next-auth

Когда вы добавляете провайдер (например, GitHub), next-auth берёт на себя всю рутину:

• Перенаправляет пользователя на страницу авторизации GitHub.
• Получает от GitHub специальный "код" (authorization code).
• Меняет этот код на access token (секретный ключик).
• Получает данные пользователя (имя, email, аватар).
• Создаёт (или находит) пользователя в вашей базе (или в памяти, если база не настроена).
• Сохраняет сессию.

Вам остаётся только сконфигурировать провайдер — указать пару секретных ключей, которые выдают GitHub/Google (их называют clientId и clientSecret).

Страница входа с выбором провайдера

В рамках курса мы продолжаем развивать мини-приложение "Список задач". Сейчас у нас есть форма входа через CredentialsProvider (логин/пароль). Давайте добавим кнопки "Войти через GitHub", "Войти через Google" и "Войти через Email".

Регистрируем приложение на GitHub

1. Заходим на https://github.com/settings/developers.
2. Нажимаем "New OAuth App".
3. Заполняем поля:
   • Application name: что угодно (например, "My Next.js App").
   • Homepage URL: http://localhost:3000 (если тестируем локально).
   • Authorization callback URL: http://localhost:3000/api/auth/callback/github
4. Сохраняем. Копируем Client ID и Client Secret (последний появится после нажатия "Generate a new client secret").

Добавляем переменные окружения

GITHUB_ID=ваш_клиент_id
GITHUB_SECRET=ваш_клиент_secret

Подключаем GitHubProvider в next-auth

В файле app/api/auth/[...nextauth]/route.js (или route.ts, если используете TypeScript) подключаем GitHubProvider:

import NextAuth from "next-auth";
import GitHubProvider from "next-auth/providers/github";

export const authOptions = {
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    // другие провайдеры...
  ],
  // ... остальные опции
};

export const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Пояснения:

• GitHubProvider — это готовый провайдер из next-auth, вам не нужно писать никакой OAuth-магии вручную.
• clientId и clientSecret подтягиваются из переменных окружения (никогда не храните их прямо в коде!).

Проверяем

Запускаем приложение, открываем страницу входа (/api/auth/signin или свою кастомную) — появилась кнопка "Sign in with GitHub"! Жмём — если всё настроено верно, увидим окно авторизации GitHub, а после входа — попадём обратно в приложение.

3. Конфигурируем Google Provider

Регистрируем приложение в Google Cloud

1. Заходим на https://console.cloud.google.com/apis/credentials.
2. Создаём проект (если ещё нет).
3. Нажимаем "Create Credentials" → "OAuth client ID".
4. Выбираем Web application.
5. В поле Authorized redirect URIs добавляем:
   http://localhost:3000/api/auth/callback/google
6. Сохраняем. Копируем Client ID и Client Secret.

Добавляем переменные окружения

GOOGLE_CLIENT_ID=ваш_клиент_id
GOOGLE_CLIENT_SECRET=ваш_клиент_secret

Подключаем GoogleProvider

import GoogleProvider from "next-auth/providers/google";

// ... в массиве providers:
GoogleProvider({
  clientId: process.env.GOOGLE_CLIENT_ID,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),

Весь массив теперь может выглядеть так:

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,
  }),
  // другие провайдеры...
],

Проверяем

Перезапускаем сервер (чтобы переменные окружения подтянулись). На странице входа появилась кнопка "Sign in with Google". Авторизация работает по тому же принципу, что и с GitHub.

4. Конфигурируем Email Provider

Email-провайдер — это чуть другая история. Пользователь вводит email, получает magic link (волшебную ссылку) на почту, кликает по ней — и входит на сайт. Пароли? Зачем они нужны, если есть email!

Добавляем EmailProvider и зависимости

Вам потребуется SMTP-сервер. Для тестов можно использовать Ethereal.email — это бесплатный сервис для разработчиков, который не отправляет настоящие письма, а просто позволяет их "посмотреть".

Получаем SMTP-данные для теста:

1. Заходим на https://ethereal.email/create.
2. Генерируем тестовый аккаунт.
3. Копируем SMTP-данные (host, port, user, pass).

Переменные окружения

EMAIL_SERVER=smtp://user:pass@smtp.ethereal.email:587
EMAIL_FROM="NextAuth Test <test@yourdomain.com>"

• EMAIL_SERVER — строка подключения к SMTP-серверу.
• EMAIL_FROM — от кого будут приходить письма (любое валидное имя/email).

Подключаем EmailProvider

import EmailProvider from "next-auth/providers/email";

// ... в массиве providers:
EmailProvider({
  server: process.env.EMAIL_SERVER,
  from: process.env.EMAIL_FROM,
}),

Проверяем

На странице входа появилась форма для ввода email. Вводим email, жмём — next-auth отправляет magic link на указанный адрес. Для Ethereal это письмо можно посмотреть прямо в браузере (ссылка будет в консоли сервера).

Пример полной конфигурации всех трёх провайдеров

import NextAuth from "next-auth";
import GitHubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";
import EmailProvider from "next-auth/providers/email";

export const authOptions = {
  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,
    }),
    EmailProvider({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM,
    }),
  ],
  // ... другие опции (callbacks, pages, session и т.д.)
};

export default NextAuth(authOptions);

5. Кастомизация страницы входа (опционально)

По умолчанию next-auth сам генерирует страницу входа (/api/auth/signin), но вы можете сделать свою кастомную страницу и сами выводить кнопки нужных провайдеров. Для этого используйте хук useSession и функцию signIn из next-auth/react.

Пример кастомной страницы входа (упрощённо):

import { signIn } from "next-auth/react";

export default function SignInPage() {
  return (
      <div>
        <h1>Войти</h1>
        <button onClick={() => signIn("github")}>Войти через GitHub</button>
        <button onClick={() => signIn("google")}>Войти через Google</button>
        <form
          onSubmit={e => {
            e.preventDefault();
            const email = e.target.email.value;
            signIn("email", { email });
          }}
        >
          <input type="email" name="email" required placeholder="Email" />
          <button type="submit">Войти по Email</button>
        </form>
      </div>
  );
}

6. Полезные нюансы и особенности

• Переменные окружения: Никогда не коммитьте clientSecret в репозиторий! Используйте .env.local, который не попадает в git.
• Redirect URL: Не забывайте указывать точные callback-адреса при регистрации приложения у провайдера. Ошибка в одном символе — и авторизация не сработает.
• Email-провайдер: Для продакшна используйте реальный SMTP-сервер (например, Gmail, Mailgun, Sendgrid). Для тестов — Ethereal.
• Порядок провайдеров: Кнопки на странице входа отображаются в том порядке, в каком вы указали их в массиве providers.
• Один пользователь — несколько способов входа: Если пользователь использует один и тот же email для разных провайдеров (например, Google и Email), next-auth "сольёт" их в одну запись (если email совпадает).
• Локальная разработка: Иногда GitHub/Google не любят localhost — используйте 127.0.0.1 или ngrok, если что-то не работает.

7. Типичные ошибки при конфигурации провайдеров

Ошибка №1: Неправильный callback URL
Самая частая проблема — указали в настройке GitHub/Google неправильный redirect URI (callback URL). Проверьте, что он совпадает с http://localhost:3000/api/auth/callback/github (или /google).

Ошибка №2: Переменные окружения не подтянулись
Если после добавления переменных окружения ничего не работает, попробуйте перезапустить сервер разработки. Next.js не всегда подхватывает новые значения "на лету".

Ошибка №3: Client Secret в коде
Никогда не вставляйте clientSecret прямо в код! Это дырка в безопасности.

Ошибка №4: Проблемы с отправкой email
Если используете EmailProvider и письма не приходят — проверьте настройки SMTP. Для Ethereal письма не приходят в почтовый клиент, они доступны только через web-интерфейс Ethereal.

Ошибка №5: Несовпадение email-адресов
Если пользователь входит через Google и через Email, но использует разные email-адреса — это будут разные аккаунты!

Ошибка №6: Не работает авторизация на проде
Проверьте, что в настройках OAuth-приложения указаны правильные адреса продакшн-сервера, а не localhost.