🔄 Сброс пароля в Supabase

Реализация функционала “Забыли пароль?” требует использования кастомных действий (Custom Actions) во FlutterFlow для взаимодействия с Auth API Supabase.

🟢 Слой 1: Логика и Алгоритм

Во FlutterFlow стандартный механизм сброса пароля Firebase работает “из коробки”, но для Supabase процесс делится на два этапа:

  1. Запрос сброса: Пользователь вводит Email. Вызывается Custom Action sendRecoveryEmail.
  2. Redirect URL: В Supabase Auth настройте Redirect URL на страницу вашего приложения (например, /passreset). Пользователь получает письмо, кликает по ссылке и попадает на эту страницу.
  3. Обновление: На странице /passreset пользователь вводит новый пароль. Вызывается Custom Action updatePassword.

Настройка Redirect

Если вы не укажете правильный Redirect URL в консоли Supabase, пользователь после клика в письме попадет на главную страницу или получит ошибку, и сессия восстановления не будет активна.


🛠 Слой 2: Техническая реализация (Custom Actions)

1. Отправка письма (sendRecoveryEmail)

  • Аргументы: email (String), redirectTo (String).
import 'package02_supabase_flutter/supabase_flutter.dart';
 
Future<String?> sendRecoveryEmail(String email, String? redirectTo) async {
  final supabase = SupaFlow.client;
  try {
    await supabase.auth.resetPasswordForEmail(email, redirectTo: redirectTo);
    return null;
  } catch (e) {
    return e.toString();
  }
}

2. Обновление пароля (updatePassword)

  • Аргументы: newPassword (String), confirmNewPassword (String).
import 'package:supabase_flutter/supabase_flutter.dart';
 
Future<String?> updatePassword(String newPassword, String confirmNewPassword) async {
  final supabase = SupaFlow.client;
 
  if (newPassword != confirmNewPassword) {
    return "Passwords do not match!";
  }
  try {
    await supabase.auth.updateUser(UserAttributes(password: newPassword));
    return null;
  } catch (e) {
    return e.toString();
  }
}

📧 Шаблон письма в Supabase Dashboard

Чтобы кнопка в письме была красивой и вела куда нужно, настройте шаблон (Authentication Email Templates Reset Password).

Пример HTML-шаблона:

<h2>Сброс пароля</h2>
<p>Вы запросили сброс пароля для вашего аккаунта.</p>
<a
  href="{{ .ConfirmationURL }}&redirect_to=https://baonline.ru/passreset"
  style="background: #2f40fb; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;"
>
  Сбросить пароль
</a>

📚 Слой 3: Источники и Best Practices

Архитектурный совет (Безопасность):

Для максимальной защиты рекомендуется использовать промежуточный бэкенд (Edge Functions) для генерации одноразовых кодов, чтобы избежать манипуляций на фронтенде.


Смотрите также: Лучшие практики безопасности