Next.js でユーザー認証を実装する際、最近は **Magic Link** と **OAuth** が主流です。どちらもパスワードレスで安全性が高い点は共通していますが、プロジェクトの要件や開発リソースによって選択が変わります。ここでは初心者向けに、選択の判断材料と簡単な実装例を紹介します。
## 1. ユースケースで比較する
| 項目 | Magic Link | OAuth |
|------|------------|-------|
| **利用シーン** | メールアドレスだけで完結させたいとき | Google・GitHub など外部アカウントでログインさせたいとき |
| **ユーザー体験** | メール受信 → リンククリックだけ | 外部サービスの認可画面が表示される |
| **実装コスト** | メール送信設定とトークン管理が必要 | `next-auth` などのライブラリでほぼ自動化 |
| **運用負荷** | メール配信の信頼性が鍵 | 外部プロバイダーの変更に追随する必要あり |
| **セキュリティ** | トークンの有効期限や再利用防止が重要 | OAuth のフロー自体が安全設計 |
### 1‑1. Magic Link が向いているケース
- 社内ツールや B2B SaaS で、社内メールアドレスだけを許可したい。
- ユーザーがパスワード管理に不安を抱えている場合。
- メール送信サービス（SendGrid, Mailgun 等）をすでに導入済み。
### 1‑2. OAuth が向いているケース
- SNS 連携でユーザー獲得を加速したい。
- Google Workspace や Azure AD など、組織の ID プロバイダーを統合したい。
- 多様な認証手段（Google, GitHub, Apple 等）を一括で提供したい。
## 2. Next.js でのシンプル実装例
以下は `next-auth` を使って Magic Link と Google OAuth を同時に設定する例です。`pages/api/auth/[...nextauth].ts` に配置します。
```ts
import NextAuth from "next-auth";
import EmailProvider from "next-auth/providers/email";
import GoogleProvider from "next-auth/providers/google";
export default NextAuth({
// 1️⃣ 共通設定
session: { strategy: "jwt" },
secret: process.env.NEXTAUTH_SECRET,
// 2️⃣ Magic Link 用 Email Provider
providers: [
EmailProvider({
server: {
host: process.env.EMAIL_SERVER_HOST,
port: Number(process.env.EMAIL_SERVER_PORT),
auth: {
user: process.env.EMAIL_SERVER_USER,
pass: process.env.EMAIL_SERVER_PASSWORD,
},
},
from: process.env.EMAIL_FROM,
}),
// 3️⃣ Google OAuth
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
// 4️⃣ コールバックでユーザー情報を整形
callbacks: {
async session({ session, token }) {
session.user.id = token.sub;
return session;
},
},
});
- メール設定: 環境変数に SMTP サーバ情報を入れるだけで、Magic Link のメール送信が可能です。
- OAuth 設定: Google のクライアント ID/Secret を取得し、環境変数に設定すれば完了です。
3. 判断材料のまとめ
-
ユーザー層
社内限定なら Magic Link、外部ユーザーが多いなら OAuth が自然です。 -
開発リソース
メール送信のインフラが整っていれば Magic Link、すでにnext-authを導入しているなら OAuth が楽です。 -
将来の拡張性
後から別のプロバイダーを増やす可能性があるなら、最初からnext-authのマルチプロバイダー構成にしておくと移行が楽です。 -
コスト
メール配信は送信数に応じた課金が発生することが多いです。一方、OAuth は基本無料ですが、利用制限やプライバシーポリシーの確認が必要です。
4. 次のステップ
-
ローカルで動かす:
npm install next-auth @next-auth/prisma-adapterでパッケージをインストールし、.env.localに上記環境変数を設定してnpm run dev。 - 本番環境: Vercel の環境変数画面に同じキーを追加し、メール送信サービスと Google の OAuth コンソールでリダイレクト URI を Vercel の URL に合わせます。