Шаблоны Supabase Auth: подтверждение регистрации и сброс пароля

Письмо подтверждения регистрации и письмо сброса пароля должны узнаваемо представлять ваш продукт и ясно объяснять следующее действие. Их визуальный макет можно подготовить в Mailvex, а HTML перенести в шаблоны Supabase Auth. При этом Supabase продолжает формировать ссылки и отправлять сообщения; задача дизайна — сохранить уже работающий сценарий входа.

Ниже вы последовательно обновите два отдельных шаблона: Confirm sign up и Reset password. Сначала проверьте подтверждение регистрации, затем восстановление доступа. Инструкция основана на документации и проверке исходного кода от 24 октября 2026 года; мы не выполняли отправку из Supabase. Предлагаемые проверки нужно пройти в собственном тестовом окружении.

Для какого проекта подходит этот путь

Начните с приложения, которое использует облачный проект Supabase: подтверждение регистрации включено, восстановление пароля завершает вход, собственный SMTP настроен и отправляет сообщения. Используйте тестовый проект или staging и свои контролируемые ящики. Путь рассчитан на обычные шаблоны панели, без активного Send Email hook. Если отправкой управляет hook, его собственный рендерер требует отдельной адаптации; не отключайте его ради оформления. До изменения оформления пройдите оба сценария с текущими шаблонами и сохраните результаты проверки.

Встроенный SMTP ограничен разрешёнными адресами команды и небольшими меняющимися лимитами. Локальная CLI-установка и self-hosted используют другой путь конфигурации. Если редактор доступен только для чтения, проверьте требования проекта к отправщику и ваши права; платный Pro не является универсальным условием этой инструкции. Ошибка исходного подтверждения или восстановления не исправляется заменой оформления письма.

1. Сохраните два исходных шаблона и их ссылки

В панели Supabase откройте Authentication → Email Templates. До изменений сохраните Subject и полный исходный Body отдельно для Confirm sign up и Reset password. Назовите копии по проекту, типу письма и дате. Из каждого работающего исходника скопируйте точное выражение href основной ссылки. Не берите адрес из полученного письма: это уже действующая одноразовая ссылка конкретного получателя.

Готовая замена ниже подходит, если каждый соответствующий исходный шаблон использует {{ .ConfirmationURL }}. Supabase подставляет действие своего типа письма. Если у вас собственный callback SSR/PKCE, маршрут с .TokenHash, OTP через {{ .Token }} или условная Go-разметка, сохраняйте существующие выражения и логику с разработчиком. Не заменяйте их стандартной ссылкой и не собирайте адрес /auth/v1/verify вручную.

2. Подготовьте два понятных варианта дизайна

Создайте в Mailvex собственное письмо из простого одноколоночного шаблона. Нужны подтверждённый email аккаунта и доступная квота экспорта. Оставьте логотип, ясный заголовок, короткое объяснение и одну основную кнопку. Изображение необязательно: смысл и действие должны оставаться понятными при отключённой загрузке картинок.

Для действия используйте встроенный блок «Кнопка по центру». В разделе «Видимость» выключите «Скрыть на мобильных» и «Скрыть на десктопе» у кнопки и её родительских блоков. Это относится к штатному блоку, а не к произвольной кнопке из импортированного HTML.

Замените общее название своим продуктом и согласуйте формулировки с реальным поведением приложения. Для сброса создайте отдельный проект в том же стиле, чтобы последующие изменения не перепутали два сообщения. Пароль вводится только в приложении, не в письме. Тему вы отдельно зададите в Subject Supabase: заголовок и прехедер Mailvex не изменяют её автоматически.

3. Подготовьте чистую ссылку и экспорт

В каждом проекте удалите примерные переменные и ненужные ESP-условия. Для условного блока справа откройте «Условие показа (ESP)» и выключите «Показывать по условию». Проверка видимости в предпросмотре не удаляет условие. Не путайте эти настройки редактора с существующей Go-логикой вашего Supabase-шаблона.

