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」から確認することができます。

.env.local

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

/libsフォルダを作成し、配下にsupabaseClient.tsファイルを作成します。

supabaseClient.tsを以下のように記述し、Clientを初期化します。

/libs/supabaseClient.ts

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を、以下のように変更します。

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: "example@email.com",
      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: "example@email.com",
  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が　整ってない箇所も部分的にありました。それでも、認証を使う上では間違いなく便利な機能なので、今後も色々触りながら試していきたいと思います。

ではまた。