Next.js 認証

Next.js 15 では、特に高度なサーバー コンポーネント、アクション API、およびミドルウェア機能により、認証の処理がより堅牢かつ柔軟になりました。この記事では、Next.js 15 アプリケーションに認証を実装するためのベスト プラクティスを探り、サーバー コンポーネント、ミドルウェア、アクション、セッション管理などの重要なトピックを取り上げます。

目次

1. Next.js 15 の認証の概要
2. 認証の設定
3. 認証にサーバー コンポーネントを使用する
4. アクションによる認証の処理
5. 認証ガード用のミドルウェアの実装
6. セッション管理とセキュリティのベストプラクティス
7. 結論

---

Next.js 15 の認証の概要

Next.js 15 では、サーバー側のレンダリング機能が強化され、特にサーバー コンポーネントとアクション API のコンテキストで認証を処理するための新しいツールが導入されています。サーバー コンポーネントを使用すると、機密データをクライアントに公開することなくサーバー上で認証を安全に管理でき、アクション API によりシームレスなサーバー通信が可能になります。ミドルウェアは、ルートを保護し、ユーザーの権限を動的にチェックするのに役立ち、認証フローをより安全でユーザーフレンドリーなものにします。

---

認証の設定

まず、アプリに適した認証戦略を選択します。一般的なアプローチには次のようなものがあります:

• JWT (JSON Web Tokens): トークンがクライアントに保存されるステートレス アプリに最適です。
• セッションベースの認証: サーバー上にセッション ストレージがあるアプリに適しています。
• OAuth: サードパーティプロバイダー (Google、GitHub など) との統合用。

1. 認証用に next-auth をインストールする

OAuth を必要とするアプリケーションの場合、Next.js は next-auth と適切に統合され、セッションとトークンの管理が簡素化されます。

npm install next-auth

Next.js 15 セットアップで /app/api/auth/[...nextauth]/route.ts を使用して構成します:

// /app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
};

export default NextAuth(authOptions);

認証にサーバーコンポーネントを使用する

Next.js 15 では、サーバー コンポーネントを使用してサーバー上でコンポーネントをレンダリングし、データへのアクセスを安全に制御できます。

1. サーバー コンポーネントでのユーザー セッションの取得: これにより、クライアント側の状態への依存が軽減され、クライアントでの機密データの公開が回避されます。ユーザー セッション データをサーバー コンポーネントで直接取得できます。

2. サーバーコンポーネントでのサーバー側認証チェックの例:
   

   // /app/dashboard/page.tsx
   import { getServerSession } from "next-auth/next";
   import { authOptions } from "../api/auth/[...nextauth]/route";
   import { redirect } from "next/navigation";

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

     if (!session) {
       redirect("/auth/signin");
     }

     return (
       <div>
         <h1>Welcome, {session.user?.name}</h1>
       </div>
     );
   }

ここで、getServerSession はユーザーのセッション データをサーバー上で安全に取得します。有効なセッションがない場合、リダイレクト機能によりユーザーはログイン ページに送信されます。

アクションによる認証の処理

Next.js 15 の Actions API は、クライアントから直接サーバー関数と対話する方法を提供します。これは、ログイン、ログアウト、登録アクションに特に役立ちます。

例: ログインアクションの作成

npm install next-auth

コンポーネントでのログインアクションの使用法

// /app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
};

export default NextAuth(authOptions);

loginAction はサーバー アクションとして安全に定義されており、クライアントは機密データを公開することなくそれをトリガーできます。

認証ガード用のミドルウェアの実装

Next.js 15 のミドルウェアは、ページを読み込む前にサーバー上の認証ステータスを確認することでルートを保護する強力な方法を提供します。

ルート保護用のミドルウェア例

/dashboard や /profile などのページを保護するには、middleware.ts にミドルウェアを作成します。

   // /app/dashboard/page.tsx
   import { getServerSession } from "next-auth/next";
   import { authOptions } from "../api/auth/[...nextauth]/route";
   import { redirect } from "next/navigation";

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

     if (!session) {
       redirect("/auth/signin");
     }

     return (
       <div>
         <h1>Welcome, {session.user?.name}</h1>
       </div>
     );
   }

セッション管理とセキュリティのベスト プラクティス

安全なセッションを維持し、ユーザー データを保護することは、どの認証フローにおいても重要です。

1. トークンストレージに HTTP のみの Cookie を使用する:

   • JWT を localStorage または sessionStorage に保存しないでください。 XSS 攻撃を防ぐには、HTTP のみの Cookie を使用します。

2. セッションの有効期限とリフレッシュ トークン:

   • 有効期間の短いアクセス トークンとリフレッシュ トークンを実装して、セッションの安全性を確保します。これには next-auth のセッション管理機能を使用できます。

3. ロールベースのアクセス制御 (RBAC):

   • ユーザーに役割を割り当て、その役割に基づいてアクションを承認します。 next-auth では、これはセッション オブジェクトを使用するか、ミドルウェアとアクションを通じて実行できます。

4. クロスサイト リクエスト フォージェリ (CSRF) 保護:

   • CSRF 保護を使用して、悪意のあるサイトからの不正なリクエストを防ぎます。 next-auth にはデフォルトで CSRF 保護が含まれています。

5. 安全なヘッダーと HTTPS:

   • 常に HTTPS 経由でアプリケーションを提供し、Content-Security-Policy、Strict-Transport-Security、X-Frame-Options などの安全なヘッダーを設定します。

結論

Next.js 15 は、認証を安全に管理するための堅牢なツールとコンポーネントを提供します。サーバー コンポーネント、アクション、ミドルウェアを活用することで、機密データがサーバー上で確実に保護され、クライアントに情報が公開されるリスクが軽減されます。

以上がNext.js 認証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。