こんにちは！今回は、Create.xyz（以下Create）でSupabaseと連携してサインアップ機能を実装する方法をご紹介します。
Createは当ブログでもおなじみのアプリ構築AIサービスです。Supabaseはオープンソースのデータベースサービスです。
当ブログではCreateのFunctionを利用して様々な機能の実装方法をご紹介してきましたが、今回もFunctionを使ってサインアップ機能を実装していきます。CreateでREST APIでSupabaseにユーザー情報を保存してサインアップするFunctionを作成し、Pageで実装するという手順で進めていきます。Supabaseの設定方法もご紹介しているのでぜひご参考にしてください。
1. Supabase概要
1.1. 概要
SupabaseはPostgreSQLを基盤としたオープンソースのデータベースです。RESTful APIでデータのCreate、Read、Update、Deleteができます。認証・ユーザー管理やストレージなどの機能も提供しています。
Firebaseとの類似点が多いことから「オープンソースのFirebase」と呼ばれることもあるそうです。
料金プランはFree、Pro、Team、Enterpriseの4プランがあります。ユーザー数やファイル容量、Project数に応じてプランを選んでください。今回は無料のFreeプランで進めていきます。
1.2. RLS（Row Level Security）
SupabaseではPostgresのRow Level Securityを使って行ごとのセキュリティを設定することができます。RLSはテーブルごとに有効化でき、テーブルの設定タブで設定します。RLSを有効化したらPolicyを設定します。
基本的にはRLSを有効化するのが推奨されていますが、今回は接続の確認のみを行いたいのでRLSを無効化して進めていきます。本番環境で公開する際にはRLSを有効化し、適切なPolicyを設定するようにしてくださいね。
2. Supabaseの手順
それでは早速サインアップ機能を実装していきます。最初にSupabaseで必要な設定を行います。
なお、今回はREST APIでサインアップエンドポイントを使ってサインアップをするところまでの手順をご紹介します。サインアップ後にページに遷移させる等でAccess tokenが必要な場合は、さらにサインインエンドポイントに接続して取得する必要があります。下記をご参考にしてみてください。
2.1. Project作成
まずはSupabaseにサインアップしてCreateと連携するProjectを作成します。下記からSupabseにサインアップします。
サインアップできたらDashboardが開くので、ナビゲーション「All Projects」>「New Project」をクリックして新規でProjectを作成します。
Projectを作成するとProject Homeに移動します。画面を中ほどまでスクロールすると、Project URLとAPI Keyが表示されるのでコピーしておきます。
2.2. サインアップの設定
Emailアドレスとpasswordを入力してサインアップできるように設定します。ナビゲーションメニューのAuthentication>Providersをクリックします。
Auth ProvidersのEmailを開いて、「Enable Email provider」のみをオンにした状態にして「Save」で保存します。
2.3. Infoテーブルの作成・auth.usersテーブルとの紐づけ
Supabaseではサインアップ情報はauth.usersテーブルに保存されます。auth.usersテーブルで保存できるのはemailやPassword（ハッシュ化されます）などのサインアップ・サインインに必要な情報のみなので、ニックネームや性別などのユーザー情報を保存したい場合は新たにテーブルを作成してauth.usersと紐づける必要があります。
今回は、名前とユーザーIDをテーブルに保存したいという設定で、テーブルを作成してauth.usersと紐づけします。
ナビゲーションの「Table Editor」をクリックし、「New table」をクリックしてテーブルを作成します。
タブが開くのでテーブルの設定を行います。下記の通り設定してください。
- Name:
Info - Enable Row Level Security (RLS): チェックを外す
- Columns: (1)
id, uuid, Primary (2)created_at, timestamptz (3)name, text (4)userid, text (5)user, uuid
※今回は連携の確認をするだけなのでRLSをDisabledにしましたが、公開前には必ずEnabledにして適切なPolicyを設定してください。
ここまで入力できたら、Infoテーブルとauth.usersテーブルの紐づけを設定します。今回はColumns「user」でauth.usersと紐づけを行いたいので、「user」のリンクアイコンをクリックして設定タブを開きます。
まずは下記の通り紐づけるテーブルを選択します。下記を選択すると紐づけるテーブルをauth.usersに設定できます。
- Select a schema:
auth - Select a table to reference to:
users
下部に表示される項目を設定して「Save」をクリックします。下記の通り設定すると、auth.usersテーブルに保存したidをInfoテーブルのuserに保存することができるようになります。
- public.Info:
user - auth.users:
id - Action if referenced row is updated: Cascade
- Action if referenced row is removed: Cascade
Infoテーブルの設定タブに戻ってきたら、Columns欄下部のForeign keys欄に設定した内容が表示されているのを確認して「Save」をクリックします。
Infoテーブルの作成とauth.usersとの紐づけ完了です。
3. Createの手順
それでは、Createでの実装に移ります。
3.1. Function作成
まずはFunctionを作成します。
3.1.1. Project URLとAPI KeyをSecretに保存
Supabaseとの連携に必要なProject URLとAPI Key (public)をSecretに保存します。SupabaseのProject作成時にコピーした値です。Supabase DashboardのAPI Settings>API>API Settingsでも確認できます。
CreateでProjectを作成し、「New Function」からFunctionを作成します。ビルダー画面が開いたら「Secrets」タブの「Add new secret」をクリックして2つの値を保存します。
3.1.2. Function生成
プロンプトを入力してFunctionを生成します。Supabaseのサインアップエンドポイントを使用してサインアップし、ユーザー情報をInfoテーブルに保存するという内容になります。プロンプトを入力して「Generate」をクリックします。今回は下記のプロンプトを使用しました。
- プロンプト…
Supabaseと連携してサインアップする機能。auth.usersテーブルにemail, passwordを保存する。次に、Infoテーブルにname, ユーザー指定のuseridを保存する。このとき、先ほどサインアップ時に取得したidをこのテーブルのuserに保存する。結果を取得し、成功した場合はuser情報を出力する。失敗した場合は取得したエラーコードとエラーメッセージを出力する。
下記のFunctionが生成されました。
コードを確認します。「View Code」をクリックしてコードを表示すると、サインアップとInfoテーブルのデータ保存に下記のエンドポイントに適切な情報を送信しているのが確認できます。
- サインアップ：
SECRET_PROJECT_URL/auth/v1/signup - Infoテーブル更新：
SECRET_PROJECT_URL/rest/v1/Info
3.1.3. Functionテスト
それでは、実際にサインアップとInfoテーブルにデータが保存できるか確認します。Testタブでユーザー情報を入力して「Run function」をクリックします。
「Completed」とユーザー情報が表示されたらSupabaseを確認します。
SupabaseのTable Editorを開き、Schemaで「auth」を選択してusersをクリックしてauth.usersテーブルを確認します。先ほど入力したメールアドレスが保存されています。
次にSchemaで「public」を選択してInfoをクリックしてInfoテーブルを確認します。先ほど入力したnameとuser idが保存されています。
上記の二つの紐づけを確認すると、auth.usersのidの値が、Infoテーブルのuserに保存されています。
3.1.4. 2024/8/9追記：サインアップ時にAccess tokenを受け取るプロンプト
今回作成したFunctionについて、サインアップのレスポンスを出力するようにプロンプトで指示すると、Access tokenを受け取ることができるようになります。Access tokenを使ってサインインユーザーのページ遷移等を行いたい場合は下記のプロンプトを参考にしてみてください。
- プロンプト…
Supabaseと連携してサインアップする機能。API Keyを使ってアクセスする。auth.usersテーブルにemail, passwordを保存する。responseの内容を出力する。次に、Infoテーブルにname, ユーザー指定のuseridを保存する。このとき、先ほどサインアップ時に取得したidをこのテーブルのuserに保存する。
3.2. Page作成
それでは、作成したFunctionを使ってサインアップページを作成します。
3.2.1. Page生成
Functionを作成したのと同じProjectでPageを新規作成します。Prompt欄に、サインアップページの概要を入力して「Generate」をクリックします。今回は下記のプロンプトを入力しました。
- プロンプト…
サインアップページ。メールアドレス、パスワード、user id、名前の入力欄と、新規登録ボタンがある。全ての欄を入力しているときに新規登録ボタンをタップできる。新規登録ボタンをタップしたら/FUNCITON_NAMEを使ってサインアップする。
下記のようなページが生成されました。必要な入力欄とボタンが揃っています。
コードを確認すると、作成したFunctionにemail、password、name、useridを送信し、成功・失敗に応じてメッセージを表示する内容になっています。
3.2.2. Pageテスト
生成したPageをDemoモードで表示してサインアップできるかを確認します。ビルダー画面左上の「Demo」をオンにして、入力欄を埋めて「新規登録」ボタンをクリックします。
成功のメッセージが表示されました。
Supabaseを確認します。auth.usersテーブル、Infoテーブルの両方で正しく保存されていますね！成功です！
4. まとめ
今回は、CreateでSupabaseと連携してサインアップページを作成する方法をご紹介しました。SupabaseはProject URLを指定するだけでAPIを実行できましたね。Table EditorもExcel等と似ていて使い慣れたインターフェースなので、習得に時間はかからなさそうです。色々なデータベースを試してみて使いやすいデータベースを見つけてくださいね！
Supabaseについては、ノーコードラボのZenn公式ブログでFlutterFlowとの連携方法についてご紹介しています。こちらもご参考にしてみてくださいね！
