# インストール
npm install next-auth@beta @auth/prisma-adapter
npm install @prisma/client prisma bcrypt
npm install -D @types/bcrypt
 
# AUTH_SECRET の生成
npx auth secret
# または
openssl rand -base64 32

// auth.ts（認証設定のメインファイル）
import NextAuth from 'next-auth';
import Google from 'next-auth/providers/google';
import GitHub from 'next-auth/providers/github';
import Credentials from 'next-auth/providers/credentials';
import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';
import bcrypt from 'bcrypt';
import { z } from 'zod';
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  // データベースアダプター（ユーザー・アカウント・セッションの永続化）
  adapter: PrismaAdapter(prisma),
 
  // 認証プロバイダー
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    GitHub({
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }),
    Credentials({
      name: 'credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        // 入力バリデーション
        const parsed = z.object({
          email: z.string().email(),
          password: z.string().min(8),
        }).safeParse(credentials);
 
        if (!parsed.success) return null;
 
        // ユーザー検索
        const user = await prisma.user.findUnique({
          where: { email: parsed.data.email },
        });
 
        // パスワードが設定されていない場合（ソーシャルログインのみ）
        if (!user?.password) return null;
 
        // パスワード検証（bcrypt）
        const isValid = await bcrypt.compare(parsed.data.password, user.password);
        if (!isValid) return null;
 
        // 認証成功: ユーザーオブジェクトを返す
        return {
          id: user.id,
          email: user.email,
          name: user.name,
          image: user.image,
          role: user.role,
          orgId: user.orgId,
        };
      },
    }),
  ],
 
  // セッション設定
  session: {
    strategy: 'jwt',  // JWT セッション（Credentials 使用時は必須）
    maxAge: 30 * 24 * 60 * 60, // 30日（秒単位）
    updateAge: 24 * 60 * 60,   // 24時間ごとにセッション更新
  },
 
  // JWT 設定
  jwt: {
    maxAge: 30 * 24 * 60 * 60, // 30日
  },
 
  // カスタムページ
  pages: {
    signIn: '/login',       // ログインページ
    error: '/login',        // エラー時のリダイレクト先
    newUser: '/onboarding', // 新規ユーザーのリダイレクト先
    // signOut: '/logout',  // サインアウトページ（任意）
    // verifyRequest: '/verify', // メール検証ページ（任意）
  },
 
  // コールバック関数
  callbacks: {
    // JWT にカスタムデータを追加
    async jwt({ token, user, trigger, session, account }) {
      // 初回サインイン時（user が存在する）
      if (user) {
        token.role = user.role;
        token.orgId = user.orgId;
      }
 
      // プロバイダーの access_token を保存する場合
      if (account) {
        token.accessToken = account.access_token;
        token.refreshToken = account.refresh_token;
        token.accessTokenExpires = account.expires_at
          ? account.expires_at * 1000
          : undefined;
      }
 
      // セッション更新時（update() 呼び出し時）
      if (trigger === 'update' && session) {
        token.name = session.name;
        token.image = session.image;
      }
 
      return token;
    },
 
    // セッションにカスタムデータを公開
    async session({ session, token }) {
      session.user.id = token.sub!;
      session.user.role = token.role as string;
      session.user.orgId = token.orgId as string;
      return session;
    },
 
    // アクセス制御（middleware で使用）
    async authorized({ auth, request }) {
      const isLoggedIn = !!auth?.user;
      const { pathname } = request.nextUrl;
 
      // 保護ルートのチェック
      const protectedPaths = ['/dashboard', '/admin', '/settings'];
      const isProtected = protectedPaths.some(p => pathname.startsWith(p));
 
      if (isProtected && !isLoggedIn) {
        return false; // ログインページにリダイレクト
      }
 
      // 管理者ルートのチェック
      if (pathname.startsWith('/admin')) {
        return auth?.user?.role === 'admin';
      }
 
      return true;
    },
 
    // サインイン時の制御
    async signIn({ user, account, profile }) {
      // メール検証チェック（Google の場合）
      if (account?.provider === 'google') {
        return profile?.email_verified === true;
      }
 
      // ブロックされたユーザーのチェック
      if (user.id) {
        const dbUser = await prisma.user.findUnique({
          where: { id: user.id },
          select: { blockedAt: true },
        });
        if (dbUser?.blockedAt) {
          return false; // サインイン拒否
        }
      }
 
      return true;
    },
  },
 
  // イベントハンドラー
  events: {
    async signIn({ user, account, isNewUser }) {
      // ログイン監査ログ
      console.log(`User ${user.email} signed in via ${account?.provider}`);
 
      if (isNewUser) {
        // 新規ユーザーへのウェルカムメール送信
        // await sendWelcomeEmail(user.email!);
      }
 
      // 最終ログイン日時の更新
      if (user.id) {
        await prisma.user.update({
          where: { id: user.id },
          data: { lastLoginAt: new Date() },
        });
      }
    },
 
    async signOut(message) {
      // サインアウト監査ログ
      if ('token' in message) {
        console.log(`User ${message.token?.email} signed out`);
      }
    },
 
    async createUser({ user }) {
      // 新規ユーザー作成時の処理
      console.log(`New user created: ${user.email}`);
    },
  },
 
  // デバッグモード（開発時のみ）
  debug: process.env.NODE_ENV === 'development',
 
  // Cookie 設定のカスタマイズ
  cookies: {
    sessionToken: {
      name: process.env.NODE_ENV === 'production'
        ? '__Secure-authjs.session-token'
        : 'authjs.session-token',
      options: {
        httpOnly: true,
        sameSite: 'lax',
        path: '/',
        secure: process.env.NODE_ENV === 'production',
      },
    },
  },
});

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';
 
