Курс

Добавляем вход в приложение

МОДУЛЬ 5: АВТОРИЗАЦИЯ И БАЗА ДАННЫХ • Урок 3 из 5

Supabase работает на твоём сервере. Осталось добавить вход в приложение.
Это самая лёгкая часть — Claude всё сделает.

⚠️ Перед этим уроком:

Убедись что Supabase установлен и работает на твоём VDS. Если ещё нет — сначала пройди урок «Supabase на своём сервере».

[ ДОБАВЛЯЕМ КНОПКУ ]

ШАГ 1: Просим Claude

Открой Claude Code и скажи:

"Добавь кнопку входа через Google. Используй Supabase Auth. После входа показывай имя пользователя и кнопку выхода."

Claude добавит:

  • Кнопку "Войти через Google"
  • Код который обрабатывает вход
  • Отображение имени после входа
  • Кнопку "Выйти"

ШАГ 2: Проверяем локально

  1. Открой приложение (обычно http://localhost:5173)
  2. Должна появиться кнопка входа

ШАГ 3: Входим

  1. Нажми "Войти через Google"
  2. Откроется окно выбора Google-аккаунта
  3. Выбери свой аккаунт
  4. Разреши доступ если спросит

Что должно произойти:

  • Тебя перекинет обратно в приложение
  • Вместо кнопки входа — твоё имя
  • Появилась кнопка "Выйти"

ШАГ 4: Проверяем выход

  1. Нажми "Выйти"
  2. Должна вернуться кнопка "Войти через Google"
  • Работает? → Авторизация настроена!

[ ВАРИАНТ 2: EMAIL + ПАРОЛЬ ]

Google OAuth — удобный, но не единственный способ. Supabase поддерживает вход по email и паролю «из коробки». Можно использовать оба варианта или только один.

ШАГ 1: Включаем в Supabase

  1. Открой панель Supabase на своём сервере → Authentication → Providers
  2. Найди Email — он обычно уже включён
  3. Убедись что переключатель Enable Email provider активен
💡 Опционально:

Можешь отключить Confirm email (подтверждение по email) на время разработки — так проще тестировать. В продакшне лучше включить обратно.

ШАГ 2: Просим Claude добавить форму

Открой Claude Code и скажи:

"Добавь форму входа по email и паролю. Две формы: регистрация (signUp) и вход (signIn). Используй Supabase Auth. После входа показывай email пользователя и кнопку выхода."

Claude добавит:

  • Форму с полями Email и Пароль
  • Кнопки «Зарегистрироваться» и «Войти»
  • Обработку ошибок (неверный пароль, email занят)
  • Отображение email после входа + кнопку «Выйти»

ШАГ 3: Проверяем

  1. Открой приложение
  2. Зарегистрируйся с любым email и паролем (минимум 6 символов)
  3. Если включено подтверждение — проверь почту и перейди по ссылке
  4. Войди с этим email и паролем
  • Видишь свой email после входа? → Email-авторизация работает!
💡 Оба варианта вместе:

Можешь использовать Google и Email одновременно. Скажи Claude: «Добавь оба варианта входа: через Google и через email+пароль. Пусть пользователь сам выбирает.» Supabase свяжет аккаунты автоматически, если email совпадает.

[ ЧАСТЫЕ ПРОБЛЕМЫ ]

"redirect_uri_mismatch":

  • URL в Google Cloud не совпадает с текущим адресом
  • Добавь текущий URL в Authorized JavaScript origins
  • Добавь callback URL от Supabase в Authorized redirect URIs

"access_denied":

  • Проверь что OAuth consent screen настроен
  • Попробуй добавить свой email в Test users (в Google Cloud)

После входа ничего не происходит:

  • Проверь консоль браузера на ошибки
  • Скопируй ошибку → Claude

Бесконечная загрузка:

  • Перезагрузи страницу
  • Проверь ключи в Supabase
⚠️ Для localhost:

Убедись что в Google Cloud добавлен http://localhost:5173 (или какой у тебя порт) в Authorized JavaScript origins.

Проблемы с Email+пароль:

"User already registered":

  • Такой email уже есть — используй вход (signIn), а не регистрацию (signUp)

"Invalid login credentials":

  • Неверный пароль или email не зарегистрирован
  • Проверь что пароль минимум 6 символов

"Email not confirmed":

  • Включено подтверждение email — проверь почту
  • Или отключи Confirm email в Supabase на время разработки

[ ПУБЛИКУЕМ НА СЕРВЕР ]

ШАГ 5: Отправляем на VDS

Скажи Claude:

"Сохрани изменения и отправь на сервер"

Или вручную: скопируй обновлённые файлы на свой VDS через SCP / SFTP.

ШАГ 6: Проверяем на проде

  1. Открой свой сайт (домен или IP сервера)
  2. Попробуй войти
  3. Должно работать так же как локально
⚠️ Если не работает на проде:

Проверь что в Google Cloud (если используешь OAuth) добавлен твой домен:

  • https://твой-домен.ru в Authorized JavaScript origins
  • Callback URL от Supabase в Authorized redirect URIs

[ ПРОВЕРЯЕМ В SUPABASE ]

ШАГ 7: Смотрим пользователей

  1. Открой панель Supabase на своём сервере → Authentication → Users
  2. Ты должен увидеть себя в списке
  3. Видно email, когда зарегистрировался, последний вход

Это пользователи которые вошли в твоё приложение.

[ ПРОВЕРКА ]

Что должно быть:

  • Вход через Google работает (или Email+пароль, или оба)
  • Видишь своё имя / email после входа
  • Выход работает
  • На проде тоже работает
  • Видишь себя в Supabase Users

Авторизация настроена! Дальше — база данных.

💬 Совет:

Авторизация — это тема, после которой приложение перестаёт быть "игрушкой". Есть вход, есть пользователь, есть данные.

Если дошёл до сюда — значит всё работает. Дальше будет проще.