はじめに
受託開発やSaaS開発で認証設計は避けて通れません。むしろ「認証をどう作るか」で保守性・安全性・運用負荷が大きく左右されます。
この記事では、Next.js案件で実務によく使われる認証設計パターンを、NextAuth.js・OAuth・JWTそれぞれの視点から整理します。
想定読者
- Next.js案件の認証設計に悩んでいる方
- SaaS開発で安全に認証設計したい方
- OAuth連携やセッション管理の実務Tipsが欲しい方
認証設計パターンの分類
| パターン | 主な用途 | 概要 |
|---|---|---|
| セッションCookie型 | SaaS・管理画面系 | 安定性重視・サーバーセッション管理 |
| JWTトークン型 | SPA・モバイルAPI | 完全API駆動型・ステートレス運用 |
| OAuth2型 | 外部サービス連携 | Google / GitHub等の外部ログイン |
| NextAuth.js | 上記の統合管理 | Next.js案件に最適化された認証フレームワーク |
1. NextAuth.jsの設計ポイント
Next.jsの認証実装で最も採用事例が増えているライブラリがNextAuth.jsです。
✅ 主な強み
- サーバーセッション管理が標準
- OAuthプロバイダ統合（Google, GitHub, LINE等）
- JWT運用もサポート
- Database連携も柔軟
- App Router構成にも正式対応（
next-auth@beta）
✅ 最小構成コード例
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!,
}),
],
session: { strategy: 'jwt' },
};
export default NextAuth(authOptions);
👉 SaaS案件でも中〜長期保守性が高い構成。
✅ App Router対応（最新版）
import NextAuth from 'next-auth';
import authConfig from './auth.config';
export const { handlers, auth } = NextAuth(authConfig);
2. OAuth2設計の実務ポイント
✅ 採用例
- Googleログイン
- LINEログイン（国内SaaSでも人気）
- GitHub/Slack連携
✅ 注意点
- Callback URLの管理 → 本番・開発環境で分ける
- スコープ最小化 → 最小限の権限だけ要求する
- 外部API変更の追従 → Provider依存管理が必要
✅ カスタムOAuth実装時の流れ
providers: [
OAuth2Provider({
clientId: 'xxx',
clientSecret: 'yyy',
authorization: 'https://provider.com/oauth2/authorize',
token: 'https://provider.com/oauth2/token',
userinfo: 'https://provider.com/oauth2/userinfo'
})
]
3. JWT型認証（API駆動型）
✅ 採用例
- モバイルAPI
- BFF構成
- GraphQLバックエンド
✅ 実務の注意点
- トークン署名はHS256/RSA256等を正しく選定
- RefreshToken運用必須（アクセストークン短命化）
- StorageはHttpOnly Cookie推奨（XSS耐性）
✅ JWT生成例
import jwt from 'jsonwebtoken';
const token = jwt.sign({ userId: 1 }, process.env.JWT_SECRET!, { expiresIn: '15m' });
✅ セキュリティポイント
- XSS対策：HttpOnly Cookie運用
- CSRF対策：SameSite設定＋CSRF Token併用
- Token失効制御：ブラックリスト運用or短命設計
4. 実務での選定ガイドライン
| 案件タイプ | 推奨パターン |
|---|---|
| SaaS管理画面 | NextAuth.js + サーバーセッション |
| 外部OAuth連携 | NextAuth.js + OAuth Providers |
| モバイルAPI | JWT型ステートレス認証 |
| BFF構成 | JWT + RefreshToken + API Gateway前段 |
👉 「何を作るか」に応じて使い分けるのがコツ
5. 認証設計で詰まりやすい落とし穴
❌ 認証情報をLocalStorageに保存
- XSS耐性が弱い
- HttpOnly Cookie利用が推奨
❌ RefreshToken運用を軽視
- 長期セッション維持に失敗しがち
- 正しいトークン更新フロー必須
❌ Provider別設定ミス
- OAuth Provider側の設定値間違いが頻出
- Redirect URIと一致させること
おわりに
認証設計は実務経験がものを言う重要分野です。
Next.js + NextAuth.js を中心に、正しいパターン整理ができると案件提案力・保守性・安全性が一気に上がります。
Qiitaでは今後もこういった実務提案に刺さるフロントエンド設計Tipsを発信していきますので、ぜひLGTM・フォローお願いします！