export const { GET, POST } = handlers;
 
// ※ Auth.js v5 では handlers を export するだけでよい
// GET: OAuth コールバック、CSRF トークン取得等
// POST: サインイン、サインアウト等

// middleware.ts
export { auth as middleware } from '@/auth';
 
export const config = {
  // マッチするパスを指定
  // 静的ファイルと API ルートは除外
  matcher: [
    '/((?!api/auth|_next/static|_next/image|favicon.ico|public).*)',
  ],
};

// types/next-auth.d.ts
import { DefaultSession, DefaultUser } from 'next-auth';
import { DefaultJWT } from 'next-auth/jwt';
 
// User 型の拡張
declare module 'next-auth' {
  interface User extends DefaultUser {
    role: string;
    orgId?: string;
    blockedAt?: Date | null;
  }
 
  interface Session extends DefaultSession {
    user: {
      id: string;
      role: string;
      orgId?: string;
    } & DefaultSession['user'];
  }
}
 
// JWT 型の拡張
declare module 'next-auth/jwt' {
  interface JWT extends DefaultJWT {
    role?: string;
    orgId?: string;
    accessToken?: string;
    refreshToken?: string;
    accessTokenExpires?: number;
  }
}

// prisma/schema.prisma
 
// Auth.js が必要とするモデル
model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  password      String?   // Credentials 認証用
  role          String    @default("viewer")
  orgId         String?
  blockedAt     DateTime?
  lastLoginAt   DateTime?
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
 
  accounts      Account[]
  sessions      Session[]
 
  org           Organization? @relation(fields: [orgId], references: [id])
 
  @@index([email])
  @@index([orgId])
}
 
model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?
 
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 
  @@unique([provider, providerAccountId])
  @@index([userId])
}
 
model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
 
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 
  @@index([userId])
}
 
model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime
 
  @@unique([identifier, token])
}
 
model Organization {
  id        String   @id @default(cuid())
  name      String
  slug      String   @unique
  createdAt DateTime @default(now())
 
  users User[]
}

// Server Component でセッション取得
import { auth } from '@/auth';
import { redirect } from 'next/navigation';
 
