Аутентификация по электронной почте Supabase — это безопасный и простой способ, позволяющий пользователям регистрироваться и входить в приложение, используя свою электронную почту и пароль.

Давайте посмотрим, как добавить аутентификацию по электронной почте в Supabase, построив пример, который выглядит следующим образом:

Добавление аутентификации по электронной почте в Supabase выполняется следующим образом:

1. Настроить аутентификацию электронной почты в Supabase
2. Создание страниц
3. Добавление действия создания учетной записи
4. Добавление действия входа в систему
5. Добавление действия выхода из системы
6. Проверка создания пользователя

В связи с некоторыми особенностями поведения аутентификации в Supabase необходимо отключить проверку электронной почты на стороне Supabase. Однако при желании вы можете самостоятельно добавить логику проверки электронной почты в свое приложение.

Вот как отключить проверку электронной почты на стороне Supabase:

1. В проекте Supabase перейдите в раздел Аутентификация > Провайдер.
2. Откройте раздел Email и отключите изменения подтверждения электронной почты и безопасной электронной почты.

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

Также смотрите, как построить макет страницы, если вы хотите создать страницу с нуля.

Теперь можно перейти к добавлению потока создания учетной записи, который в основном состоит из трех действий, расположенных в следующем порядке:

1. Действие Supabase create account
2. Действие вставки строки в Supabase
3. Действие навигации

Первое действие создает учетную запись в Supabase и добавляет e-mail и пароль в таблицу «auth.users» (т.е. Protected schemas > schema auth). Однако это действие не создает запись в созданной здесь таблице «users». Для этого необходимо добавить еще одно действие под названием Supabase insert row action с данными пользователя, такими как email и profile_pic. После создания записи можно перейти на главную страницу с помощью действия navigate.

Вот как это выглядит:

Чтобы разрешить пользователям входить в систему с помощью своих учетных данных, можно использовать это действие.

Чтобы позволить пользователям выйти из приложения, можно использовать это действие.

Чтобы убедиться в успешном добавлении аутентификации по электронной почте, можно зайти в проект Supabase > Table Editor > выбрать таблицу «»Пользователи»» и проверить записи о пользователях.

Теперь, когда вы успешно добавили аутентификацию по электронной почте Supabase в свое приложение, вы можете получить доступ к данным вошедшего пользователя, таким как электронная почта, идентификатор пользователя, номер телефона, подтвержденная электронная почта и JWT-токен, через меню Установить переменную > Аутентифицированный пользователь.

Ниже приведен пример фильтрации списка дел на основе зарегистрированного пользователя с помощью свойства «Установить переменную» > «Аутентифицированный пользователь» > «Идентификатор пользователя».