【ITニュース解説】Getting Started with Supabase in a React + TypeScript App: Authentication Basics

近年、ウェブアプリケーション開発におけるバックエンド構築の複雑さは、Supabaseのような新しいサービスによって大きく簡素化されている。Supabaseは「Backend-as-a-Service (BaaS)」として、開発者がサーバー構築や管理に煩わされることなく、アプリケーションに必要なバックエンド機能を提供する。具体的には、ユーザー認証、Postgresデータベース、リアルタイムデータ同期、ファイルストレージといった機能が、すぐに利用できる状態で提供される。特にReactプロジェクトとのスムーズな連携と学習の容易さが大きな魅力である。

この記事では、システムエンジニアを目指す初心者が、SupabaseをReactとTypeScriptで開発されたアプリケーションに組み込み、基本的なユーザー認証システムを構築する手順を解説する。新規ユーザー登録（サインアップ）、既存ユーザーのログイン、そしてログアウトという一連の認証フローを、スタイリングツールであるTailwindCSSを使って実装する。この基本的な認証機能の理解と実装は、あらゆるウェブアプリケーション開発において不可欠な出発点となる。

まず、Supabaseの環境を準備する。supabase.comへアクセスし、アカウントを登録する。登録後、新しいプロジェクトを作成し、そのダッシュボードに表示される「プロジェクトURL」と「anon APIキー」を控えておく。これらは後ほどアプリケーションからSupabaseへ接続する際に必要となる。さらに、認証設定画面で「Email/Passwordログイン」機能を有効にしておく必要がある。

次に、ローカル環境でReactとTypeScriptのプロジェクトを新規に作成する。高速な開発環境を提供するViteツールを使用し、コマンドラインでnpx create-vite@latest supabase-auth-demo --template react-tsと入力する。プロジェクトディレクトリへ移動後、npm installで依存関係をインストールし、続けてSupabaseのJavaScriptクライアントライブラリである@supabase/supabase-jsと、スタイリングに使うtailwindcss、postcss、autoprefixerもインストールする。TailwindCSSを使用するためには、npx tailwindcss init -pコマンドを実行し、生成されたtailwind.config.jsファイルとsrc/index.cssファイルに設定を追加する。

プロジェクトとSupabaseの準備が整ったら、両者を接続するための初期化処理を行う。srcディレクトリ内にsupabaseClient.tsという新しいファイルを作成し、Supabaseクライアントを初期化するコードを記述する。このファイルでは、@supabase/supabase-jsライブラリからcreateClient関数をインポートし、取得した「プロジェクトURL」と「anon APIキー」を使ってクライアントインスタンスを作成し、外部から利用できるようにエクスポートする。これらの機密情報は環境変数として扱うことが推奨されるため、プロジェクトのルートディレクトリに.envファイルを作成し、VITE_SUPABASE_URLとVITE_SUPABASE_ANON_KEYという変数名でそれぞれの値を記述する。

いよいよユーザー認証のUIを構築する。Auth.tsxというReactコンポーネントを作成し、サインアップ、ログイン、ログアウトの各機能に必要なフォーム要素とボタンを配置する。ReactのuseStateフックを使って、メールアドレス、パスワード、現在ログインしているユーザーの情報、そして発生したエラーメッセージを管理する。例えば、入力されたメールアドレスやパスワードは、対応するuseStateで保持され、入力フィールドの変更に応じて更新される。

認証機能の実装には、Supabaseクライアントが提供するメソッドを利用する。ユーザーがサインアップボタンをクリックした際には、supabase.auth.signUp({ email, password })メソッドを非同期で呼び出し、新しいユーザーアカウントを作成する。エラーが発生すれば画面に表示し、成功すればuser状態変数にユーザー情報を設定する。同様に、ログインボタンがクリックされた際にはsupabase.auth.signInWithPassword({ email, password })を呼び出し、ユーザーを認証する。ログアウトボタンがクリックされた際にはsupabase.auth.signOut()を呼び出し、現在のセッションを終了させ、user状態変数をnullに戻す。

UIの表示は、user状態変数の値によって切り替える。userがnull、つまりログインしていない状態であれば、メールアドレスとパスワードの入力フォーム、そしてサインアップ・ログインボタンを表示する。userが存在する、つまりログインしている状態であれば、「Logged in as [ユーザーのメールアドレス]」というメッセージと、ログアウトボタンを表示する。これにより、ユーザーは現在の認証状態に応じた適切なインターフェースを操作できる。見た目のスタイリングにはTailwindCSSを活用し、簡潔なHTMLクラスを追加するだけで、レスポンシブで使いやすいデザインを実現する。

また、アプリケーションが起動した際に、以前のユーザーセッション情報が残っているかを確認し、自動的にログイン状態を復元する処理を追加する。これは、ユーザーが一度ログインした後も、再度ログイン情報を入力することなく利用を続けられるようにするためである。ReactのuseEffectフックを使用し、コンポーネントが最初にマウントされた際に一度だけsupabase.auth.getSession()メソッドを呼び出し、現在の認証セッションの情報を取得して、アプリケーションのユーザー状態を更新する。

このように、SupabaseをReactとTypeScriptプロジェクトに統合することで、サインアップ、ログイン、ログアウトといった基本的なユーザー認証システムを、最小限のコードと高い効率性で構築できる。これは、あらゆるウェブアプリケーションにとって不可欠な機能であり、Supabaseの活用により、開発者はバックエンドの複雑な管理から解放され、アプリケーションの主要な機能やユーザー体験の向上に集中できるだろう。構築されたこの認証システムは、今後のアプリケーション開発における堅固な基盤となる。