Как добавить вход в приложение — пошагово, не изобретая пароли

Главная ошибка новичка с авторизацией — попытаться сделать её самому. «Заведу таблицу users, поле password, форму входа…» Стоп. Самописная авторизация — это место, где ломаются и сливают данные. Хранить пароли безопасно, защищать от перебора, делать сброс — это отдельная инженерная дисциплина.

Хорошая новость: тебе не надо ничего этого писать. Готовый сервис делает вход за тебя, а ты подключаешь его за вечер. Разберём на Supabase Auth — он бесплатный и популярный у вайб-кодеров, но логика одинаковая для Clerk, Auth0 и любого другого.

Что получится

К концу: рабочая кнопка «Войти», вход по почте и через Google, страницы, закрытые от чужих, и понимание, кто сейчас залогинен. Поехали.

1. Заведи проект в сервисе авторизации

Зарегистрируйся в Supabase, создай проект. В разделе Authentication уже всё готово — таблица пользователей, шифрование паролей, токены сессий созданы за тебя. Тебе ничего не надо проектировать.

Из настроек проекта возьми два значения: URL проекта и anon key (публичный ключ). Положи их не в код напрямую, а в переменные окружения — это первое правило безопасности.

2. Включи способы входа

В Authentication → Providers включи то, что нужно:

• Email — вход по почте. Современный вариант — без пароля: человек вводит email, ему приходит код или ссылка (magic link). Меньше паролей — меньше проблем.
• Google / Apple — вход в один тап. Под капотом это OAuth: сервис всё делает сам, тебе надо лишь вставить пару ключей из консоли Google.

Совет: начни с email-кода. Это работает сразу, без возни с консолями Google, а соцвходы добавишь потом.

3. Добавь кнопку входа

Подключи библиотеку сервиса (@supabase/supabase-js) и вызови готовый метод. Вход по magic link — это буквально одна функция:

await supabase.auth.signInWithOtp({ email: userEmail })

Человек ввёл почту → ему улетело письмо со ссылкой → он кликнул → он внутри. Вход через Google — такой же один вызов signInWithOAuth({ provider: 'google' }). Никаких форм с паролями ты не пишешь.

4. Закрой страницы от чужих

Вот шаг, который новички пропускают, — и зря. Кнопка входа есть, но защищённые страницы всё ещё открыты по прямой ссылке. Надо проверять: есть ли у этого посетителя действующая сессия.

const { data } = await supabase.auth.getSession()
if (!data.session) redirectTo('/login')

Нет сессии — отправляем на вход. Делай эту проверку на сервере там, где отдаёшь приватные данные, а не только пряча кнопку в интерфейсе. Спрятать ссылку — не значит закрыть дверь.

5. Узнавай, кто вошёл

Когда человек залогинен, сервис даёт тебе его данные — id, почту. По этому id ты привязываешь данные к пользователю: его заметки, его прогресс. Если используешь базу с правилами доступа (в Supabase это RLS), каждый видит только свои строки — даже если кто-то полезет в чужие, база не отдаст. Это та же логика, что в гайде как завести базу данных.

Частые вопросы

Это правда безопасно — не писать вход самому?

Да, и именно поэтому безопасно. Сервисы вроде Supabase, Clerk, Auth0 занимаются только авторизацией, проходят аудиты и чинят дыры быстрее, чем ты узнаешь о них. Самописный вход почти всегда слабее — слишком много мелких деталей, в которых легко ошибиться.

Сколько это стоит?

На старте — ноль. У Supabase, Clerk и других есть бесплатный тариф на тысячи пользователей. Платить начинаешь, когда проект вырастет, — и к тому моменту это уже приятная проблема.

Пароли или вход без пароля — что выбрать?

Если можешь — без пароля (email-код или вход через Google). Меньше паролей значит меньше утечек, меньше «забыл пароль» и выше доля тех, кто дошёл до конца регистрации. Пароль добавляй, только если этого прямо требует твоя аудитория.