Master Forgot and Reset Password in FlutterFlow and Supabase (2025)

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

Видео-гайд по реализации системы восстановления пароля в связке FlutterFlow + Supabase 2.0. Рассматриваются критические аспекты: настройка кастомного SMTP через Resend, конфигурация Deep Linking для корректного перехода из письма в приложение, создание кастомных действий (Custom Actions) на Dart и правильная настройка шаблонов писем в Supabase для работы с токенами безопасности.

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

• 00:00 — Введение: Обзор изменений в Supabase 2.0 и демонстрация функционала восстановления пароля.
• 01:31 — Предварительные условия: Шаблон FlutterFlow, настройка кастомного SMTP (Resend) и проект Supabase.
• 03:31 — Почему отдельный проект?: Преимущества переиспользуемого шаблона для разных платформ (Web, iOS, Android).
• 04:41 — Custom Actions: Разбор кода функций sendRecoveryEmail и updatePassword.
• 07:56 — Реализация Forgot Password: Настройка Action Flow для отправки письма с ссылкой на восстановление.
• 08:35 — Web Deployment: Получение Site URL для корректного редиректа.
• 09:56 — Настройка Supabase: Конфигурация Redirect URLs в панели управления Supabase (Site URL + Reset Route).
• 12:56 — Реализация Reset Password: Создание формы ввода нового пароля и вызов Custom Action для обновления.
• 14:13 — Success Page: Перенаправление пользователя после успешной смены пароля.
• 15:05 — Email Templates: Тонкая настройка шаблона письма в Supabase (структура ссылки с токеном).
• 17:11 — Deep Linking: Особенности работы ссылок в мобильных приложениях и URL Schemes.
• 20:21 — Тестирование: Полный цикл проверки от запроса до входа с новым паролем.
• 21:42 — Устранение ошибок: Решение проблемы с ошибкой 400 (истекшая сессия) и советы по безопасности.

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

• Инструменты: FlutterFlow, Supabase, Resend (SMTP).
• Методы: Authentication, Deep Linking, Action Flow.
• Технологии: Dart, Custom Actions, SMTP Configuration.

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

• Custom SMTP: Всегда настраивайте внешний SMTP (например, Resend), так как стандартные лимиты Supabase очень жесткие и письма часто попадают в спам.
• Deep Linking: Для мобильных приложений критично настроить URL Scheme в FlutterFlow, чтобы ссылка из письма открывала именно приложение, а не браузер.
• Site URL: При развертывании на вебе убедитесь, что Site URL в настройках FlutterFlow совпадает с Redirect URL в Auth-настройках Supabase.
• Redirect URL: Всегда добавляйте конкретный путь к странице сброса (например, /resetPassword) к базовому URL, чтобы пользователь попадал на нужный экран.
• Token Hash: В шаблоне письма Supabase используйте {{ .TokenHash }} для безопасной передачи токена восстановления.
• Security: Помните, что ссылки для восстановления пароля одноразовые и имеют ограниченный срок жизни (вызывают ошибку 400 при повторном использовании).

📌 Резюме

Реализация Forgot/Reset Password в Supabase 2.0 стала более гибкой, но требует точной настройки Deep Linking и Redirect URLs. Использование Custom Actions позволяет полностью контролировать UI процесса, делая его бесшовным для пользователя как на вебе, так и в мобильных приложениях.