このチュートリアルで学ぶこと
✓ OAuthの仕組み
✓ NextAuth.jsのセットアップ
✓ Googleプロバイダー設定
✓ セッション管理
✓ 保護されたルート
Step 1: セットアップ
npx create-next-app@latest oauth-demo --typescript
cd oauth-demo
npm install next-auth
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 };
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>;
}
まとめ
NextAuth.jsでOAuth認証を簡単に実装できます。Google以外にもGitHub、Twitterなど多くのプロバイダーに対応しています。
← 一覧に戻る