Supabaseの機能

はじめに

新規開発でSupabaseを利用しました。
NextJSからのSupabase利用について簡単に紹介します。

要約

• Supabaseクライアントを作成して、Server Actionsやクライアントで扱える
• Supabase Auth: メールコード認証が簡単に実装可能
• Supabase DB: 中間テーブルの結合が簡単に実現可能

NextJS連携

https://supabase.com/docs/guides/auth/server-side/nextjs のガイドに従ってクライアントを作成します。

サーバー側で扱えるコードとクライアント側で扱えるコードを分けて作成でき、それぞれをServer Actionsやクライアントで利用できます。

認証

Supabase Authenticationを使って認証を実装できます。

認証したユーザー情報
サインイン、サインアップのコード例を以下に示します。

form.tsx

<form>
  <label htmlFor="email">Email:</label>
  <input id="email" name="email" type="email" required />
  <label htmlFor="password">Password:</label>
  <input id="password" name="password" type="password" required />
  <Button formAction={signin}>Sign in</Button>
  <Button formAction={signup}>Sign up</Button>
</form>

サインアップの例。
signUpメソッドでサインアップします。

signup.ts

"use server";

export async function signup(formData: FormData) {
  const supabase = await createClient();

  const data = {
    email: formData.get("email") as string,
    password: formData.get("password") as string,
  };

  const { error } = await supabase.auth.signUp(data);

  if (error) {
    redirect("/error");
  }

  revalidatePath("/", "layout");
  redirect("/login/organization");
}

サインインの例。
signInWithPasswordメソッドでサインインします。

signin.ts

"use server";

export async function signin(formData: FormData) {
  const supabase = await createClient();

  const data = {
    email: formData.get("email") as string,
    password: formData.get("password") as string,
  };

  const { error } = await supabase.auth.signInWithPassword(data);

  if (error) {
    redirect("/error");
  }

  revalidatePath("/", "layout");
  redirect("/");
}

Tips

Email認証の設定項目でConfirm EmailをONにすると、サインイン前にメールを使ったコード認証が可能になります。

Email認証設定

実際のメール

DB

SupabaseでのDBへのインサート、取得について見てきます。

ER図

データ挿入

データ挿入後に取得したい場合はselect()を使用します。

export const createOrganization = async (data: any) => {
  const supabase = await createClient();
  return supabase
    .from("organization")
    .insert({ ...data })
    .select()
    .single(); 
};

データ取得

ユーザーに紐づいた組織情報を取得する例です。中間テーブルの結合を自動で行ってくれます。

export const getOrganizations = async () => {
  const supabase = await createClient();
  const authUser = await supabase.auth.getUser();
  const user = await supabase
    .from("user")
    .select("*")
    .eq("auth_id", authUser.data.user?.id)
    .single();

  // many to many relationship
  const organizations = await supabase
    .from("user")
    .select(`* , organization(*)`)
    .eq("id", user.data.id)
    .single();

  return organizations;
};

おわりに

Supabaseの機能について簡単に見てきました。
個人的にはFirebaseに比較してコードがシンプルで書きやすく魅力的だと感じました。
NextJSとの相性も良く、今後積極的に採用していきたいです。