はじめに
Webアプリの作成をするときにコピペで何回も使いまわしている
Next.js × NextAuth.jsでOAuth認証を簡単に実装するコードの共有＋勉強会資料の目的で作成した記事になります。
改善点などあればご指摘いただけると幸いです。
目次
前提条件
- 各OAuth認証サービスのクライアントIDとクライアントシークレットを保持していること
(それぞれのID、シークレットの取得方法は別記事からお願いします...) - .envにGOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRETを設定していること
GOOGLE_CLIENT_ID=XXXXXXXXXX
GOOGLE_CLIENT_SECRET=XXXXXXXXXX
- Node.js, yarnをインストールしていること
Node.jsのダウンロードとインストール
npm install -g yarn
Next.jsプロジェクトの作成
プロジェクトを作成します。(next-projectの部分はお好きなアプリ名で)
yarn create next-app --typescript next-project
以下が問われるので自由にNo / Yesを選択。
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
以下が表示されると完了。
success Saved lockfile.
Done in 39.80s.
Initialized a git repository.
Success! Created next-project at {プロジェクトのパス}
Done in 69.93s.
NextAuthの設定
NextAuthのインストール
NextAuthを依存関係に入れます。
#プロジェクト名によって「next-project」の部分を変更してください
cd next-project
yarn add next-auth@^5.0.0-beta.25
以下が表示されると完了。
success Saved lockfile.
success Saved 15 new dependencies.
#追加ファイル情報...
環境変数の設定
NextAuth用の環境変数を設定します。
NEXTAUTH_URLとNEXTAUTH_SECRETの2つを.envに追加します。
NEXTAUTH_URL=http://localhost:{任意のポート番号}
NEXTAUTH_SECRET=XXXXXXXXXX
NEXTAUTH_URLはOAuthコールバックURLのベースになるURLです。
本番ではドメイン名をいれてください。
NEXTAUTH_SECRETはランダムに生成したキーをいれてください。
ターミナルにて以下のコードで生成できます。
node -e "console.log(require('crypto').randomBytes(256).toString('base64'));"
認証の実装
※バックエンドは実装しないため、セッションのみでの認証となります。
Google認証を例に実装していきます。
まず、使用するプロバイダを定数のファイルで持つことをおすすめします。
以下のように定数を設定(使用するプロバイダによって変更が必要になります)
export const OAUTH_PROVIDER = {
GOOGLE: "google",
};
各プロバイダの詳細な設定方法や必要な権限については、NextAuth.js公式ドキュメントを参照してください。
srcディレクトリの配下にauth.tsファイルを作成します。
src/auth.tsに以下をコピー
import NextAuth from "next-auth";
import Google from "next-auth/providers/google";
import type { Session } from "next-auth";
import { OAUTH_PROVIDER } from "@/constants/auth";
export const { auth, handlers, signIn, signOut } = NextAuth({
providers: [
Google({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
}),
],
session: {
strategy: "jwt",
maxAge: 14 * 24 * 60 * 60, // 14 days
},
events: {
async signIn({ user, account }) {
if (account?.provider === OAUTH_PROVIDER.GOOGLE) {
try {
console.log("Google認証開始:", { email: user.email, name: user.name });
// ここでバックエンドの処理が必要な場合は追加
} catch (error) {
console.error("OAuth認証に失敗:", error);
if (error instanceof Error) {
console.error("エラー詳細:", error.message);
}
}
}
},
async signOut() {
if (typeof window !== "undefined") {
window.sessionStorage.clear();
window.localStorage.clear();
}
},
},
callbacks: {
async jwt({ token, user, account }) {
if (account && user) {
return {
...token,
...user,
provider: account.provider,
};
}
return token;
},
async session({ session, token }): Promise<Session> {
return {
...session,
user: {
...session.user,
},
};
},
},
});
srcディレクトリの配下にlib/actions/のディレクトリを用意しauth.tsファイルを作成します。
src/lib/actions/auth.tsに以下をコピー
"use server";
import { OAUTH_PROVIDER } from "@/constants";
import { signIn } from "@/auth";
export const signInWithGoogle = async () => {
await signIn(OAUTH_PROVIDER.GOOGLE, {
redirectTo: "/profile", // 任意
});
};
src/appディレクトリの配下にapi/auth/[...nextauth]のディレクトリを用意しroute.tsファイルを作成します。
src/app/api/auth/[...nextauth]に以下をコピー
import { handlers } from "@/auth";
export const { GET, POST } = handlers;
プロジェクトルートのnext.config.tsでGoogleの画像読み込みを許可します。
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
images: {
domains: ['lh3.googleusercontent.com'],
},
};
export default nextConfig;
以上でNextAuthの認証は実装完了です。
src/lib/actions/auth.tsのsignInWithGoogle関数を認証ボタンで呼び出せばOkです。
ボタンや遷移後の画面についてはお任せします。
例としてボタン押下後の画面キャプチャを挙げておきます。
まとめ
この記事では、Next.js 15とNextAuth v5を使用してGoogle認証を実装する方法を解説しました。
バックエンドなしの簡単なコードではありますが、このコードをベースに必要に応じてカスタマイズすることで、さまざまなWebアプリケーションの認証機能を実装できます。