Добавьте вход через GitHub

Прохождение для начинающих

Предварительные условия: веб-приложение работает локально и мигрированная база данных для реальных аккаунтов. Нужен аккаунт GitHub — подойдёт тот же, что владеет репозиторием. Бесплатно, около 5 минут на окружение.

Кратко о терминах: GitHub OAuth App — это регистрация, позволяющая GitHub выполнять вход пользователей за вас. В отличие от большинства провайдеров, одно OAuth App допускает ровно один Authorization callback URL — поэтому локальному (http://localhost:3000/…) и продакшен-окружению (https://yourdomain.com/…) нужны собственные приложения. Переиспользование одного приложения с редактированием колбэка туда-сюда каждый раз ломает одну из сторон.

1. Создайте локальное OAuth App в Developer settings вашего аккаунта. 2. Скопируйте его Client ID и сгенерируйте Client Secret. 3. Задайте три переменные окружения и перезапустите. 4. Повторите один раз с вашим реальным доменом перед выходом в онлайн.

• Запустите веб-приложение за 5 минут
• Настройте базу данных

Создание локального OAuth App

1. Откройте github.com и войдите. Нажмите фото профиля в правом верхнем углу → Settings.

2. Прокрутите до низа левой боковой панели и откройте Developer settings → OAuth Apps → New OAuth App.

3. Application name: что-то вроде supastack local — пользователи видят это имя на странице авторизации GitHub. Homepage URL: http://localhost:3000. Authorization callback URL: http://localhost:3000/api/auth/callback/github. Нажмите Register application.

4. На странице приложения скопируйте Client ID, нажмите Generate a new client secret и сразу скопируйте секрет — GitHub показывает его только один раз, хотя новый всегда можно сгенерировать.

Создание продакшен OAuth App

Повторите те же шаги New OAuth App с именем вашего продукта, Homepage URL https://yourdomain.com и Authorization callback URL https://yourdomain.com/api/auth/callback/github.

Держите креденшелы каждого приложения в его собственном окружении: пара локального приложения живёт в apps/web-tanstack/.env.local, пара продакшен-приложения — в хранилище секретов хоста. Локальный секрет никогда не должен достигать продакшен-конфигурации и наоборот.

Добавьте значения в приложение

Задайте три строки ниже в apps/web-tanstack/.env.local с креденшелами локального приложения. AUTH_GITHUB_ENABLED=true включает кнопку; пара идентифицирует OAuth App.

Client secret остаётся только на сервере — никогда в переменных NEXT_PUBLIC_/EXPO_PUBLIC_ и никогда не коммитится. Перезапустите dev-сервер после редактирования.

Не переиспользуйте значения GITHUB_APP_*, которые можете встретить в другом месте — они принадлежат несвязанной интеграции GitHub App, а не входу пользователей. docs/github-auth-setup.md комплекта проводит весь этот поток от начала до конца, если нужен второй источник.

# apps/web-tanstack/.env.local — from the LOCAL OAuth App
AUTH_GITHUB_ENABLED=true
GITHUB_CLIENT_ID=your-oauth-app-client-id
GITHUB_CLIENT_SECRET=your-oauth-app-secret

Проверка и устранение неполадок

Откройте http://localhost:3000/auth и нажмите кнопку GitHub. Авторизуйте приложение на github.com и убедитесь, что вы возвращаетесь с выполненным входом.

Пока не задан AUTH_GITHUB_ENABLED=true, опция GitHub на /auth остаётся видимой, но отключённой — проверьте имена в env-файле и перезапустите. Установка флага без GITHUB_CLIENT_ID и GITHUB_CLIENT_SECRET роняет запуск и называет отсутствующую переменную.

Несовпадение колбэка — обычная ошибка: Authorization callback URL приложения должен точно равняться {APP_URL}/api/auth/callback/github — протокол, хост, порт и путь. Ошибка redirect_uri после развёртывания обычно означает, что запрос попал в креденшелы локального приложения, пока APP_URL указывает на продакшен, или наоборот.

Перезапускайте dev-сервер после каждого редактирования env; значения читаются только при запуске.

• Далее настройте базу данных
• Обзор OAuth-провайдеров