【ITニュース解説】Full-Stack Authentication Demystified — A Step-by-Step Guide with React, Node.js, and Supabase

現代のウェブアプリケーションにおいて「認証」は、基盤となる不可欠な要素である。ユーザーが「自分は誰である」と証明するこのプロセスは、ソーシャルメディアへのログインからオンラインバンキングのセキュリティまで、あらゆる機能の根幹をなしている。しかし、トークン、セッション、サーバー間通信といった要素が絡み合うため、多くの開発者にとってその仕組みは複雑なパズルのように感じられることがある。この記事は、その複雑なパズルを解き明かし、React、Node.js、Supabaseという最新の技術スタックを用いて、セキュアな認証システムをゼロから構築する手順を解説している。単にコードの書き方を示すだけでなく、その背後にある基礎概念、それらがなぜ使われるのか、どのように連携するのかを深く理解することを目的としている。

まず、認証システムの根幹をなす四つの重要なセキュリティ概念について説明する。一つ目は「認証（Authentication）」である。これは、ユーザーが主張する身元を検証するプロセスを指す。例えば、メールアカウントへのパスワードによるログイン、スマートフォンの指紋認証、二段階認証コードの入力などがこれにあたる。ユーザーの身元を証明する行為そのものである。二つ目は「認可（Authorization）」である。これは、認証が成功した後に、特定のユーザーが何をする権限を持っているかを検証するプロセスである。例えば、ブログの一般ユーザーはコメントを閲覧できるが、管理者ユーザーはコメントを削除できるといった、機能へのアクセスレベルを制御する。自分のプロフィールは閲覧・編集できるが、他人のプロフィールは編集できないといった場合も認可の例である。

三つ目は「セッション」である。これは、サーバーが認証済みユーザーの状態を記憶するための仕組みである。ユーザーが一度ログインすると、サーバーはユニークなセッションIDを生成し、それを自身のデータベースやメモリに保存する。同時に、そのセッションIDをブラウザのクッキーとしてユーザーに送信する。以降、ユーザーがウェブサイトにリクエストを送るたびに、ブラウザはこのクッキーをサーバーに送り戻し、サーバーはセッションIDを検索してユーザーを識別する。これはサーバーがユーザーの状態を記憶している「ステートフル」な方式である。伝統的なウェブサイトやサーバーサイドレンダリングが主流のアプリケーションでよく用いられる。

四つ目は「JSON Web Tokens（JWTs）」である。これはセッションとは異なり、ステートレスでセキュアな「自己完結型パス」である。ユーザーがログインすると、サーバーはユーザーIDなどの身元情報を含む暗号化された文字列（JWT）を生成し、それをクライアントに渡す。クライアントはこのJWTを保持し、その後のリクエストでサーバーに提示する。サーバーはJWTが本物であるかを自身で検証できるため、セッションのように自身のデータベースを検索する必要がない。これにより、サーバーはユーザーの状態を記憶する必要がない「ステートレス」な通信が可能となる。React、Vue、Angularといったシングルページアプリケーション（SPA）やモバイルアプリケーション、マイクロサービス間通信といったモダンな環境で広く利用されている。

次に、これらの概念を実現するために使用する技術スタックと、それらがどのような役割を果たすかを説明する。フロントエンドは「React」で構築し、ユーザーインターフェースの表示やユーザーからの入力（メールアドレスやパスワード）を受け取る役割を担う。バックエンドは「Node.js」と「Express」で構築し、フロントエンドからのリクエストを受け付け、処理し、結果を返すAPIサーバーとして機能する。そして「Supabase」は、認証の中心的な役割を担うサービスである。ユーザーデータベースをセキュアに管理し、ユーザー資格情報の検証、そして認証成功時のJWTの生成などを行う。

具体的な実装手順について解説する。まずSupabaseのセットアップから始める。supabase.comで新しいプロジェクトを作成し、プロジェクト設定からAPIのURLと公開APIキーを取得する。これらはバックエンドからSupabaseと連携するために必要となる情報である。次に、Node.js/Expressを使ったバックエンドAPIを構築する。まず、SupabaseのAPIキーを環境変数ファイル（.env）に設定する。そして、index.jsファイルにて、Expressアプリケーションを初期化し、Supabaseクライアントを作成する。フロントエンドからのリクエストを許可するためのCORSミドルウェアと、リクエストボディのJSONを解析するためのミドルウェアを適用する。その後、ユーザー登録（/api/auth/signup）とログイン（/api/auth/login）の二つの認証エンドポイントを定義する。これらのエンドポイントでは、リクエストからメールアドレスとパスワードを受け取り、Supabaseクライアントのsupabase.auth.signUpまたはsupabase.auth.signInWithPasswordメソッドを呼び出すことで、ユーザーの登録と認証処理をSupabaseに依頼する。成功すればユーザー情報またはセッション情報をフロントエンドに返し、失敗すればエラーを返す。

最後に、Reactを使ったフロントエンドUIを構築する。App.jsコンポーネントでは、ログインセッションの状態を管理する。セッション情報がない場合はログイン・登録フォームを表示し、セッション情報がある場合はログイン済みのユーザー向けコンテンツとログアウトボタンを表示するように切り替える。ログイン成功時にはApp.jsの状態を更新するために、コールバック関数を子コンポーネントに渡す。Auth.jsコンポーネントでは、メールアドレスとパスワードの入力フィールドと、ログイン・登録ボタンを配置する。ユーザーがボタンをクリックすると、handleAuth関数が実行される。この関数は、入力されたメールアドレスとパスワードをJSON形式で整形し、fetch APIを使って、先ほど構築したNode.jsバックエンドの認証エンドポイントにPOSTリクエストを送信する。バックエンドからの応答を受け取り、ログイン成功時には親コンポーネントのコールバック関数を呼び出してセッション情報を渡し、UIの切り替えを促す。エラーが発生した場合はエラーメッセージを表示する。

これらのステップを通じて、ユーザーがReactアプリケーションでログインボタンをクリックした際のリクエストの流れを追跡する。フロントエンドはバックエンドの/api/auth/loginエンドポイントにPOSTリクエストを送信する。バックエンドはリクエストを受信し、Supabaseにメールアドレスとパスワードの検証を依頼する。Supabaseは資格情報が正しいことを確認すると、ユーザーのデータと新しいJWTを含むセッションオブジェクトをバックエンドに返す。バックエンドはこのセッションオブジェクトをフロントエンドに送信し、フロントエンドはセッションデータを受け取ってApp.jsの状態を更新する。Reactは自動的に画面を再描画し、ログインフォームの代わりに「Welcome!」メッセージが表示されることで、ユーザーはログインが成功したことを視覚的に確認できる。

このようにして、完全でセキュアな認証システムを構築することができた。認証と認可の違い、ステートレスなJWTの強力さ、そしてフロントエンド、バックエンド、認証サービスがどのように連携して機能するかのデータフローを理解できたはずである。次のステップとしては、ログイン後にフロントエンドに保持されたJWTを利用して、保護されたAPIエンドポイントへのアクセスを制御する「認可」の仕組みを実装することが考えられる。具体的には、APIリクエストのヘッダーにJWTを含め、バックエンドでそのJWTを検証するミドルウェアを構築することで、認証済みユーザーのみが特定のデータにアクセスできるようにする。これは、本システムをさらに堅牢にするための重要なステップである。