OAuth認証入門 - GoogleログインをNext.jsで実装

intermediate | 45分 で読める | 2025.12.01

公式ドキュメント
AuthOAuthNext.js

このチュートリアルで学ぶこと

  • OAuthの仕組み
  • NextAuth.jsのセットアップ
  • Googleプロバイダー設定
  • セッション管理
  • 保護されたルート

Step 1: セットアップ

npx create-next-app@latest oauth-demo --typescript
cd oauth-demo
npm install next-auth

実践メモ: next-authはGoogle以外にもGitHub、Discord、Twitterなど多数のOAuthプロバイダーに対応しています。

Step 2: Google認証情報の取得

  1. Google Cloud Console (console.cloud.google.com)
  2. 新しいプロジェクト作成
  3. APIとサービス → 認証情報
  4. OAuth 2.0 クライアントID作成
  5. 承認済みリダイレクトURI: http://localhost:3000/api/auth/callback/google

Step 3: NextAuth設定

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

const handler = NextAuth({
 providers: [
 GoogleProvider({
 clientId: process.env.GOOGLE_CLIENT_ID!,
 clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
 }),
 ],
 callbacks: {
 async session({ session, token }) {
 session.user.id = token.sub;
 return session;
 },
 },
});

export { handler as GET, handler as POST };

注意: NEXTAUTH_SECRETは必ずランダムな文字列を設定してください。openssl rand -base64 32で安全な値を生成できます。

Step 4: 環境変数

# .env.local
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key

Step 5: SessionProvider

// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';

export function Providers({ children }: { children: React.ReactNode }) {
 return <SessionProvider>{children}</SessionProvider>;
}

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }) {
 return (
 <html>
 <body>
 <Providers>{children}</Providers>
 </body>
 </html>
 );
}

Step 6: ログインボタン

// components/AuthButton.tsx
'use client';
import { signIn, signOut, useSession } from 'next-auth/react';

export function AuthButton() {
 const { data: session } = useSession();

 if (session) {
 return (
 <div>
 <p>Welcome, {session.user?.name}</p>
 <button onClick={() => signOut()}>Sign out</button>
 </div>
 );
 }

 return <button onClick={() => signIn('google')}>Sign in with Google</button>;
}

Step 7: 保護されたページ

// app/dashboard/page.tsx
import { getServerSession } from 'next-auth';
import { redirect } from 'next/navigation';

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

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

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

実装前に理解したい流れ

OAuth認証では、アプリが直接Googleのパスワードを受け取るわけではありません。ユーザーはGoogle側でログインし、アプリは認可コードを受け取り、サーバー側でトークンと交換します。この境界を理解しておくと、どこに秘密情報を置くべきか判断しやすくなります。

認証で重要なのは「ログインできること」だけではありません。コールバックURL、セッションの保存先、CSRF対策、リダイレクト先の制御まで含めて初めて安全な実装になります。特にクライアントIDとクライアントシークレットの扱いを混同しないことが大切です。

確認したいセキュリティ観点

  • シークレットをブラウザ側のコードに含めていないか
  • 本番URLと開発URLのリダイレクトURIを分けて登録しているか
  • ログアウト後に保護ページへ戻れないか
  • セッションに保存するユーザー情報を最小限にしているか

まとめ

NextAuth.jsでOAuth認証を簡単に実装できます。Google以外にもGitHub、Twitterなど多くのプロバイダーに対応しています。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR