こんにちは！GIGのサービス開発事業部でアプリケーションエンジニアとして働くちいかた（片田）です！

Supabase、使ってますか？使っていない？いますぐ使いましょう！

Supabaseを使えば、認証認可の機能の実装やAPIの作成をすべてSupabaseに任せられ、自分はフロントエンドの開発に専念できます！

このように非常に便利なSupabaseですが、モダンなサービスのため、公式ドキュメント以外の知見があまり公開されておらず、使いこなすにはある程度自分で試行錯誤する必要があります。

今回はSupabaseを使ってアプリ開発中の私ちいかたが、Supabaseの数ある機能の一つである「Supabase Auth」を使って、アプリケーションを爆速で開発しつつ実践的な要件を満たす方法を解説します！

Supabaseとは

Supabase は、オープンソースのデータベースである PostgreSQL をベースにした、Backend as a Service （BaaS） プラットフォームです。データベース、認証、ストレージ、Functionsなど、ほぼすべてのバックエンド機能を提供しています。

Supabase以外のBaaSだと、Firebaseが有名でしょう。過去記事では、SupabaseとFirebaseの比較を行っているので興味があれば読んでみてください！

関連記事：Supabase + Next.jsで認証機能付きWebアプリケーションを作る方法

Supabase Authとは

概要

Supabase Auth は Supabase が提供するユーザー認証機能です。メールやソーシャルアカウントなどさまざまな方法でユーザー登録を実施でき、ユーザーデータはPostgreSQLのauth.usersテーブルに保存されます。

登録したユーザー情報を参照したログイン管理も可能です。

Supabase Authのセキュリティについて

個人的には、Supabase Authはセキュリティ面が強固だと感じています。

ユーザー認証にはJSON Web Tokens （JWT）を使用しているため、セキュアな認証情報の交換が可能です。暗号化されたトークンであるJWTを使用することで、サーバーとクライアント間の通信が保護され、改ざんが困難になります。

また、ユーザーデータは、標準的なセキュリティプラクティスに従いアクセス制御が厳格に管理されたPostgreSQLに安全に保存されます。Supabaseのセキュリティモデルには、ロールベースのアクセス制御（RBAC）が含まれており、ユーザーに必要な権限のみを付与できます。

実装を始めるための準備

今回はNext.js App Routerを使用し、実践的な認証機能を備えるアプリケーションを実装するハンズオンをしていきましょう。

Supabase Authの公式ドキュメントでは、Next.jsと組み合わせて使う方法が紹介されています。まずは、実装を始めるための準備として、上記のリンクから公式ドキュメントを参照し「Set up a Next.js application」の手順1〜3までを実施してください。

Supabase Authを使ってみよう

実践的な使い方

先ほどの公式ドキュメントでは「アプリケーションからSupabase Authを使ってユーザー登録をして完了」といった形式で説明されています。今回の記事では、もう少し踏み込んだ使い方を解説できればと思います。

ユーザーがマイページで自分の情報を更新・管理できるアプリケーションでは、usersテーブルやprofilesテーブルなどにもユーザーデータを管理したくなると思います。

そういった場合、素直にSupabaseを使うと、アプリケーションの実装が以下のようなフローになってしまいます。

1. Supabase Authを使ってユーザー登録
2. Supabase Authで登録したユーザーIDをkeyにしてデータベースにデータを保存

上記のフローだと、アプリケーション側からSupabaseへのリクエストが2回に分かれてしまい、1が成功して2が失敗した場合のデータ整合性の担保など、考慮することが増えてしまいます。

こんなときは「Supabase Auth Hook」を使って解決しましょう！

Supabase Auth Hookという機能を利用すると、認証プロセスにカスタムロジックを組み込むことが可能に。データベースへのユーザーデータの同期を自動化できます。

たとえば、ユーザーがアプリにサインアップする際、Supabase Authは自動的にユーザーデータをauth.usersテーブルに保存します。ここでAuth Hookを使用することで、このプロセスに追加のステップを設けられます。つまり、auth.usersテーブルにデータをinsertする際に、public.usersテーブルにもデータをinsertしてデータを同期する、といったような使い方ができるのです！

こうすればアプリケーションからのリクエストは1回で済みますし、データの整合性もSupabaseが担保してくれるため、考慮しなければならない点が少なくなります。

ユーザー登録機能の実装ハンズオン

それでは、実際にSupabase Auth と Auth Hookを使ってユーザー登録機能を実装していきましょう！

1. Auth Hookの設定

まずはSupabase Authのデフォルトの挙動をカスタマイズするAuth Hookを設定します。

