For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ru/docs/tanstack/google-sign-in.md (or send Accept: text/markdown).
Добавьте вход через Google
Создайте бесплатный OAuth-клиент Google Cloud и подключите Continue with Google к приложению.
Прохождение для начинающих
Предварительные условия: веб-приложение работает локально (Запуск за 5 минут) и мигрированная база данных для реальных аккаунтов (Настройка базы данных). Нужен обычный аккаунт Google; всё здесь бесплатно и занимает около 10 минут.
Кратко о терминах: OAuth — это стандарт, при котором Google выполняет вход пользователя на странице Google и передаёт вашему приложению подтверждение. Проект Google Cloud — это контейнер в консоли Google, хранящий креденшелы вашего приложения. Экран согласия OAuth — страница, которую Google показывает пользователям перед возвратом. Client ID идентифицирует ваше приложение для Google; client secret — его пароль и остаётся на сервере.
1. Создайте проект Google Cloud. 2. Настройте экран согласия. 3. Создайте один Web OAuth-клиент и скопируйте его ID и секрет. 4. Вставьте три значения в apps/web-tanstack/.env.local и перезапустите dev-сервер.
Одного проекта достаточно для всего продукта: тот же проект Google Cloud позже будет хостить ваше развёртывание Cloud Run, а мобильный вход проходит через тот же веб-бэкенд — отдельный клиент для каждой платформы или функции не создаётся.
Создание проекта Google Cloud
1. Откройте console.cloud.google.com и войдите своим аккаунтом Google.
2. Нажмите выпадающий список проектов в верхней панели (рядом с логотипом Google Cloud) и выберите New Project.
3. Дайте ему имя — название продукта подойдёт — и нажмите Create. Организация, карта или платёжный аккаунт для креденшелов входа не нужны.
Ожидается: консоль перезагрузится в новый проект, и его имя появится в верхней панели. Переиспользуйте этот проект, когда дойдёте до руководства по развёртыванию, вместо создания ещё одного.
Настройка экрана согласия OAuth
1. В левой навигации откройте APIs & Services → OAuth consent screen и нажмите Get started.
2. Введите App name, которое увидят пользователи (название вашего продукта), выберите User support email, выберите External для аудитории, заполните контактный email разработчика и дойдите до Create.
3. Больше на этом экране ничего не нужно: приложение запрашивает только стандартные скоупы openid, email и profile, которые не требуют дополнительных скоупов или верификации.
Статус публикации остаётся Testing, пока вы разрабатываете. В этом режиме входить могут только перечисленные аккаунты, поэтому добавьте собственный Gmail-адрес в Audience → Test users — иначе Google заблокирует даже вас. Когда продукт выйдет в онлайн, нажмите Publish app; поскольку чувствительные скоупы не запрашиваются, публикация не запускает проверку Google.
Создание OAuth-клиента
1. Откройте APIs & Services → Credentials → + Create Credentials → OAuth client ID.
2. Установите Application type в Web application и назовите примерно supastack local.
3. В Authorized JavaScript origins добавьте http://localhost:3000. В Authorized redirect URIs добавьте http://localhost:3000/api/auth/callback/google — этот путь колбэка принадлежит Better Auth, стандартному движку аутентификации комплекта: {APP_URL}/api/auth/callback/google.
4. Нажмите Create и скопируйте Client ID и Client Secret из диалога. Их можно открыть заново на странице клиента позже, но копирование сейчас экономит шаг.
Для продакшена создайте второй Web-клиент (рекомендуется) или добавьте к этому: JavaScript-ориджин https://yourdomain.com и redirect URI https://yourdomain.com/api/auth/callback/google. Отдельные клиенты для каждого окружения означают, что утечка локального секрета не может достичь продакшена.
Добавьте значения в приложение
Откройте apps/web-tanstack/.env.local — TanStack Start читает этот файл, а не корневой .env — и задайте три строки ниже. AUTH_GOOGLE_ENABLED=true включает кнопку; пара клиента идентифицирует ваш клиент Google Cloud.
Client secret — только для сервера: он никогда не должен появляться в переменных NEXT_PUBLIC_ или EXPO_PUBLIC_ и никогда не коммититься в Git. В продакшене задайте те же три имени в хранилище секретов вашего хоста вместо env-файла.
Перезапустите dev-сервер после редактирования — изменения окружения читаются только при запуске.
# apps/web-tanstack/.env.local
AUTH_GOOGLE_ENABLED=true
GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secretПроверка и устранение неполадок
Откройте http://localhost:3000/auth, нажмите кнопку Google, пройдите экран согласия Google и убедитесь, что приложение возвращается с выполненным входом.
redirect_uri_mismatch означает, что зарегистрированный в Google redirect URI не совпадает точно — проверьте протокол (http или https), порт и путь: он должен заканчиваться на /api/auth/callback/google, а не /callback/google/ или вариант с завершающим слешем.
Access blocked / has not completed the Google verification process означает, что экран согласия всё ещё в Testing, а входящий аккаунт не указан в Test users — добавьте его в разделе Audience.
Если кнопка Google отсутствует или вход по-прежнему не работает после редактирования .env.local, перезапустите dev-сервер. Если запуск падает с именем переменной, флаг включён без полной пары клиента.
Чтобы продолжить настройку, прочитайте Добавьте вход через GitHub.