【Supabase】Webアプリに認証機能を作成するためのセットアップ

Webアプリを開発していると、ログイン機能をつけたい場面があります。

自前実装では暗号化やセッション管理、セキュリティ対策、GoogleログインなどのSNS連携など、コストがかかります。

そこで、BaaSのSupabaseを使用することで、安全で高機能なユーザー認証を低いコストで実走することが可能です。

本記事では、Supabaseを使用するまでの手順を紹介します。

BaaS/Backend as a Serviceとは

BaaS(Backend as a Service)とは、Webアプリケーションやスマートフォンアプリを開発する際に、サーバーの構築やデータベースの管理といったバックエンドの機能を、クラウド経由で一括して利用できるサービス（仕組み）のことです。

BaaSの標準機能

一般的に、どのBaaSにも次のようなアプリ開発によく使われる共通機能が標準で備わっています。

• DB/データベース

  • ユーザー情報や投稿内容などのデータを保存・管理する場所

• ユーザー認証

  • メールアドレスやSNSログインを使ったログイン機能
  • 本記事ではここを取り扱う

• ファイルストレージ

  • ユーザーがアップロードした画像、動画、PDFなどを保存する場所

Supabase/スーパーベースとは

Supabaseとは、オープンソースで提供されているBaaS）のプラットフォームです。

Supabaseのメリットとデメリット

メリット

• PostgreSQLの採用

  • SQLの強力なクエリ、トランザクション、ビューなどをそのままフル活用できる

• ベンダーロックインがない

  • OSSのため、環境の引っ越しが容易

• コストの見立てがしやすい

  • 従量課金でなく、Proプランも定額のため料金の見通しを行いやすい

デメリット

• 学習コスト

  • データベースにPostgreSQLを使用しているため、データベースに関するコストが必要

• スキーマの厳密さ

  • メリットにもなりえますが、スキーマが厳密であるため、頻繁な仕様変更やスキーマ変更の際にマイグレーションの手間が発生する可能性がある

各BaaS比較表

Supabase以外のBaaSとして、Googleの提供するFirebaseや、AWSが提供するAWS Amplifyがあるので、それらと特徴を比較したいと思います。

比較項目	Supabase	Firebase	AWS Amplify
バックグラウンド	オープンソース（PostgreSQLベース）	Google（モバイル・Web開発向け）	Amazon Web Services（AWSインフラのラッパー）
データベース	PostgreSQL （リレーショナル）	Firestore / Realtime DB （NoSQL）	DynamoDB （NoSQLが主流だがSQLも可）
オープン性	オープンソース （セルフホスト可能）	独自プラットフォーム （ベンダーロックイン強）	独自フレームワーク / AWS依存
得意領域	Web SaaS、複雑なデータ構築、AI（ベクトル検索）	モバイルアプリ、リアルタイム同期	大規模・エンタープライズ、AWSエコシステム活用
セキュリティ設計	RLS（行レベルセキュリティ） ※DBに直接設定	Security Rules ※独自の構文で記述	IAM / Cognito ※AWSの権限管理と統合

実践：Supabaseでメール認証を実装する手順

まずは、下記のリンクからSupaBaseへアクセスし、上部GUIのSign inから、アカウント作成やサインインを行って下さい。

サインインすると、以下の画面が表示されるので、任意のorganizationを選択してください。

本記事ではTsukino(私の組織)を選択します。

Projectsという画面へ遷移するので、New Projectをクリックして、プロジェクトを作成します。

プロジェクトの設定をします。

ProjectNameに、プロジェクトの名前(本記事では、ドパ単というアプリを接続したいので、DOPATANとします。)

Database passwordは、Generate a passwordをクリックして、生成します。

Regionは、Need a specific region?をクリックしてNortheast Asia (Tokyo)としておきます。

日本からにしておくと、速度が速くなります。

Enable Data APIは、アプリがこれを使って読み書きをするためチェックしておきます。

Automatically expose new tablesは、SQLの公開設定です。本記事ではオンにしておきます。

Enable automatic RLSにチェックをしておくことで、新しいテーブルを作ったときに、自動的にデータ保護の鍵を作成してくれます。

設定が完了したら、Create new Projectをクリックして、プロジェクトを作成します。

左側のタブから、SQL Editorを開いてください。

SQLを書いて、GUI右上のRunをクリックします。

左側タブから、Authenticationをクリックします。

GUI右側からURL Configurationをクリックし、Site URLとリダイレクト用のURLを設定します。

AuthenticationのSign In/Providersをクリックし、認証方法を追加したいサービスを選択します。

本記事ではGoogleでのログインを有効にするため、Googleを選択します。

設定画面が出るので、案内に従います。

Enable Sign in with Googleは、Googleでのログインを有効にするかどうかですので、オンにします。

OAuthクライアントIDとクライアント シークレットを入れます。

わからない方は下記の記事をご参照ください。

Callback URL (for OAuth)は、承認済みのリダイレクト URIに貼るため、コピーしておいてから、Saveをクリックして保存を行います。

Google Cloud Console側の画面ですが、認証情報ウィンドウの上部GUIから認証情報を作成->OAuthクライアントID内の承認済みのリダイレクトURIに貼り付けて保存します。

ここからは、各実装によって変わりますが、APIキーを使用して、アプリと接続していくフェーズになります。

Supabase側の設定が完了したため、本記事はここまでの紹介とします。

総括

• BaaSとは、Webアプリケーションやスマートフォンアプリを開発する際に、サーバーの構築やデータベースの管理といったバックエンドの機能を、クラウド経由で一括して利用できるサービス

• Supabaseとは、オープンソースで提供されているBaaSのプラットフォームである

• SupabaseはPostgreSQLの採用と、OSSであることが特徴