🗒️

FlutterFlowでSupabaseと連携して認証機能を実装する

Mtmt

2023/07/21に公開

Supabase

FlutterFlow

tech

はじめに

FlutterFlowではデータベースにFirebaseが選ばれることが多いですが、他の選択肢として「Supabase」があります。
今回は、Supabaseと連携して新規登録・ログイン・ログアウト機能をFlutterFlowで実装する手順をご紹介します。

https://supabase.com/

Supabaseとは

Supabaseは、Firebaseの代替品として人気の高まっているオープンソースのBaaSです。プロダクト構築に必要なデータベース、認証、リアルタイム接続などの機能を備えています。

SupabaseとFirebaseの大きな違いは、FirebaseはNoSQL、SupabaseはリレーショナルデータベースのPostgreSQLで構成されている点です。リレーショナルデータベースで管理したい方にはSupabaseがおすすめです。

また、Supabaseのダッシュボードを利用してみると分かりますが、Firebaseよりも直感的に操作しやすく作られていて、初心者にも易しいBaaSだと言えます。

https://supabase.com/

料金体系

Supabaseでは、無料・プロ・チームプランの3つの料金プランが用意されています。
保存容量やプロジェクト数を増やしたいといったことがなく小規模のサービスであれば、基本的には無料プランでこと足りる設計になっています。

出典：https://supabase.com/pricing

事前準備

FlutterFLow
- 新規登録
- プロジェクトの作成
  　※「Setup Firebase」はオフで作成します。
Supabase
- 新規登録（サインアップページはこちら）

Supabase

Supabaseでプロジェクト作成

まずはSupabaseでプロジェクトを作成します。新規登録後に表示されたダッシュボードで「New Project」をクリックし、必要事項を入力してプロジェクトを作成します。

userテーブルの作成と設定

次に、userテーブルを作成します。ナビゲーションメニュー「Table Editor」を開き、「Create a new table」ボタンをクリックします。

テーブルの詳細を設定します。Nameを設定し、「Enable Row Level Security (RLS)」のチェックを外します（本番公開時に適切な設定をする必要があります）。

続いて、カラムを下記の通り編集・追加します。

id…Typeを「uuid」に変更
name…Typeは「text」
email…Typeは「text」

次に、usersテーブルのデータを、メールアドレスや暗号化されたパスワードなどを保存するプライベートテーブル「auth.users」と紐づけます。
idのカラム名の隣のリンクアイコンをクリックし、foreign key relationの設定画面を開き、以下を参考に設定します。

Select a schema…auth
Select a table to reference to…users
Select a column from auth.users to reference to…id
Action if referenced row is removed…Cascade

設定できたら、「Save」で設定画面を閉じます。

一部のemail認証の無効化

ナビゲーションメニュー「Authentication」>「Providers」>「Email」タブを開きます。
「Confirm email」と「Secure email change」のラジオボタンをオフにし、右下の「Save」ボタンをクリックします。

API URL・Anon Keyのコピー

FlutterFlowとの統合に必要なAPI URLとAPIキーをコピーします。
ナビゲーションメニュー「Project Settings」>「API」を開き、「Project URL」と「Project API keys」>「Anon Key」をコピーして控えておきます。

FlutterFlow

Supabase認証の有効化

FlutterFlowでプロジェクトを開いたらナビゲーションメニュー「Settings and Integrations」>「Authentication」の画面を開きます。
「Enable Authentication」をオンにし、「Authentication Type」で「Supabase」を選択します。

「Supabase has not been set up yet.」というエラーメッセージが表示されているので次のステップで解消します。

Supabaseとの統合

FlutterFlowのナビゲーションメニュー「Settings and Integrations」>「Supabase」を開きます。
「Enable Supabase」をオンにし、「API URL」と「Anon Key」の入力欄にそれぞれ先ほどコピーしたものを貼り付け、「Get Schema」をクリックします。

クリック後、下部に「Supabase Storage」と作成したuserテーブルが表示されれば完了です。

※Supabaseの設定を変更するたびに「Get Schema」で変更を反映させる必要があります。

ページ作成

今回は、下記の3つのページを作成します。まずはページを作成してください。

新規登録ページ…テンプレート「Create Account 1」で作成
ログインページ…テンプレート「Login 1」で作成
マイページ…プロジェクト作成時に自動追加される「HomePage」を一部修正（テキスト×2、ボタン×1を配置）

ページ・アクション設定

作成した3ページで要素の追加やアクションの設定を行っていきます。

新規登録ページ

「name」の入力ボックスを追加します。
テンプレートの「Email」の入力ボックスをコピー＆ペーストし、素材名とラベルを「Name」に変更します。

アクションを設定します。「Create Account」ボタンのAction Flow Editorを開きます。ここで設定するアクションは以下の2つです。

Action1. Create Account
Action2. Insert Row

Action1（「Backend/Database」>「Supabase Authentication」>「Create Account」）
Supabaseのauth.userテーブルにユーザーのログイン情報を保存するアクションです。
Action2（「Backend/Database」>「Supabase」>「Insert Row」）
name等を保存するuserテーブルにユーザーデータを追加するアクションです。
Tableに「user」を設定し、「Set Fields」>「Add Field」から保存内容をそれぞれ設定します。

※「Created_at」は設定せずどもSupabaseが自動で現在時刻を保存してくれますが、日本時間で登録したい場合は上記の通り「Global Properties」>「Current Time」を設定する必要があります。