Настройка Supabase для веб-приложения: аутентификация, RLS, Realtime

Настройка Supabase для веб-приложения

При сборке веб-приложения часто упираешься в необходимость быстро поднять backend с аутентификацией, базой данных и realtime-уведомлениями. Supabase — open-source платформа на базе PostgreSQL, которая закрывает эти потребности одной экосистемой. Мы настроили Supabase для десятков проектов: от стартап-MVP до highload-сервисов с миллионами запросов. В этой статье разберём реальную конфигурацию: схема, RLS, Edge Functions и интеграция с React/Next.js. Расскажем, как избежать типичных ошибок: дублирование политик RLS, неоптимальные запросы, проблемы с горячим перезапуском Edge Functions. И покажем, как мы настраивали Supabase для одного из проектов — сервиса ленты новостей с realtime-обновлениями.

Почему Supabase лучше Firebase?

Supabase даёт полный контроль: вы можете развернуть его на своих серверах или использовать облачную версию. Это критично для проектов с требованиями к data residency.

Создание проекта

Через dashboard.supabase.com — выбрать регион, задать пароль базы. Для self-hosted:

git clone --depth 1 https://github.com/supabase/supabase
cd supabase/docker
cp .env.example .env
# Отредактировать .env: POSTGRES_PASSWORD, JWT_SECRET, ANON_KEY, SERVICE_ROLE_KEY
docker compose up -d

Подключение клиента и генерация типов

import { createClient } from '@supabase/supabase-js'
import type { Database } from './database.types'

export const supabase = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

// Для серверных операций — service role key
export const supabaseAdmin = createClient<Database>(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
)

Выполните npx supabase gen types typescript --project-id your-project-id > src/types/database.types.ts для автодополнения и проверки типов.

Схема и Row Level Security

-- Таблица профилей (расширение auth.users)
CREATE TABLE profiles (
    id uuid PRIMARY KEY REFERENCES auth.users ON DELETE CASCADE,
    username text UNIQUE,
    avatar_url text,
    bio text,
    updated_at timestamptz DEFAULT now()
);

-- RLS — каждый видит только своё
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
CREATE POLICY "profiles_select_own" ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "profiles_update_own" ON profiles FOR UPDATE USING (auth.uid() = id);

-- Публичные профили — читают все
CREATE POLICY "profiles_select_public" ON profiles FOR SELECT USING (true);

-- Таблица постов с RLS
CREATE TABLE posts (
    id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id uuid REFERENCES auth.users NOT NULL,
    title text NOT NULL,
    content text,
    is_public boolean DEFAULT false,
    created_at timestamptz DEFAULT now()
);
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;
CREATE POLICY "posts_select_public_or_own" ON posts FOR SELECT USING (
    is_public = true OR auth.uid() = user_id
);
CREATE POLICY "posts_insert_own" ON posts FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "posts_update_own" ON posts FOR UPDATE USING (auth.uid() = user_id);
CREATE POLICY "posts_delete_own" ON posts FOR DELETE USING (auth.uid() = user_id);

Как настроить аутентификацию и CRUD-операции

// Регистрация
const { data, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'password',
  options: {
    data: {
      username: 'john_doe'
    }
  }
})

// OAuth (Google, GitHub, etc.)
await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: `${window.location.origin}/auth/callback`
  }
})

// Вставка с возвратом
const { data: post, error } = await supabase
  .from('posts')
  .insert({ title, content, user_id: user.id })
  .select()
  .single()

// Запрос с фильтрами и JOIN
const { data: posts } = await supabase
  .from('posts')
  .select(`
    id,
    title,
    created_at,
    profiles (
      username,
      avatar_url
    ),
    tags (
      name
    )
  `)
  .eq('is_public', true)
  .order('created_at', { ascending: false })
  .range(0, 23)

// Полнотекстовый поиск (PostgreSQL tsquery)
const { data } = await supabase
  .from('posts')
  .select('*')
  .textSearch('content', query, { config: 'russian', type: 'websearch' })

Как настроить Realtime-подписки и Edge Functions

// Подписка на новые записи
const channel = supabase
  .channel('posts-feed')
  .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'posts', filter: 'is_public=eq.true' }, (payload) => {
    setPosts(prev => [payload.new as Post, ...prev])
  })
  .subscribe()

// Edge Function: send-notification
import { serve } from 'https://deno.land/[email protected]/http/server.ts'
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'

serve(async (req) => {
  const { userId, message } = await req.json()
  const supabase = createClient(
    Deno.env.get('SUPABASE_URL')!,
    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
  )
  await supabase
    .from('notifications')
    .insert({ user_id: userId, message })
  return new Response(JSON.stringify({ ok: true }), {
    headers: { 'Content-Type': 'application/json' }
  })
})

Типичные ошибки при настройке Supabase

1. Дублирование политик RLS. Часто разработчики создают несколько политик на одну таблицу, что приводит к неопределённому поведению. Достаточно одной политики на операцию с правильными условиями.
2. Неоптимальные индексы. Без индексов запросы с фильтрацией по user_id или is_public могут выполняться в десятки раз медленнее. Добавляйте индексы на часто используемые столбцы.
3. Игнорирование подключений к бд. В Serverless-среде каждое создание нового клиента Supabase устанавливает новое соединение. Используйте пул соединений или клиентский синглтон.

Как мы настраиваем Supabase: пошаговый процесс

1. Анализ и проектирование схемы — обсуждаем требования, проектируем таблицы, индексы, связи.
2. Настройка аутентификации — подключаем провайдеров OAuth, создаём политики RLS.
3. Интеграция с фронтендом — настраиваем клиентский SDK, генерируем TypeScript-типы.
4. Деплой и мониторинг — разворачиваем в облаке или self-hosted, настраиваем бэкапы.

На каждом этапе документируем принятые решения — это помогает поддерживать проект в будущем.

Что входит в настройку под ключ

• Спроектированная схема базы данных с индексами и миграциями.
• Готовые RLS-политики для защиты данных.
• Интеграция аутентификации (email/пароль, OAuth, Magic Link).
• Клиентский код с TypeScript-типами (React, Vue, Next.js).
• Realtime-подписки и Edge Functions под ваши сценарии.
• Документация по API и доступам.
• Обучение команды работе с Supabase.
• Гарантия на настройку — 30 дней бесплатной поддержки.

Ориентировочные сроки

Также можем добавить Edge Functions и realtime — ещё 2–3 дня. Полный цикл занимает от 5 до 10 рабочих дней в зависимости от сложности.

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

Почему RLS так важен для безопасности?

Row Level Security (RLS) — это не просто галка в настройках. Без RLS любой аутентифицированный пользователь может читать или изменять данные других пользователей, если нет ограничений на уровне API. Например, в проекте ленты новостей мы ввели политику, разрешающую SELECT только для публичных постов или собственных записей. Это предотвратило утечку приватных данных. «После внедрения Supabase время разработки MVP сократилось на 40%» — Иван Петров, CTO стартапа.

Что такое Realtime-подписки и как они работают?

Realtime-подписки используют механизм PostgreSQL LISTEN/NOTIFY через WebSocket-соединение. При вставке, обновлении или удалении записи Supabase отправляет событие всем подписанным клиентам. Это особенно полезно для чатов, лент новостей и совместной работы. Настройка занимает минуту: включите Realtime для нужных таблиц в дашборде и используйте SDK.