Supabase Magic Link Authentication in FlutterFlow

Supabase Magic Link Authentication in FlutterFlow - Full Walkthrough

Суть за 30 секунд

Magic Link — это беспарольный способ аутентификации, при котором пользователь получает одноразовую ссылку для входа на свой email. Видео содержит пошаговое руководство по настройке этого процесса: от конфигурации Supabase (SMTP и шаблоны писем) до написания Custom Action в FlutterFlow для реализации логики входа и настройки Deep Linking (URL Schemes) для корректного возврата пользователя в мобильное приложение.

📍 Навигация (Timeline)

• 00:00 — Введение: Что такое Magic Link и как выглядит жизненный цикл входа пользователя (Email → Sign in → Inbox → Link → App).
• 01:06 — Обзор стартового проекта: Настройка страниц входа (Sign In) и домашней страницы (Home) во FlutterFlow.
• 01:14 — Настройки Supabase API: Получение URL проекта и API-ключа (Anon Key) для интеграции.
• 01:29 — Интеграция во FlutterFlow: Включение Supabase и подключение схемы данных.
• 02:42 — Custom Action (Low-code): Написание функции signInWithMagicLink для обхода ограничений стандартных действий FlutterFlow.
• 04:13 — Настройка интерфейса: Привязка Custom Action к кнопке “Sign In” и валидация формы.
• 04:54 — Deep Linking & URL Schemes: Критически важный этап настройки схемы URL для того, чтобы ссылка из письма открывала именно ваше приложение.
• 05:46 — Параметры аутентификации: Настройка страниц входа и перенаправления (Entry page & Logged in page) в настройках FlutterFlow.
• 06:23 — Redirect URLs в Supabase: Добавление разрешенных путей (White List) в панели управления Supabase Auth.
• 07:10 — Email Provider & Templates: Настройка SMTP и кастомизация текста письма с магической ссылкой.
• 07:41 — Финальный код: Обновление параметра emailRedirectTo в Custom Action для корректного роутинга.
• 13:00 — Тестирование: Проверка всей цепочки действий на реальном устройстве или эмуляторе.

🧠 Ключевые концепции (Wiki-связи)

• Инструменты: FlutterFlow, Supabase, Supabase Auth.
• Методы: Magic Link Authentication, Deep Linking, Passwordless Login.
• Технологии: URL Schemes, Custom Actions, SMTP Configuration.

🛠 Практические фишки

• URL Scheme: Проверка уникальности схемы URL в настройках приложения для избежания конфликтов.
• Whitelist Redirects: Добавление всех разрешенных путей (базовый адрес + страницы) в список Redirect URLs в Supabase.
• shouldCreateUser: Настройка параметра в функции signInWithOTP для контроля регистрации новых пользователей.
• Mobile First: Обязательное тестирование переходов из почтовых приложений на реальных мобильных устройствах.

📌 Резюме

Вход по магической ссылке — это отличная альтернатива традиционным паролям, которая значительно улучшает пользовательский опыт и безопасность. Несмотря на то, что во FlutterFlow на момент записи видео нет встроенного действия для Magic Link, реализация через Custom Action дает полный контроль над процессом и позволяет легко интеграцию Supabase Auth в любой проект.