Слева откройте «Настройки» → «UTM-метки» и выключите «Добавлять UTM ко всем ссылкам». После этого заново задайте кнопке точный временный адрес ниже, без параметров, фрагмента и лишних пробелов. Выключение UTM не очищает параметры, которые уже были записаны в ссылку:

https://example.invalid/MAILVEX_AUTH_ACTION

Это специально неработающий адрес в зарезервированном домене. Он нужен только основной auth-кнопке и не должен попасть в опубликованный шаблон. Не используйте его в картинках, ссылках поддержки или других местах. Не вставляйте в Mailvex настоящие ссылки подтверждения, токены или адреса из писем получателей.

Отключите в заголовочном блоке «Ссылка “Смотреть в браузере”» → «Показывать ссылку» и уберите добавленные вручную ссылки на старые веб-предпросмотры. Отдельный снимок Mailvex не получает подстановки Supabase и сохранит временный адрес. Само выключение переключателя не означает удаления или отзыва ранее созданных общих ссылок.

• Проверьте прехедер, футер, текст без изображений и узкий предпросмотр. Сохраните обязательную подпись плана, если она присутствует.
• Откройте «Экспорт HTML», оставьте «Формат переменных (ESP)» равным mailvex и выполните только «Скопировать HTML». Профиль не подключает Supabase и не создаёт auth-данные.
• Сохраните скопированный полный исходник в текстовый .html-файл и сделайте отдельную рабочую копию для адаптации. Дополнительное скачивание не требуется.
• Повторите для второго варианта. Это два отдельных экспорта; проверьте доступную квоту и сохраните оба визуальных проекта.

Изображения должны открываться по публичным URL без входа в Mailvex. Режим размещённых изображений сохраняет ссылки; режим «Свои» требует самостоятельно загрузить файлы на соответствующий сервер. Ввод базового адреса не выполняет загрузку. Экспорт не делает все картинки вложениями и не гарантирует их бессрочную доступность.

4. Замените только временный auth-адрес

Откройте рабочую копию HTML в текстовом редакторе, который не меняет кавычки и не показывает документ как форматированный текст. Переносится полный HTML: разделять тело и CSS здесь не нужно. Для уже работающего стандартного сценария найдите точный полный временный URL и замените все его вхождения следующим выражением:

{{ .ConfirmationURL }}

Итоговый атрибут ссылки в исходном коде должен выглядеть так:

href="{{ .ConfirmationURL }}"

Заменяйте все вхождения уникального временного адреса, а не все href документа. Одна видимая кнопка может иметь обычную ссылку и дополнительный адрес в Outlook/VML-разметке. Число совпадений зависит от дизайна; нельзя универсально требовать ровно два. Ссылки поддержки и изображения остаются своими.

• Поиск MAILVEX_AUTH_ACTION больше ничего не находит.
• У всех возможных вариантов основной кнопки стоит одобренное выражение из исходного шаблона.
• Нет добавленных UTM, обёртки отслеживания, лишнего суффикса или закодированных фигурных скобок.
• Текст, изображения и обычные ссылки сохранились; адаптированный файл соответствует нужному типу письма.

Проделайте проверку отдельно для регистрации и сброса. Не переносите callback одного типа в другой из-за одинакового дизайна. При обработке Go-шаблона условная VML-ветка может исчезнуть; требовать прежнего числа href после отправки не нужно. Основная HTML-ссылка должна оставаться доступной. Не удаляйте стили глобально и не переписывайте штатную кнопку вручную: проверьте её действие и внешний вид в полученном письме.

До теста отключите у SMTP-провайдера отслеживание email/click tracking, которое переписывает Auth-ссылки. Ссылка действия должна уходить без обёртки отслеживания. Это настройка отправки, а не предложение отключать защитные сканеры получателя.

5. Сначала обновите Confirm sign up и проверьте регистрацию

В нужном проекте Supabase откройте Authentication → Email Templates → Confirm sign up. Введите подготовленную тему в Subject. В Body переключитесь на source, затем замените содержимое полным адаптированным HTML регистрации и сохраните через Save changes. Предпросмотр помогает оценить макет, но не доказывает создание действительной ссылки или успешное подтверждение аккаунта.

