Web制作 約10分で読めます
Astro Middleware で認証・ログイン処理を実装する完全ガイド【2026年最新】
Astro 5.1の最新Middleware APIを使った認証実装を解説。セッション管理、JWTトークン検証、保護ルート設定の実践コードを紹介します。
Astro Middleware で認証を実装すべき理由
静的サイトジェネレーター（SSG）として人気のAstroですが、2026年4月現在のバージョン5.1では、サーバーサイドレンダリング（SSR）とハイブリッドモードが大幅に強化され、Middleware APIによる認証処理が公式に推奨される実装パターンになりました。
従来のクライアントサイドのみの認証では、トークンがJavaScriptで露出しXSS攻撃のリスクがありました。Astro 5.1のMiddleware APIを使えば、リクエスト処理の最初の段階でサーバーサイドで認証を行い、未認証ユーザーを確実にブロックできます。
この記事では、2026年3月21日にリリースされたAstro 5.1の最新Middleware機能を使い、実際に動作する認証システムを段階的に構築します。セッション管理、JWTトークン検証、保護ルート設定、ログアウト処理まで、実践的なコード例とともに解説します。
Astro 5.1 Middleware API の新機能と仕様
Astro 5.1（2026年3月21日リリース）では、Middleware APIに以下の重要な改善が加わりました。
主要な変更点
defineMiddleware()ヘルパー関数の追加: 型安全性が向上し、TypeScriptでの開発体験が改善context.localsの型推論強化: カスタム型定義が不要になり、認証情報の受け渡しが簡潔に- エラーハンドリングの統一:
Response.redirect()とnew Response()の両方に対応した一貫したエラー処理 - パフォーマンス最適化: Middleware実行時のオーバーヘッドを約30%削減（公式ブログより）
これらの機能により、認証Middlewareの実装がより安全で保守しやすくなりました。
Middleware実行フロー
Astroの認証処理フローは以下のようになります。
flowchart TD
A["ブラウザからリクエスト"] --> B["Middleware実行"]
B --> C{"認証トークン<br/>存在?"}
C -->|なし| D["401エラーまたは<br/>ログインページへリダイレクト"]
C -->|あり| E["トークン検証"]
E --> F{"トークン<br/>有効?"}
F -->|無効| D
F -->|有効| G["context.localsに<br/>ユーザー情報を格納"]
G --> H["保護されたページを<br/>レンダリング"]
H --> I["ブラウザにレスポンス"]Middlewareは src/middleware.ts または src/middleware.js に配置し、すべてのリクエストに対して実行されます。
JWT トークンベース認証の実装手順
ここでは、JWTトークンを使った認証システムを構築します。JWTはステートレスで、サーバー側でセッション情報を保持する必要がないため、スケーラブルな認証方式として広く採用されています。
ステップ1: 必要なパッケージのインストール
npm install jsonwebtoken jose
npm install -D @types/jsonwebtokenjose: Web標準に準拠した最新のJWTライブラリ（2026年推奨）jsonwebtoken: 従来のNode.js向けJWTライブラリ（レガシーサポート用）
Astro 5.1では、Edge Runtime互換性のため jose の使用が推奨されています。
ステップ2: 環境変数の設定
.env ファイルに秘密鍵を設定します。
# .env
JWT_SECRET=your-super-secret-key-change-this-in-production重要: 本番環境では、最低32文字のランダム文字列を使用してください。以下のコマンドで生成できます。
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"ステップ3: Middleware の実装
src/middleware.ts を作成します。
import { defineMiddleware } from 'astro:middleware';
import { jwtVerify } from 'jose';
const JWT_SECRET = new TextEncoder().encode(
import.meta.env.JWT_SECRET || 'fallback-secret-for-dev-only'
);
// 認証が不要なパス（ログインページなど）
const PUBLIC_PATHS = ['/login', '/register', '/api/auth/login', '/'];
export const onRequest = defineMiddleware(async (context, next) => {
const { url, cookies, locals, redirect } = context;
const pathname = new URL(url).pathname;
// 公開パスは認証スキップ
if (PUBLIC_PATHS.some(path => pathname.startsWith(path))) {
return next();
}
// クッキーからJWTトークンを取得
const token = cookies.get('auth_token')?.value;
if (!token) {
// 未認証の場合はログインページへリダイレクト
return redirect('/login', 302);
}
try {
// JWTトークンを検証
const { payload } = await jwtVerify(token, JWT_SECRET);
// 検証成功: ユーザー情報を context.locals に格納
locals.user = {
id: payload.sub as string,
email: payload.email as string,
role: payload.role as string,
};
return next();
} catch (error) {
// トークンが無効または期限切れ
console.error('JWT verification failed:', error);
// 無効なトークンを削除
cookies.delete('auth_token', { path: '/' });
return redirect('/login', 302);
}
});コードのポイント:
defineMiddleware(): Astro 5.1で追加された型安全なMiddleware定義関数context.locals: ページコンポーネントからアクセス可能なリクエストスコープのデータストアjwtVerify():joseライブラリの検証関数（非同期、Edge Runtime対応）- PUBLIC_PATHS: 認証不要なパスのホワイトリスト
ステップ4: 型定義の追加（TypeScript）
src/env.d.ts にユーザー情報の型を追加します。
/// <reference types="astro/client" />
declare namespace App {
interface Locals {
user?: {
id: string;
email: string;
role: string;
};
}
}これにより、ページコンポーネントで Astro.locals.user の型推論が効くようになります。
ログインAPIエンドポイントの実装
認証Middlewareが動作するには、ログイン処理でJWTトークンを発行するAPIが必要です。
ステップ5: ログインエンドポイントの作成
src/pages/api/auth/login.ts を作成します。
import type { APIRoute } from 'astro';
import { SignJWT } from 'jose';
const JWT_SECRET = new TextEncoder().encode(
import.meta.env.JWT_SECRET || 'fallback-secret-for-dev-only'
);
export const POST: APIRoute = async ({ request, cookies }) => {
try {
const body = await request.json();
const { email, password } = body;
// ユーザー認証処理（実際にはDBと照合）
// ここではデモ用のハードコードされた認証
if (email === 'user@example.com' && password === 'password123') {
// JWTトークンの生成
const token = await new SignJWT({
email,
role: 'user',
})
.setProtectedHeader({ alg: 'HS256' })
.setSubject('user-id-12345') // ユーザーIDをsubに設定
.setIssuedAt()
.setExpirationTime('7d') // 有効期限7日
.sign(JWT_SECRET);
// HttpOnly Cookie にトークンを保存
cookies.set('auth_token', token, {
httpOnly: true,
secure: import.meta.env.PROD, // 本番環境のみHTTPSを強制
sameSite: 'lax',
maxAge: 60 * 60 * 24 * 7, // 7日（秒単位）
path: '/',
});
return new Response(
JSON.stringify({ success: true, message: 'ログイン成功' }),
{ status: 200, headers: { 'Content-Type': 'application/json' } }
);
} else {
return new Response(
JSON.stringify({ success: false, message: '認証に失敗しました' }),
{ status: 401, headers: { 'Content-Type': 'application/json' } }
);
}
} catch (error) {
return new Response(
JSON.stringify({ success: false, message: 'サーバーエラー' }),
{ status: 500, headers: { 'Content-Type': 'application/json' } }
);
}
};セキュリティのポイント:
httpOnly: true: JavaScriptからクッキーにアクセスできないようにしXSS攻撃を防ぐsecure: true: 本番環境ではHTTPS通信のみでクッキーを送信sameSite: 'lax': CSRF攻撃を軽減（strictでも可）- トークン有効期限: 7日に設定（要件に応じて調整）
ステップ6: ログインフォームの作成
src/pages/login.astro を作成します。
---
// ログイン済みの場合はダッシュボードへリダイレクト
if (Astro.locals.user) {
return Astro.redirect('/dashboard');
}
---
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ログイン</title>
</head>
<body>
<h1>ログイン</h1>
<form id="login-form">
<label>
メールアドレス:
<input type="email" name="email" required />
</label>
<label>
パスワード:
<input type="password" name="password" required />
</label>
<button type="submit">ログイン</button>
</form>
<div id="message"></div>
<script>
const form = document.getElementById('login-form') as HTMLFormElement;
const messageDiv = document.getElementById('message') as HTMLDivElement;
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
const email = formData.get('email') as string;
const password = formData.get('password') as string;
try {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password }),
});
const data = await response.json();
if (data.success) {
messageDiv.textContent = 'ログイン成功！リダイレクト中...';
messageDiv.style.color = 'green';
setTimeout(() => {
window.location.href = '/dashboard';
}, 1000);
} else {
messageDiv.textContent = data.message || 'ログインに失敗しました';
messageDiv.style.color = 'red';
}
} catch (error) {
messageDiv.textContent = 'エラーが発生しました';
messageDiv.style.color = 'red';
}
});
</script>
</body>
</html>保護されたページの実装とユーザー情報の取得
認証が必要なページでは、Astro.locals.user からユーザー情報を取得できます。
ステップ7: ダッシュボードページの作成
src/pages/dashboard.astro を作成します。
---
const user = Astro.locals.user;
// Middlewareで認証済みなので、userは必ず存在する
// TypeScript の型安全性のための追加チェック
if (!user) {
return Astro.redirect('/login');
}
---
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ダッシュボード</title>
</head>
<body>
<h1>ダッシュボード</h1>
<p>ようこそ、{user.email} さん</p>
<p>ユーザーID: {user.id}</p>
<p>ロール: {user.role}</p>
<form action="/api/auth/logout" method="POST">
<button type="submit">ログアウト</button>
</form>
</body>
</html>ステップ8: ログアウトAPIの実装
src/pages/api/auth/logout.ts を作成します。
import type { APIRoute } from 'astro';
export const POST: APIRoute = async ({ cookies, redirect }) => {
// auth_token クッキーを削除
cookies.delete('auth_token', { path: '/' });
// ログインページへリダイレクト
return redirect('/login', 302);
};ロールベースのアクセス制御（RBAC）の実装
より高度な認証システムでは、ユーザーのロール（役割）に応じてアクセス制御を行います。
ステップ9: ロールチェック用のMiddleware拡張
src/middleware.ts を以下のように拡張します。
import { defineMiddleware } from 'astro:middleware';
import { jwtVerify } from 'jose';
const JWT_SECRET = new TextEncoder().encode(
import.meta.env.JWT_SECRET || 'fallback-secret-for-dev-only'
);
const PUBLIC_PATHS = ['/login', '/register', '/api/auth/login', '/'];
// 管理者のみアクセス可能なパス
const ADMIN_ONLY_PATHS = ['/admin'];
export const onRequest = defineMiddleware(async (context, next) => {
const { url, cookies, locals, redirect } = context;
const pathname = new URL(url).pathname;
if (PUBLIC_PATHS.some(path => pathname.startsWith(path))) {
return next();
}
const token = cookies.get('auth_token')?.value;
if (!token) {
return redirect('/login', 302);
}
try {
const { payload } = await jwtVerify(token, JWT_SECRET);
locals.user = {
id: payload.sub as string,
email: payload.email as string,
role: payload.role as string,
};
// ロールベースのアクセス制御
if (ADMIN_ONLY_PATHS.some(path => pathname.startsWith(path))) {
if (locals.user.role !== 'admin') {
// 管理者以外は403エラー
return new Response('Forbidden: 管理者権限が必要です', {
status: 403,
});
}
}
return next();
} catch (error) {
console.error('JWT verification failed:', error);
cookies.delete('auth_token', { path: '/' });
return redirect('/login', 302);
}
});これにより、/admin 配下のページは role: 'admin' のユーザーのみアクセス可能になります。
セキュリティのベストプラクティス
Astro Middlewareで認証を実装する際の重要なセキュリティ対策を以下にまとめます。
トークンのリフレッシュ戦略
長期間有効なトークンはセキュリティリスクになります。以下の戦略を検討してください。
sequenceDiagram
participant ブラウザ
participant Middleware
participant APIエンドポイント
participant DB
ブラウザ->>APIエンドポイント: POST /api/auth/login
APIエンドポイント->>DB: ユーザー認証
DB-->>APIエンドポイント: 認証成功
APIエンドポイント->>APIエンドポイント: Access Token生成（短期・15分）
APIエンドポイント->>APIエンドポイント: Refresh Token生成（長期・7日）
APIエンドポイント-->>ブラウザ: Access Token（Cookie）<br/>Refresh Token（Cookie）
ブラウザ->>Middleware: ページリクエスト + Access Token
Middleware->>Middleware: Access Token検証
Middleware-->>ブラウザ: 保護されたページ
Note over ブラウザ,Middleware: 15分後、Access Token期限切れ
ブラウザ->>APIエンドポイント: POST /api/auth/refresh<br/>+ Refresh Token
APIエンドポイント->>DB: Refresh Token検証
DB-->>APIエンドポイント: 検証成功
APIエンドポイント->>APIエンドポイント: 新しいAccess Token生成
APIエンドポイント-->>ブラウザ: 新しいAccess Token（Cookie）推奨設定:
- Access Token: 15分〜1時間（短期）
- Refresh Token: 7日〜30日（長期、HttpOnlyクッキーで保存）
CSRF対策
Astro 5.1では、astro:middleware に組み込みのCSRF保護は含まれていません。以下のいずれかの方法で対策してください。
- SameSite クッキー属性:
sameSite: 'lax'または'strict'を設定 - CSRFトークン: フォームに一時トークンを埋め込み、サーバーで検証
- カスタムヘッダー:
X-Requested-With: XMLHttpRequestなど
レート制限
ブルートフォース攻撃を防ぐため、ログインエンドポイントにレート制限を実装してください。
npm install @upstash/ratelimit @upstash/redissrc/pages/api/auth/login.ts に追加:
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';
const ratelimit = new Ratelimit({
redis: Redis.fromEnv(),
limiter: Ratelimit.slidingWindow(5, '1 m'), // 1分間に5回まで
});
export const POST: APIRoute = async ({ request, cookies, clientAddress }) => {
const identifier = clientAddress || 'unknown';
const { success } = await ratelimit.limit(identifier);
if (!success) {
return new Response(
JSON.stringify({ success: false, message: 'リクエストが多すぎます' }),
{ status: 429, headers: { 'Content-Type': 'application/json' } }
);
}
// 以降、通常のログイン処理
};まとめ
本記事では、Astro 5.1（2026年3月21日リリース）の最新Middleware APIを使った認証システムの実装方法を解説しました。
要点:
- Astro 5.1の
defineMiddleware()でJWT認証を実装 - HttpOnlyクッキーでトークンを安全に保存しXSS攻撃を防ぐ
context.localsでページコンポーネントにユーザー情報を渡す- ロールベースアクセス制御（RBAC）で柔軟な権限管理
- レート制限・CSRF対策・トークンリフレッシュでセキュリティを強化
Astro Middlewareは、サーバーサイドで認証を一元管理できる強力な機能です。本記事のコード例をベースに、データベース連携やOAuth認証などを追加すれば、本格的な認証システムを構築できます。