1. Supabase Dashboardで「Auth」>「Auth Hooks」に移動
2. 「New Hook」をクリックし、フック名を入力 （ここではcreate-user-data）
3. 「Hook Source」にSQL関数を記述

CREATE OR REPLACE FUNCTION public.handle_new_user()
  RETURNS trigger
  LANGUAGE plpgsql
  SECURITY DEFINER
AS $$
BEGIN
  // usersテーブルにinsertします
  INSERT INTO public.users (id, full_name, avatar_url)
  // new変数にはauth.usersテーブルのデータが格納されており、idやメタデータを取得しています
  VALUES (NEW.id, NEW.raw_user_meta_data->>'full_name', NEW.raw_user_meta_data->>'avatar_url');
  RETURN NEW;
END;
$$;

4. イベントに「SIGNUP」を選択し、フックの作成

この関数は、ユーザーがサインアップすると実行され、usersテーブルにユーザーデータを保存します。

また、サインアップの際にoptionsを渡してあげることで、メタデータを設定できるように。今回の例だとfull_nameやavatar_urlのように、「Authに登録するときには不要だけどデータベースには登録したい情報」などはメタデータとして渡してあげることで、Auth Hook内でデータを扱えるようになります。

2. Usersテーブルの作成

次に、ユーザーデータを保存するUsersテーブルを作成します。

1. Supabase Dashboardで「Table editor」に移動
2. 「New Table」をクリックし、テーブル名をusersとする
3. 以下のカラムを追加
・id (UUID, Primary Key)
・full_name (TEXT)
・avatar_url (TEXT)
4. 「Save Table」をクリック

3. Next.jsにてユーザー登録機能の実装

最後に、Next.jsアプリからSupabase Authを使ってユーザー登録機能を実装します。

UI部分はSupabaseが提供するUIライブラリを使用していきます。

1.app/register/page.tsxファイルを作成し、以下のコードを記述

'use client'

import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
import { useSupabase } from '@/app/supabase-provider'

export default function Register() {
  const { supabase } = useSupabase()

  return (
    <Auth.UserContextProvider supabaseClient={supabase}>
      <Auth
        view="sign_up"
        showLinks={false}
        appearance={{
          theme: ThemeSupa,
          style: {
            input: { 
              borderRadius: '8px',
              padding: '12px 16px'  
            }
          }
        }}
      />
    </Auth.UserContextProvider>
  )
}

2. app/layout.tsxファイルに<SupabaseProvider>を追加

// ...
import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
import { SessionContextProvider } from '@supabase/auth-helpers-react'
import { SupabaseProvider } from '@/app/supabase-provider'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const supabase = createBrowserSupabaseClient()

  return (
    <html>
      {/* 略 */}
      <body>
        <SessionContextProvider supabaseClient={supabase}>
          <SupabaseProvider>
            {children}
          </SupabaseProvider>
        </SessionContextProvider>
      </body>
    </html>
  )
}

以上で、Supabase Authを使ったユーザー登録機能の実装が完了しました！ユーザーが登録すると、Auth Hookが実行され、usersテーブルにユーザーデータが自動的に保存されます。

まとめ

Supabaseは、アプリケーションの規模や要件がマッチすれば、開発効率が上がるなどの点で非常に良い選択肢になると思います。

今回の記事で紹介したように、Supabase Authの機能だけで実践的なユーザー認証・認可機能をアプリケーションに簡単に実装することが可能に。ほかにもSupabaseでできることはたくさんあるので、ぜひみなさんも一緒にSupabase使い倒しましょう！

◇

私が所属する株式会社GIGは、Web制作やシステム開発に強みをもつデジタルコンサルティング企業です。さまざまな技術を活用し、ご要望を叶えるWebサイト・システムを実現します。

Webやシステム、DX支援のご相談はいつでもご連絡ください。

ご相談・ご依頼はこちら
会社紹介資料のダウンロードはこちら

また、株式会社GIGでは一緒に働くメンバーも募集中です！モダンな技術を使った開発も挑戦する機会があるかもしれないので、少しでもご興味を持っていただいた方は、ぜひカジュアル面談でお話しましょう。

採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

片田 凌太

1997年10月生まれ。自動車のコネクティッドサービス開発や日本最大のコーヒーサブスクリプションサービス開発などの経験を経て2023年10月に株式会社GIGに入社。現在は、Webサイト制作からコンテンツSEO、問い合わせ管理、LP制作などWebマーケティングに必要な機能をもったCMS『LeadGrid』の開発チームに所属。