📃

バカでもできる NextAuth.js × Next.js 14 App Router での Google ログイン 実装ガイド

に公開

今回は誰でも簡単にできるNextAuth.js × Next.js 14 App Router を使用した Google ログインの実装方法をまとめました。

✅ この記事でできること

  • Google アカウントでログインできる
  • 認証状態を簡単に判定できる
  • Next.js 14(App Router)に完全対応

✅ 対象

  • Next.js 14(App Router構成)
  • TypeScript使ってる人でもOK
  • とにかくシンプルに「Googleログインだけ」やりたい人

ざっくり全体像

1️⃣ GoogleのOAuthクライアントを取得
2️⃣ NextAuth.jsをインストール
3️⃣ NextAuthのAPIルートを作る
4️⃣ SessionProviderの置き場所(これが最大の落とし穴)
5️⃣ ログインページでボタンを置く

1️⃣ GoogleのOAuthクライアントを取得

1.Google Cloud Console へアクセス
2.プロジェクトを新規作成(例: project)
3.「APIとサービス」→「認証情報」
4.「認証情報を作成」 → OAuthクライアントID
 ・アプリケーションの種類: ウェブアプリケーション
 ・承認済みのリダイレクトURI:

http://localhost:3000/api/auth/callback/google

5.作成したら
 ・クライアントID
 ・クライアントシークレット
 をメモ

2️⃣ 環境変数を設定

プロジェクトのルートに .env.local を作成

GOOGLE_CLIENT_ID=メモしたやつ
GOOGLE_CLIENT_SECRET=メモしたやつ
NEXTAUTH_URL=http://localhost:3000

3️⃣ NextAuth.js をインストール

npm install next-auth

4️⃣ NextAuthのAPIルートを作成

src/app/api/auth/[...nextauth]/route.ts を作ります。

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  session: {
    strategy: "jwt",
  },
  pages: {
    signIn: "/login", // ログインページ
  },
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

5️⃣ SessionProvider の配置(Next.js 14の最大の罠)
Next.js 14(App Router)では
layout.tsx はサーバーコンポーネントなので
SessionProvider を直接書くとエラーになります。

なので

src/app/providers.tsx を作って

"use client";
import { SessionProvider } from "next-auth/react";

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

✅ その上でlayout.tsx

import { Providers } from "./providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

と書けばOK。

これで
「React Context is unavailable in Server Components」 エラーを回避できます。

6️⃣ ログインページを作る

src/app/login/page.tsx

"use client";
import { signIn, useSession } from "next-auth/react";

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

  if (session) {
    return (
      <main>
        <h1>ようこそ {session.user?.name} さん</h1>
      </main>
    );
  }

  return (
    <main>
      <h1>CalPlog ログイン</h1>
      <button
        onClick={() => signIn("google")}
        className="bg-blue-500 text-white rounded p-2"
      >
        Googleでログイン
      </button>
    </main>
  );
}

7️⃣ 動作確認

npm run dev

http://localhost:3000/login にアクセス
→ これでログインできるようになるはず!
(できなかったらほんとすんません)

🟦 まとめ

  • Google Cloud で OAuth クライアントを取る
  • NextAuth.js の route.ts でプロバイダ設定
  • SessionProvider はクライアントに分離
  • あとは signIn("google") で呼ぶだけ

以上です!

Discussion