• Через уже работающее приложение выполните новую тестовую регистрацию с подходящим собственным адресом. Для существующего неподтверждённого тестового аккаунта используйте предусмотренную приложением повторную отправку подтверждения. Приглашение запускает другой тип письма.
• Проверьте полученное сообщение: тему, текст, бренд, кнопку, поддержку и вариант с отключёнными изображениями. Посмотрите на телефоне и в нужном Outlook.
• Используйте свежую ссылку один раз и проверьте ожидаемый адрес приложения и подтверждённый статус аккаунта. Соблюдайте контекст браузера, если его требует ваш поток.
• Если подтверждение не завершается, сначала восстановите прежние Subject и Body этого шаблона и сравните поведение. Второй шаблон пока не меняйте.

Этот тест действительно отправляет email и выполняет auth-действие. Не используйте многократные переходы по старому сообщению как проверку дизайна. Для новой попытки запросите новое письмо подходящим способом в приложении. Секретные ссылки не сохраняйте в публичных скриншотах и материалах команды.

6. Затем обновите Reset password и завершите сброс

После успешной проверки регистрации откройте Reset password. Сверьтесь с его собственной резервной копией и выражением ссылки. Внесите тему сброса и соответствующий адаптированный Body, сохраните через Save changes. Одинаковый стиль можно переиспользовать; семантика действия остаётся у шаблона восстановления.

• Используйте уже существующий тестовый аккаунт, которым управляете. Запросите восстановление через штатную функцию «Забыли пароль?» вашего приложения.
• Проверьте свежее полученное письмо и действие основной ссылки. Не вставляйте в шаблон адрес из этого сообщения.
• Откройте предусмотренную приложением форму, задайте новый пароль там и проверьте последующий вход. Сам переход по ссылке ещё не является завершённым сбросом.
• Проверьте правильность темы, текста «если это не вы», мобильного вида, изображения и ссылки поддержки. Зафиксируйте результат отдельно от регистрации.

Ответ на запрос восстановления не всегда означает отправку письма неизвестному адресу. Поэтому проверка проводится на собственном существующем аккаунте, который уже работал до изменения дизайна. Если исходное приложение не умеет завершать восстановление, сначала исправляется этот сценарий; новый HTML его не добавляет.

Если письмо или действие работает неправильно

Сохраните процесс обновления и отката

Храните для каждого типа свой проект Mailvex, исходный экспорт, адаптированный HTML и предыдущие Subject/Body. После любой правки дизайна заново экспортируйте, повторите замену маркера и проверку ссылок. Изменение визуального проекта не обновляет шаблон Supabase автоматически. Оставляйте доступными изображения, на которые ссылаются полученные письма.

Перед широкими изменениями в production восстановите прежние Subject и Body только затронутого шаблона, если новый вариант не проходит тест, и повторите его сценарий. Такой откат не требует менять работающий SMTP, hook, redirect-политику или второй шаблон. Сначала выясните конкретную причину различия.

Частые вопросы

Mailvex будет отправлять эти письма?

Нет. Здесь он создаёт визуальный проект и HTML. Формирование auth-ссылок и отправка остаются в уже настроенном Supabase и его SMTP. Специального подключения Mailvex к Supabase этот путь не требует.

Можно ли сразу поставить Go-выражение в кнопку?

Рассмотренный исходный путь Mailvex может сохранить такое выражение; утверждать, что оно обязательно ломается, неверно. В этой инструкции используется временный адрес и явная проверка после экспорта, чтобы отдельно контролировать все варианты ссылки перед публикацией.

Статья на четырёх языках сделает письма многоязычными?

Нет. Язык текста шаблона и правила выбора версии в вашем приложении нужно определить отдельно. Перевод инструкции не добавляет автоматический выбор языка в Supabase и не переводит тексты проекта Mailvex.

Достаточно ли красивого шаблона для восстановления пароля?

Нет. Приложение должно обработать переход и дать установить новый пароль. Приёмка состоит из полученного письма и завершённого действия, а не только внешнего вида или успешного сохранения HTML.