Вход через Google

Вход через Google в связке с Supabase позволяет регистрировать и авторизовать пользователей аккаунтом Google.

Как настроить

Соберём такой пример:

1. Проект в Google Cloud

Понадобится действующий аккаунт Google Cloud Platform и проект в нём — новый или существующий.

1. Создайте проект в Google Cloud Console, если его ещё нет.

2. Настройте экран согласия OAuth — по нему пользователь видит, что за приложение запрашивает доступ и к каким данным.

3. Создайте учётные данные:
   1. Откройте страницу учётных данных, нажмите + CREATE CREDENTIALS и выберите OAuth client ID.
   2. В Application type укажите Web Application.
   3. В Authorized redirect URIs нажмите + ADD URI. Нужный адрес лежит в Supabase project > Authentication > Providers, секция Google, поле Callback URL.
   4. Нажмите CREATE.
   5. Скопируйте Client ID и Client secret — они понадобятся дальше.

4. Для Android заведите отдельные учётные данные с Application Type — Android. Понадобятся имя пакета и ключ SHA-1. После публикации приложения ключ нужно заменить на ключ из Play Console.

5. То же самое для iOS. После публикации приложения здесь указывают идентификаторы App Store и Team ID.

2. Настройка Google в Supabase

1. Откройте панель проекта Supabase > Authentication > Providers.
2. Разверните секцию Google и включите Enable Sign in with Google.
3. Вставьте Client ID и Client secret из учётных данных для веба.
4. В Authorized Client IDs вставьте идентификатор из учётных данных Android.
5. Включите Skip nonce checks — это нужно для iOS.

6. Задайте адрес перенаправления в Authentication > URL Configuration — туда попадает пользователь после успешного входа. Для веба и мобильных он разный:

3. Включение во FlutterFlow

1. Откройте Settings and Integrations > App Settings > Authentication.
2. Разверните секцию Supabase Authentication и включите Enable Google Authentication.
3. Вставьте iOS Client ID и Web Client ID, полученные на первом шаге.

4. Кнопка входа

Нужна страница входа с кнопкой — своя или из шаблонов виджетов и страниц.

Вот как добавить кнопку из шаблона:

5. Действие создания аккаунта

Регистрация складывается из двух действий подряд.

1. Создание аккаунта в Supabase:
   1. Выберите виджет — например, кнопку.
   2. В панели свойств справа откройте Actions и нажмите Open — откроется Action Flow Editor.
   3. Нажмите + Add Action.
   4. Найдите и выберите Log In (раздел Backend/Database > Supabase Authentication).
   5. В Auth Provider укажите Google.
2. Insert Row в Supabase.

Первое действие создаёт учётную запись и добавляет пользователя в Supabase Dashboard > Authentication > Users. Записи в вашей таблице «users» — той, что вы создали ранее, — оно не делает: для этого и нужен Insert Row с данными пользователя.

6. Действие входа

По нажатию кнопки срабатывает действие Log In: открывается окно Google, где пользователь подтверждает вход.

1. Выберите виджет — например, кнопку.
2. В панели свойств справа откройте Actions и нажмите Add Action.
3. Найдите и выберите Log In (раздел Backend/Database > Supabase Authentication).
4. В Auth Provider укажите Google.

7. Выход

Выход из аккаунта — действие Log Out.

8. Подготовка к проверке

В Run и Test Mode вход через Google с Supabase не работает. Для веба приложение можно опубликовать на поддомене через публикацию в вебе.

На устройстве или эмуляторе проверяйте через Local Run — см. документацию и подключение физического устройства.

9. Проверка

Записи новых пользователей появятся в Supabase project > Authentication > Users.