async function DashboardPage() {
  const session = await auth();
 
  if (!session) {
    redirect('/login');
  }
 
  return (
    <div>
      <h1>Welcome, {session.user.name}</h1>
      <p>Role: {session.user.role}</p>
      <p>Organization: {session.user.orgId}</p>
    </div>
  );
}
 
export default DashboardPage;

// Client Component でセッション取得
'use client';
import { useSession } from 'next-auth/react';
import Link from 'next/link';
 
function UserMenu() {
  const { data: session, status, update } = useSession();
 
  if (status === 'loading') return <Skeleton />;
  if (!session) return <Link href="/login">Login</Link>;
 
  // セッション情報の更新
  const handleNameChange = async (newName: string) => {
    await update({ name: newName });
    // → jwt callback の trigger === 'update' が呼ばれる
  };
 
  return (
    <div className="flex items-center gap-3">
      <img
        src={session.user.image!}
        alt={session.user.name!}
        className="w-8 h-8 rounded-full"
      />
      <div>
        <span className="font-medium">{session.user.name}</span>
        <span className="text-xs text-gray-500 block">{session.user.role}</span>
      </div>
    </div>
  );
}
 
export default UserMenu;

// Server Action でのセッション
'use server';
import { auth } from '@/auth';
import { revalidatePath } from 'next/cache';
 
export async function createArticle(formData: FormData) {
  const session = await auth();
  if (!session) throw new Error('Unauthorized');
 
  // ロールチェック
  if (!['editor', 'admin'].includes(session.user.role)) {
    throw new Error('Forbidden: editors only');
  }
 
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
 
  // バリデーション
  if (!title || title.length < 1 || title.length > 200) {
    throw new Error('Invalid title');
  }
 
  await prisma.article.create({
    data: {
      title,
      content,
      authorId: session.user.id,
      orgId: session.user.orgId,
    },
  });
 
  revalidatePath('/articles');
}

// app/api/articles/route.ts
import { auth } from '@/auth';
import { NextResponse } from 'next/server';
 
export async function GET() {
  const session = await auth();
 
  if (!session) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
 
  const articles = await prisma.article.findMany({
    where: { orgId: session.user.orgId },
    orderBy: { createdAt: 'desc' },
  });
 
  return NextResponse.json(articles);
}
 
export async function POST(request: Request) {
  const session = await auth();
 
  if (!session) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
 
  if (!['editor', 'admin'].includes(session.user.role)) {
    return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
  }
 
  const body = await request.json();
 
  const article = await prisma.article.create({
    data: {
      ...body,
      authorId: session.user.id,
      orgId: session.user.orgId,
    },
  });
 
  return NextResponse.json(article, { status: 201 });
}

// app/login/page.tsx
'use client';
import { signIn } from 'next-auth/react';
import { useState, FormEvent } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
 
