Интеграция Supabase Auth для аутентификации на сайте

На одном из проектов — SaaS-платформа для управления задачами — команда потратила две недели на интеграцию OAuth (социальная аутентификация Google и Apple), но столкнулась с проблемами синхронизации профилей и утечкой данных из-за некорректных RLS-политик. После внедрения Supabase Auth время разработки сократилось на 60%, а количество ошибок авторизации упало до нуля. Мы часто видим, как аутентификация становится узким местом: переписывание кода под каждого провайдера, латание дыр в JWT-верификации, ручная синхронизация профилей. Supabase Auth решает эти проблемы сразу, убирая до 70% boilerplate-кода.

Supabase Auth — компонент платформы Supabase, построенный поверх GoTrue. Хранит пользователей в таблице auth.users PostgreSQL, генерирует JWT с настраиваемыми claims и поддерживает магические ссылки, OTP, OAuth и SAML. Row Level Security (RLS) интегрируется напрямую — политики таблиц используют auth.uid(). Благодаря встроенной поддержке PKCE и автоматической проверке токенов, Supabase Auth обеспечивает высокий уровень безопасности без дополнительных усилий. По данным документации Supabase, PKCE включён по умолчанию для всех OAuth-потоков.

Как настроить Supabase Auth для сайта?

1. Установка пакета: npm install @supabase/supabase-js @supabase/ssr. Инициализируйте клиент с anon key и service role key (последний — только на сервере).
2. Настройка провайдеров: В Supabase Dashboard активируйте email + OAuth (Google, GitHub). Для email OTP укажите SMTP-сервер (Resend, Postmark или встроенный).
3. Реализация входа: Используйте supabase.auth.signInWithOAuth({ provider: 'google' }) и supabase.auth.signInWithOtp({ email }).
4. RLS-политики: Создайте политики, ограничивающие доступ к строкам по auth.uid().
5. Серверная верификация: На Next.js используйте createServerClient из @supabase/ssr для проверки JWT и получения пользователя.
6. Синхронизация профилей: Создайте триггер on auth.users insert → public.profiles insert.
7. Redirect URLs и PKCE: Настройте разрешённые URL в Dashboard; PKCE включён по умолчанию.

Что такое PKCE и как он повышает безопасность?

PKCE (Proof Key for Code Exchange) — расширение протокола OAuth, предотвращающее перехват authorization code в публичных клиентах (SPA, мобильные приложения). Вместо хранения client_secret приложение генерирует уникальный code_verifier и code_challenge. Supabase Auth включает PKCE по умолчанию для всех OAuth-потоков, что повышает защиту от атак типа "перехват кода".

Почему RLS удобнее отдельного API?

-- Пользователь видит только свои записи
CREATE POLICY "own_data" ON orders
  FOR SELECT USING (auth.uid() = user_id);

С RLS не нужен отдельный API-слой для базовых CRUD — база сама фильтрует данные. Это сокращает объём кода в два-три раза и ускоряет разработку. Политики выполняются на уровне PostgreSQL, исключая N+1 запросы при проверке прав. Инвестиция в настройку RLS окупается за счёт снижения затрат на инфраструктуру и времени на отладку.

CREATE POLICY "tenant_isolation" ON projects
  FOR ALL USING (tenant_id = auth.jwt() ->> 'tenant_id');

Сравнение провайдеров аутентификации

Типичные проблемы и их решение

Дополнительная распространённая ошибка — неправильная настройка refresh token. В Supabase Auth refresh токены автоматически вращаются, но требуется корректное сохранение сессии на клиенте. Используйте @supabase/ssr для серверных сред, чтобы избежать потери сессии при рефреше.

Что входит в работу

• Исходный код интеграции (клиентская и серверная части)
• Документация по RLS-политикам и триггерам
• Инструкция по деплою и настройке переменных окружения
• Обучение команды (1–2 часа онлайн)
• Поддержка в течение 30 дней после сдачи

Процесс работы под ключ

1. Аналитика: Разбираем требования: email только или соцсети, нужна ли мультитенантность, какие RLS-правила.
2. Проектирование: Схема таблиц, политики RLS, триггеры синхронизации.
3. Реализация: Код на клиенте (signInWithOAuth) и сервере (верификация JWT, createServerClient).
4. Тестирование: Проверяем сценарии: регистрация, вход, восстановление пароля, истечение сессии.
5. Деплой: Настройка редиректов, переменных окружения, мониторинг.

Сроки: Email + OAuth (Google) + базовые RLS-политики — 1–2 рабочих дня. Сложные сценарии с мультитенантностью и кастомными SAML-провайдерами — 3–4 дня.

Наша команда имеет пятилетний опыт работы с Supabase и выполнила более 50 интеграций Auth для проектов разного масштаба. Мы гарантируем безопасную верификацию JWT и корректную работу RLS. Свяжитесь с нами, чтобы быстро и безопасно внедрить аутентификацию — оценим ваш проект за один день.

Аутентификация и авторизация: OAuth, JWT, сессии, RBAC, 2FA

На одном проекте токен JWT с ролью admin: false мог быть изменён клиентом на admin: true — сервер принимал его без верификации подписи. Это не гипотетическая атака: несколько файлов в npm-экосистеме имели уязвимость jwt библиотеки, которая игнорировала алгоритм none. Последствия — полный доступ к административным функциям для любого зарегистрированного пользователя.

JWT: что реально нужно знать

JWT состоит из трёх частей: header (алгоритм), payload (данные), signature (подпись). Подпись верифицирует, что payload не изменён. Без проверки подписи — это просто base64-encoded JSON, который любой может подделать.

Ошибки, которые видим в коде регулярно:

