adding-auth

認証を追加する（Auth.js）

ユーザーから認証、ログイン、サインアップ、OAuth、またはセッション管理の追加を依頼された場合に、このスキルを使用します。

手順

1. 依存関係をインストールします

   npm install next-auth@beta
   

2. 認証シークレットを生成します

   npx auth secret
   

   これにより、.env.local に AUTH_SECRET が追加されます。

3. 認証設定を作成します — プロジェクトのルートに auth.ts を作成します。

   import NextAuth from "next-auth";
   import GitHub from "next-auth/providers/github";
   import Google from "next-auth/providers/google";
   
   export const { handlers, signIn, signOut, auth } = NextAuth({
     providers: [GitHub, Google],
   });
   

4. ルートハンドラーを追加します — app/api/auth/[...nextauth]/route.ts を作成します。

   import { handlers } from "@/auth";
   export const { GET, POST } = handlers;
   

5. 各プロバイダーの環境変数を追加します

   AUTH_SECRET=...
   AUTH_GITHUB_ID=...
   AUTH_GITHUB_SECRET=...
   AUTH_GOOGLE_ID=...
   AUTH_GOOGLE_SECRET=...
   

6. サインイン／サインアウトの UI を追加します — signIn と signOut のサーバーアクションを呼び出すコンポーネントを作成するか、<Link href="/api/auth/signin"> を使用します。

7. ルートを保護します — サーバーコンポーネントまたはミドルウェアで auth() 関数を使用します。

   import { auth } from "@/auth";
   
   export default async function ProtectedPage() {
     const session = await auth();
     if (!session) redirect("/api/auth/signin");
     return <div>Welcome {session.user?.name}</div>;
   }
   

8. データベースアダプターを追加します（任意） — 永続的なセッションまたはユーザーレコードが必要な場合は、データベースアダプター（例：@auth/drizzle-adapter、@auth/prisma-adapter）をインストールし、認証設定で構成します。

補足

• Auth.js v5 は、Next.js App Router と Server Actions にネイティブ対応しています。
• Pages Router では、getServerSideProps で getServerSession を使用し、クライアント側で useSession を使用します。
• 本番環境へのデプロイでは NEXTAUTH_URL を追加します。
• セッションには最小限のユーザーデータを保存し、必要に応じてデータベースから完全なプロフィールを取得します。