function LoginPage() {
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const searchParams = useSearchParams();
  const router = useRouter();
  const callbackUrl = searchParams.get('callbackUrl') || '/dashboard';
 
  // エラーメッセージのマッピング
  const errorMessages: Record<string, string> = {
    OAuthSignin: 'ソーシャルログインの開始に失敗しました',
    OAuthCallback: 'ソーシャルログインのコールバックでエラーが発生しました',
    OAuthAccountNotLinked: 'このメールアドレスは別のログイン方法で登録されています',
    CredentialsSignin: 'メールアドレスまたはパスワードが正しくありません',
    SessionRequired: 'ログインが必要です',
    Default: 'ログインに失敗しました。もう一度お試しください',
  };
 
  const urlError = searchParams.get('error');
  const displayError = error || (urlError ? errorMessages[urlError] || errorMessages.Default : '');
 
  // ソーシャルログイン
  const handleSocialLogin = async (provider: string) => {
    setLoading(true);
    try {
      await signIn(provider, { callbackUrl });
    } catch {
      setError('ログインに失敗しました');
      setLoading(false);
    }
  };
 
  // メール・パスワードログイン
  const handleCredentialsLogin = async (e: FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);
 
    const formData = new FormData(e.target as HTMLFormElement);
 
    try {
      const result = await signIn('credentials', {
        email: formData.get('email'),
        password: formData.get('password'),
        redirect: false,
      });
 
      if (result?.error) {
        setError(errorMessages.CredentialsSignin);
      } else {
        router.push(callbackUrl);
        router.refresh(); // セッション状態を更新
      }
    } catch {
      setError(errorMessages.Default);
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <div className="max-w-md mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">Login</h1>
 
      {displayError && (
        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded text-red-700 text-sm">
          {displayError}
        </div>
      )}
 
      {/* ソーシャルログイン */}
      <div className="space-y-2 mb-6">
        <button
          onClick={() => handleSocialLogin('google')}
          disabled={loading}
          className="w-full p-3 border rounded flex items-center justify-center gap-2
                     hover:bg-gray-50 disabled:opacity-50"
        >
          <GoogleIcon className="w-5 h-5" />
          Continue with Google
        </button>
        <button
          onClick={() => handleSocialLogin('github')}
          disabled={loading}
          className="w-full p-3 border rounded flex items-center justify-center gap-2
                     hover:bg-gray-50 disabled:opacity-50"
        >
          <GitHubIcon className="w-5 h-5" />
          Continue with GitHub
        </button>
      </div>
 
      {/* セパレーター */}
      <div className="relative my-6">
        <div className="absolute inset-0 flex items-center">
          <div className="w-full border-t" />
        </div>
        <div className="relative flex justify-center text-sm">
          <span className="bg-white px-2 text-gray-500">or</span>
        </div>
      </div>
 
      {/* メール・パスワード */}
      <form onSubmit={handleCredentialsLogin} className="space-y-4">
        <input
          name="email"
          type="email"
          placeholder="Email"
          className="w-full p-3 border rounded focus:ring-2 focus:ring-blue-500 outline-none"
          required
          disabled={loading}
        />
        <input
          name="password"
          type="password"
          placeholder="Password"
          minLength={8}
          className="w-full p-3 border rounded focus:ring-2 focus:ring-blue-500 outline-none"
          required
          disabled={loading}
        />
        <button
          type="submit"
          disabled={loading}
          className="w-full p-3 bg-blue-500 text-white rounded hover:bg-blue-600
                     disabled:opacity-50 transition-colors"
        >
          {loading ? 'Signing in...' : 'Sign In'}
        </button>
      </form>
 
      <p className="mt-4 text-center text-sm text-gray-500">
        Don&apos;t have an account?{' '}
        <a href="/register" className="text-blue-500 hover:underline">Sign up</a>
      </p>
    </div>
  );
}
 
export default LoginPage;

// Server Action でのサインアウト（推奨）
// components/SignOutButton.tsx
import { signOut } from '@/auth';
 
function SignOutButton() {
  return (
    <form
      action={async () => {
        'use server';
        await signOut({ redirectTo: '/' });
      }}
    >
      <button type="submit" className="text-gray-600 hover:text-gray-900">
        Logout
      </button>
    </form>
  );
}
 
// Client Component でのサインアウト
'use client';
import { signOut } from 'next-auth/react';
 
function LogoutButton() {
  return (
    <button onClick={() => signOut({ callbackUrl: '/' })}>
      Logout
    </button>
  );
}

