モダンWebアプリケーションにおける認証入門：安全なアクセスを実現する技術 | First byte Blog

モダン Web アプリケーションにおける認証入門：安全なアクセスを実現する技術

現代の Web アプリケーションにおいて、ユーザー認証は不可欠な要素です。ユーザーアカウントの保護、パーソナライズされた体験の提供、そして機密データへのアクセス制御など、認証は多くの機能の基盤となります。しかし、認証の実装は複雑で、セキュリティリスクも伴います。

本記事では、モダン Web アプリケーションにおける認証の基本的な概念から、Next.js などのフレームワークで利用できる主要なライブラリ、そして実装上のベストプラクティスまでを解説します。

認証と認可の違い

まず、混同されがちな「認証」と「認可」の違いを明確にしておきましょう。

認証 (Authentication): ユーザーが「誰であるか」を確認するプロセスです。通常、ユーザー名とパスワード、あるいはソーシャルログインなどを通じて行われます。
認可 (Authorization): 認証されたユーザーが「何をする権限を持っているか」を決定するプロセスです。例えば、一般ユーザーは閲覧のみ、管理者は編集も可能、といった権限設定がこれにあたります。

主要な認証方式

1. セッションベース認証

仕組み: ユーザーがログインすると、サーバーはセッション ID を生成し、それを Cookie などに保存してクライアントに送り返します。クライアントは以降のリクエストでセッション ID を送信し、サーバーはそれを検証してユーザーを識別します。
長所: 実装が比較的容易。サーバー側でセッション状態を管理しやすい。
短所: スケーラビリティに課題が出やすい。ステートフルなため、サーバー負荷が増加する。

2. トークンベース認証 (JWT: JSON Web Token)

仕組み: ユーザーがログインすると、サーバーはユーザー情報や権限情報を含む署名付きのトークン（JWT）を生成してクライアントに送り返します。クライアントはトークンをローカル（LocalStorage や SessionStorage など）に保存し、リクエスト時に Authorization ヘッダーなどで送信します。サーバーはトークンの署名を検証するだけでユーザーを認証できます。
長所: ステートレスであり、スケーラビリティが高い。異なるドメイン間での認証（CORS）に適している。
短所: トークンの失効管理がやや複雑。トークン内に情報を持つため、機密情報の扱いに注意が必要。

// JWTのペイロード例
{
  "sub": "user123",
  "name": "Taro Yamada",
  "iat": 1516239022,
  "exp": 1516242622,
  "roles": ["user", "editor"]
}

3. OAuth 2.0 と OpenID Connect (OIDC)

仕組み: 主にサードパーティアプリケーションへのアクセス権限をユーザーが委譲するためのフレームワーク（認可の仕組み）。Google、Facebook、GitHub などのアカウントを使った「ソーシャルログイン」で広く使われています。OpenID Connect は OAuth 2.0 を拡張し、認証機能を追加したものです。
長所: ユーザーは新しいパスワードを作成・記憶する必要がない。信頼できるプロバイダーを利用することでセキュリティを高められる。
短所: プロトコルの理解と実装が複雑になる場合がある。

モダンな認証ライブラリ/ソリューション

フロントエンドフレームワーク、特に Next.js などと組み合わせて利用されることが多いライブラリを紹介します。

1. NextAuth.js (Auth.js)

概要: Next.js アプリケーションのための完全な認証ソリューション。現在は Auth.js として、他のフレームワークもサポートしています。
特徴: 様々な認証プロバイダー（Email/Password、OAuth、Magic Link など）を簡単に統合。セッション管理、JWT サポート、CSRF 保護などを提供。
実装例 (Next.js App Router):

  // src/app/api/auth/[...nextauth]/route.ts
  import NextAuth from "next-auth";
  import GithubProvider from "next-auth/providers/github";
  import CredentialsProvider from "next-auth/providers/credentials";

  export const authOptions = {
    providers: [
      GithubProvider({
        clientId: process.env.GITHUB_ID!,
        clientSecret: process.env.GITHUB_SECRET!,
      }),
      CredentialsProvider({
        name: "Credentials",
        credentials: {
          username: { label: "Username", type: "text" },
          password: { label: "Password", type: "password" },
        },
        async authorize(credentials, req) {
          // ここでユーザー名とパスワードを検証
          const user = {
            id: "1",
            name: "J Smith",
            email: "jsmith@example.com",
          }; // ダミー
          if (user) {
            return user;
          } else {
            return null;
          }
        },
      }),
    ],
    // 他のオプション: session, jwt, callbacks など
  };

  const handler = NextAuth(authOptions);
  export { handler as GET, handler as POST };

  // コンポーネントでのセッション利用例
  import { getServerSession } from "next-auth/next";
  import { authOptions } from "@/app/api/auth/[...nextauth]/route";

  export default async function UserProfile() {
    const session = await getServerSession(authOptions);

    if (!session) {
      return <p>ログインしていません</p>;
    }

    return <p>ようこそ、{session.user?.name}さん</p>;
  }

2. Supabase Auth

概要: オープンソースの Firebase 代替である Supabase が提供する認証サービス。
特徴: Email/Password、ソーシャルログイン、Magic Link、電話番号認証などをサポート。Row Level Security (RLS) と連携してデータベースアクセスを制御可能。
実装例 (クライアントサイド):

  import { createClient } from "@supabase/supabase-js";

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
  const supabase = createClient(supabaseUrl, supabaseAnonKey);

  async function signInWithGithub() {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "github",
    });
    if (error) console.error("Error signing in:", error);
  }

  async function signUp(email, password) {
    const { data, error } = await supabase.auth.signUp({
      email: email,
      password: password,
    });
    if (error) console.error("Error signing up:", error);
    return data;
  }

  async function signOut() {
    const { error } = await supabase.auth.signOut();
    if (error) console.error("Error signing out:", error);
  }