Реалізація Supabase в мобільному додатку
Ви інтегруєте сторонні сервіси в мобільний додаток, і раптом усвідомлюєте: Firebase — це vendor lock-in з пропрієтарною NoSQL-базою. Перехід на Supabase дає повноцінний PostgreSQL з SQL, реляційними зв'язками та Row Level Security. Але без правильного налаштування ви ризикуєте: сесії втрачаються в фоні, Realtime не приходить, а анонімний ключ відкриває доступ до даних. Помилки в конфігурації можуть коштувати до 40% часу на налагодження на production. Ми реалізуємо інтеграцію Supabase під ключ за 3–5 тижнів. Оцінимо ваш проект безкоштовно — просто напишіть нам. За 5 років роботи ми виконали 20+ проектів з Supabase, включаючи високонавантажені додатки для iOS та Android. Гарантуємо відповідність App Store Review Guidelines (Section 5.1) та Google Play Store політикам.
Чому Supabase краще Firebase для мобільних додатків?
| Критерій | Supabase | Firebase |
|---|---|---|
| Тип БД | PostgreSQL (реляційна) | NoSQL (Firestore) |
| SQL | Повноцінний SQL | Обмежені запити |
| Self-hosted | Так (open-source) | Ні |
| Realtime | WebSocket (Phoenix Channels) | Firestore realtime |
| Ціна | Безкоштовний tier + PAYG | Безкоштовний tier + PAYG |
| Lock-in | Ні | Високий |
Supabase виграє при роботі з реляційними даними: зовнішні ключі, JOIN, транзакції. Для додатків з аналітикою, фінансами або складними звітами Supabase в 2–3 рази дешевше Firebase за витратами на запити. Крім того, PostgreSQL — зріла СУБД з 30+ роками розвитку, що забезпечує передбачувану продуктивність.
Ініціалізація в React Native
import { createClient } from '@supabase/supabase-js'; import AsyncStorage from '@react-native-async-storage/async-storage'; import 'react-native-url-polyfill/auto'; // обов'язково для RN export const supabase = createClient( process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, { auth: { storage: AsyncStorage, autoRefreshToken: true, persistSession: true, detectSessionInUrl: false, }, } ); react-native-url-polyfill — обов'язковий: Supabase використовує URL API, якого немає в Hermes/JSC без поліфіла. Без нього — тиха помилка при першому запиті.
Як захистити дані на клієнті за допомогою RLS?
Row Level Security — політики доступу на рівні PostgreSQL. Навіть якщо клієнт має anon key — без відповідної політики дані недоступні. Важливо: RLS працює на рівні сервера, не обходиться при прямому SQL-запиті. Це принципово для mobile, де anon key знаходиться в коді додатку і може бути вилучений reverse engineering'ом. PostgreSQL RLS Documentation
-- Вмикаємо RLS для таблиці ALTER TABLE posts ENABLE ROW LEVEL SECURITY; -- Користувач бачить лише свої пости CREATE POLICY "user_can_read_own_posts" ON posts FOR SELECT USING (auth.uid() = user_id); -- Користувач створює лише свої пости CREATE POLICY "user_can_insert_own_posts" ON posts FOR INSERT WITH CHECK (auth.uid() = user_id); Аутентифікація та AppState
Supabase GoTrue рефрешить JWT автоматично. Але на iOS при тривалому перебуванні в фоні refresh-запит може не виконатися. При поверненні в foreground потрібно явно перевірити сесію:
useEffect(() => { const subscription = AppState.addEventListener('change', async (nextState) => { if (nextState === 'active') { await supabase.auth.getSession(); } }); const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => { if (event === 'TOKEN_REFRESHED') { updateGlobalSession(session); } if (event === 'SIGNED_OUT') { clearLocalData(); navigateToLogin(); } }); return () => { subscription.remove(); authListener.subscription.unsubscribe(); }; }, []); Завантаження файлів у Storage
import * as FileSystem from 'expo-file-system'; const uploadFile = async (localUri: string, path: string) => { const base64 = await FileSystem.readAsStringAsync(localUri, { encoding: FileSystem.EncodingType.Base64, }); const { data, error } = await supabase.storage .from('avatars') .upload(path, decode(base64), { contentType: 'image/jpeg', upsert: true, }); if (error) throw error; const { data: { publicUrl } } = supabase.storage .from('avatars') .getPublicUrl(path); return publicUrl; }; decode з пакету base64-arraybuffer. Supabase Storage приймає ArrayBuffer, не рядок. На великих файлах використовуйте FormData з fetch напряму — base64 збільшує розмір на 33%.
Що важливо знати про продуктивність Supabase на мобільних пристроях?
Realtime-підписки через WebSocket споживають трафік і батарею. На Android при згорнутому додатку WebSocket може відключитися — використовуйте FCM для «товстих» сповіщень. Оптимальна стратегія: підписуватися лише на активні екрани, відписуватися при переході в фон. Це знижує навантаження на 50%.
Платформенні клієнти: supabase-swift та supabase-kt
Для нативних додатків Supabase пропонує офіційні SDK. На iOS використовуємо supabase-swift (SwiftUI + Combine), на Android — supabase-kt (Kotlin Coroutines). Обидва підтримують всі функції: Auth, Realtime, Storage, RLS. У React Native та Flutter застосовуємо supabase-js.
Типові задачі інтеграції та оцінка часу
| Задача | Середній час |
|---|---|
| Налаштування Auth (email + OAuth) | 3–5 днів |
| Проектування RLS політик | 2–4 дні |
| Інтеграція Realtime | 2–3 дні |
| Налаштування Storage з bucket-правилами | 1–2 дні |
| Міграція даних з Firebase | 5–7 днів |
Часті помилки при інтеграції Supabase
- Не вмикати RLS на таблицях. Анонімний ключ отримує повний доступ. Завжди явно вмикайте RLS після створення таблиці.
- Зберігати сесію в непостійному сховищі. При згортанні додатку токен втрачається. Використовуйте AsyncStorage (React Native) або UserDefaults (native).
- Ігнорувати
react-native-url-polyfill. Призводить до помилки при першому запиті. Встановіть пакет та імпортуйте в корені. - Не обробляти AppState. На iOS сесія може не оновитися після довгого фону. Додайте обробник foreground.
Що входить у роботу
- Аудит поточної архітектури та схеми БД
- Проектування політик RLS та міграцій
- Налаштування Auth (email, OAuth, magic link) з обробкою AppState
- Інтеграція Realtime підписок для миттєвих оновлень
- Конфігурація Storage з bucket-політиками
- Написання TypeScript-типів зі схеми БД (supabase gen types)
- Збірка та публікація в TestFlight / Google Play Console
- Документація з розгортання та експлуатації
Процес роботи
- Аналітика — рев'ю вашого коду, схеми даних, вимог
- Проектування — RLS політики, індекси, реплікація
- Реалізація — інтеграція SDK, міграції, тести
- Тестування — навантажувальне тестування, перевірка безпеки
- Деплой — налаштування CI/CD, моніторинг у Supabase Dashboard
Терміни та вартість
Орієнтовні терміни: від 3 до 7 тижнів залежно від складності. Конкретна вартість розраховується індивідуально після аудиту. Отримайте консультацію з інтеграції Supabase — зв'яжіться з нами, і ми проведемо безкоштовний аудит вашої архітектури.