// app/layout.tsx
import { SessionProvider } from 'next-auth/react';
import { auth } from '@/auth';
 
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await auth();
 
  return (
    <html lang="ja">
      <body>
        <SessionProvider
          session={session}
          // セッションの自動更新間隔（秒）
          refetchInterval={5 * 60}
          // ウィンドウフォーカス時に再取得
          refetchOnWindowFocus={true}
          // refetchWhenOffline={false}
        >
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

# .env.local
 
# NextAuth 必須
AUTH_SECRET=your-random-secret-at-least-32-characters
AUTH_URL=http://localhost:3000  # 本番では https://myapp.com
 
# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-google-client-secret
 
# GitHub OAuth
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret
 
# Database
DATABASE_URL=postgresql://user:pass@localhost:5432/mydb
 
# AUTH_SECRET の生成方法:
#   npx auth secret
#   または: openssl rand -base64 32
 
# AUTH_TRUST_HOST=true  # プロキシ背後の場合

// auth.ts のコールバックに追加
callbacks: {
  async jwt({ token, account }) {
    // 初回サインイン: トークン情報を保存
    if (account) {
      return {
        ...token,
        accessToken: account.access_token,
        refreshToken: account.refresh_token,
        accessTokenExpires: account.expires_at
          ? account.expires_at * 1000
          : Date.now() + 3600 * 1000,
      };
    }
 
    // アクセストークンが有効期限内
    if (token.accessTokenExpires && Date.now() < token.accessTokenExpires) {
      return token;
    }
 
    // アクセストークンの更新
    try {
      const response = await fetch('https://oauth2.googleapis.com/token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
          client_id: process.env.GOOGLE_CLIENT_ID!,
          client_secret: process.env.GOOGLE_CLIENT_SECRET!,
          grant_type: 'refresh_token',
          refresh_token: token.refreshToken as string,
        }),
      });
 
      const tokens = await response.json();
 
      if (!response.ok) throw tokens;
 
      return {
        ...token,
        accessToken: tokens.access_token,
        accessTokenExpires: Date.now() + tokens.expires_in * 1000,
        // refresh_token が返された場合は更新（Rotation）
        refreshToken: tokens.refresh_token ?? token.refreshToken,
      };
    } catch (error) {
      console.error('Error refreshing access token:', error);
      return {
        ...token,
        error: 'RefreshTokenError',
      };
    }
  },
}

// Server Action ベースのサインイン（推奨パターン）
// app/login/actions.ts
'use server';
import { signIn } from '@/auth';
import { AuthError } from 'next-auth';
 
export async function authenticate(
  prevState: { error: string } | undefined,
  formData: FormData
) {
  try {
    await signIn('credentials', {
      email: formData.get('email'),
      password: formData.get('password'),
      redirectTo: '/dashboard',
    });
  } catch (error) {
    if (error instanceof AuthError) {
      switch (error.type) {
        case 'CredentialsSignin':
          return { error: 'Invalid credentials' };
        case 'AccessDenied':
          return { error: 'Account is blocked' };
        default:
          return { error: 'Something went wrong' };
      }
    }
    throw error; // 予期しないエラーは再スロー
  }
}
 
// app/login/page.tsx
'use client';
import { useActionState } from 'react';
import { authenticate } from './actions';
 
export default function LoginPage() {
  const [state, action, isPending] = useActionState(authenticate, undefined);
 
  return (
    <form action={action}>
      {state?.error && <p className="text-red-500">{state.error}</p>}
 
      <input name="email" type="email" placeholder="Email" required />
      <input name="password" type="password" placeholder="Password" required />
 
      <button type="submit" disabled={isPending}>
        {isPending ? 'Signing in...' : 'Sign In'}
      </button>
    </form>
  );
}

// app/dashboard/layout.tsx
import { auth } from '@/auth';
import { redirect } from 'next/navigation';
 
export default async function DashboardLayout({
  children,
  admin,
  viewer,
}: {
  children: React.ReactNode;
  admin: React.ReactNode;
  viewer: React.ReactNode;
}) {
  const session = await auth();
  if (!session) redirect('/login');
 
  return (
    <div className="flex">
      <aside className="w-64 bg-gray-100 min-h-screen p-4">
        <nav>
          <NavLink href="/dashboard">Dashboard</NavLink>
          {session.user.role === 'admin' && (
            <>
              <NavLink href="/dashboard/users">Users</NavLink>
              <NavLink href="/dashboard/settings">Settings</NavLink>
            </>
          )}
        </nav>
      </aside>
      <main className="flex-1 p-6">
        {children}
      </main>
    </div>
  );
}