SupabaseのTriggers機能を使用しユーザー情報をデータベースに自動登録させる
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
Supabaseは、firebaseの代替サービスと言われるBaasです。
今回は、SupabaseのTriggers機能を使用して、ユーザー情報をデータベースへ登録する過程を自動化してみました。
Supabase Triggerについて
Supabaseのトリガー機能を使用すると、特定のイベントと関数を関連付け、イベントの発生時に、その関数を発火させるようにできます。この機能によって、ユーザーがプロジェクトにサインアップしたタイミングで、そのユーザー情報を任意のデータベースに、自動で挿入するよう設定できます。
トリガー機能の実装
今回は、こちらの動画を参考にしながら実装しました。
Supabaseにログインし、プロジェクトを作成します。
メール認証の設定
今回は、メール認証を使用します。
左サイドバーで、「Authentication」内の「Settings」に移動します。
「Email Auth」の「Double confirm email changes」、「Enable email confirmations」をそれぞれオフにします。オフにすることで、ユーザー登録時の二重確認、確認メールの送信が無効になります。今回は、Triggers機能を試すのが目的のため、作業を単純化させます。
Supabaseのインストール
次にNext.jsで認証画面の実装していきます。
プロジェクトを作成します。
$ yarn create next-app sample-app --ts $ cd sample-app
Supabaseをインストールします。今回は、Supabase UIを使用します。
$ yarn add @supabase/supabase-js @supabase/ui
.env.localファイルを作成し、キーとURLを環境変数に保存します。 キーとURLはSupabaseの「Settings」→「API」から確認することができます。
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
/libsフォルダを作成し、配下にsupabaseClient.tsファイルを作成します。
supabaseClient.tsを以下のように記述し、Clientを初期化します。
import { createClient } from "@supabase/supabase-js";
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
if (!supabaseUrl || !supabaseAnonKey) {
throw new Error("");
}
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
認証画面の実装
index.tsxを、以下のように変更します。
import { useEffect, useState } from "react";
import { supabase } from "../libs/supabaseClient";
import styles from "../styles/Home.module.css";
import { Button } from "@supabase/ui";
import { User } from "@supabase/supabase-js";
import { NextPage } from "next";
const Home: NextPage = () => {
const [user, setUser] = useState<User | null>();
useEffect(() => {
const user = supabase.auth.user();
setUser(user);
}, [user]);
const signUp = async () => {
const { user, error } = await supabase.auth.signUp({
email: "[email protected]",
password: "example-password",
});
setUser(user);
};
const signOut = async () => {
supabase.auth.signOut();
setUser(null);
};
return (
<main className={styles.main}>
<h2 className={styles.title}>Supabase Trigger</h2>
{user ? (
<div>
<h3 className={styles.description}>id:{user.id}</h3>
<Button style={{width: "300px"}} block onClick={() => signOut()} size={"large"}>
SignOut
</Button>
</div>
) : (
<div>
<h3 className={styles.description}>Please register</h3>
<Button style={{width: "300px"}} block onClick={() => signUp()} size={"large"}>
SignUp
</Button>
</div>
)}
</main>
);
};
export default Home;
今回はユーザーがフォームを入力したと仮定し、仮の情報でユーザーを登録しています。
const { user, error } = await supabase.auth.signUp({
email: "[email protected]",
password: "example-password",
});
では、ユーザーを登録します。
$ yarn dev
サインアップします。
supabaseのダッシュボードに戻り、「Authentication」に移動します。
ユーザー登録されているのが、確認できます。
クエリの実行
左サイドバーの「SQL Editor」に移動し、新しくクエリを作成します。「+ New query」を選択し、クエリを記述します。
select * from auth.users
右側にある「RUN」ボタンを推して、クエリを実行します。
ユーザーが取得できています。
データベースの作成
左サイドバーから「Table Editor」に移動し、「New table」で新しくテーブルを作成します。今回は、テーブル名を「Profiles」にしました。
idのリンクを設定して、認証ユーザーとテーブルを関連付けます。
idのリンクマークをクリックします。「Select a table to reference to」から「users」を、「Select a column from users to reference to」から「id」を、それぞれ選択し、保存します。
関数の作成
左サイドバーから「Database」内の「Functions」に移動し、functionを作成します。
「create a new function」を選択。
関数名を入力し、「Return type」を「trigger」に変更します。
クエリを記述し、関数が呼び出されたときにidを挿入するよう定義します。
「Show advanced settings」をオンにし、「Show advanced settings」を「SECURITY DEFINER」に変更します。そうすることで、関数を定義したユーザーの権限で、関数が実行されるようになるようです。
左サイドバーから「Database」内の「Triggers」に移動し、「Create a new Trigger」を選択。
トリガーの名前を入力し、「Table」に「users」を選択します。
トリガーの種類や、発火タイミングなどを変更します。
「Choose a function trigger」で、先ほど作成した関数を指定し、作成します。
動作確認
一度、先ほど作成したユーザーを削除します。「Authentication」の「Users」から、削除することができます。
開発環境で一度ログアウトしたのち、新しくユーザーを登録します。
再度Supbabeseのダッシュボードに戻り、ユーザーが登録されていることを確認します。
左サイドバーから「Table Editor」に移動し、作成した「Profiles」テーブルを確認します。
データベースにユーザー情報が登録されており、IDも一致しています。挿入プロセスを自動化することができました。
まとめ
今回は、SupabaseのTriggers機能を試してみました。現時点でこの機能はテスト版であり、UIが 整ってない箇所も部分的にありました。それでも、認証を使う上では間違いなく便利な機能なので、今後も色々触りながら試していきたいと思います。
ではまた。