Хранение в localStorage. localStorage доступен любому JS на странице — XSS атака читает токен и отправляет на сервер злоумышленника. Access token в памяти (переменная модуля), refresh token в httpOnly cookie — правильная схема.

Долгоживущие access-токены. Access token на 7 дней без возможности отзыва. Утёк — 7 дней доступа. Стандарт: 15 минут для access token, 30 дней для refresh token с ротацией. При каждом использовании refresh token выдаётся новый, старый инвалидируется — если старый кто-то использует повторно, это детектируется как Token Reuse Attack, вся семья токенов отзывается.

Хранение секретных данных в payload. JWT payload не зашифрован, только подписан — его видно в base64. Пароли, платёжные данные, личная информация — не в JWT.

Алгоритм RS256 (асимметричный) предпочтительнее HS256 (симметричный) в микросервисной архитектуре: сервисы могут верифицировать токен публичным ключом, не имея доступа к секрету для его создания.

OAuth 2.0 и OpenID Connect

OAuth 2.0 — протокол делегированной авторизации, не аутентификации. «Войти через Google» — это OpenID Connect поверх OAuth 2.0, который добавляет id_token с данными пользователя.

Authorization Code Flow с PKCE — единственный правильный flow для браузерных SPA и мобильных приложений. Implicit Flow устарел и небезопасен. PKCE (Proof Key for Code Exchange) защищает от перехвата authorization code.

Реализация OAuth сервера: не пишем с нуля. Keycloak (open source, self-hosted), Auth0, Okta — готовые решения. Laravel Passport или Laravel Sanctum для серверных приложений. NextAuth.js для Next.js — поддерживает 50+ провайдеров из коробки.

Для B2B продуктов с корпоративными клиентами — SAML 2.0 SSO. Корпоративные IT-отделы часто требуют его вместо OAuth. @boxyhq/saml-jackson — node.js библиотека для SAML → OAuth2 адаптера.

Сессии vs токены

Сессии хранят состояние на сервере (Redis, database) — сервер может мгновенно отозвать сессию. При масштабировании на несколько инстансов нужен общий store (Redis Cluster). Cookie с session ID — httpOnly, Secure, SameSite=Strict.

Stateless JWT не требуют server-side storage, масштабируются горизонтально. Но отзыв токена до истечения срока — только через blacklist (Redis), что частично убирает преимущество stateless.

Для большинства веб-приложений сессии проще и безопаснее. JWT имеет смысл для API, потребляемых из мобильного приложения, и для микросервисной архитектуры.

RBAC и политики доступа

Role-Based Access Control — у пользователя есть роли, у ролей — права. Простая реализация: user → roles → permissions. Но как только появляется ресурсная авторизация («пользователь может редактировать только свои посты»), RBAC усложняется.

Spatie Laravel Permission — стандарт для Laravel: полиморфные роли и права, кэширование, super-admin через gate. Интеграция с Eloquent: $user->can('edit posts'), $user->hasRole('editor').

ABAC (Attribute-Based Access Control) — политики на основе атрибутов: пользователя, ресурса, окружения. Нужен когда правила доступа сложные: «менеджер может просматривать заказы своего региона, если заказ создан более 24 часов назад». Casbin — популярная cross-language библиотека для ABAC.

ReBAC (Relationship-Based Access Control) — Google Zanzibar model. Доступ определяется графом отношений: «пользователь X является участником команды Y, которая имеет доступ к проекту Z». OpenFGA — open source реализация от Okta.

Двухфакторная аутентификация

TOTP (Time-based One-Time Password, Google Authenticator, Authy) — стандарт. Библиотеки: otplib (Node.js), pragmarx/google2fa (Laravel). QR-код при подключении — base32-encoded secret, которого достаточно для воспроизведения кода при компрометации. Хранить secret в зашифрованном виде.

SMS-верификация — слабее TOTP из-за SIM-swapping атак и ненадёжности доставки SMS. Но пользователи активируют её охотнее. Email OTP — компромисс между безопасностью и UX.

WebAuthn (Passkeys) — биометрия или аппаратный ключ вместо пароля. Хранится private key на устройстве, публичный — на сервере. Нет пароля — нет его утечки. iOS 16+, Android 9+, все современные браузеры поддерживают. @simplewebauthn/server + @simplewebauthn/browser — хорошая библиотека для Node.js реализации.

Backup-коды при подключении 2FA: 10 одноразовых кодов для восстановления доступа если телефон потерян. Хранить хешированными (bcrypt), показывать только один раз при генерации.

Типичные уязвимости

Broken Object Level Authorization (BOLA/IDOR): /api/orders/12345 возвращает заказ без проверки, принадлежит ли он текущему пользователю. Самая распространённая уязвимость API по OWASP. Каждый запрос к ресурсу — проверка через $user->can('view', $order).

Mass Assignment: User::create($request->all()) — пользователь передаёт is_admin: true в теле запроса. Laravel решает через $fillable / $guarded, но часто забывают.

Небезопасный CORS: Access-Control-Allow-Origin: * на API с авторизацией по cookie — credentials не передаются с wildcard origin, но если кто-то сделал Allow-Credentials: true + Allow-Origin: * — это дыра.

Процесс работы

Архитектура авторизации проектируется до начала разработки, не добавляется потом. Выбор между сессиями и JWT, структура ролей и прав, flow для OAuth-провайдеров, план для 2FA. Penetration testing обязателен для продуктов с финансовыми данными или персональными данными пользователей.

Сроки

Базовая аутентификация (email/password + OAuth + JWT/сессии): 1–3 недели. RBAC с детальными политиками доступа: 2–4 недели. 2FA (TOTP + SMS): 1–2 недели. WebAuthn/Passkeys: 2–3 недели. Полная система аутентификации для SaaS с multi-tenancy: 4–8 недель.