💐

NextAuthでGoogleログイン実装

2024/10/09に公開

Next.js

NextAuth

tech

はじめに

NextAuthでGoogleログインを実装しましたので、その方法を記載していきます。

実装

こちらで作成したNext.jsのリポジトリに追加する形になります。

主に作成するのは3つです。

GoogleのGOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETを作成する
Nextの設定ファイルを作成
Route Handlersを動かすファイルを作成

この後にnpm run devを行っていきます。
詳しく説明していきます。

1. GOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETを作成する

この記事を見て作るのが一番わかりやすいので、こちらをご覧ください。

作成したGOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETをルートディレクトリに作った.envに書きます。

GOOGLE_CLIENT_ID=XXX-XXX
GOOGLE_CLIENT_SECRET=XXX-XXX

2. Nextの設定ファイルを作成

src/server/auth.tsというファイルを作り、こちらを貼り付けます。

import { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID || "",
      clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
    }),
  ],
};

3. Route Handlersを動かすファイルを作成

Route Handlersとは、ウェブアプリケーションで特定のURLパス（ルート）に対するHTTPリクエスト（例：GET、POSTなど）を処理するための関数やロジックのことです。リクエストを受け取った際にどのような処理を行うか、どんなレスポンスを返すかを定義します。

src/app/api/auth/[...nextauth]/route.tsというファイルを作り、こちらを貼り付けます。

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

src/app/api/auth/[...nextauth]/route.tsは、Route Handlersを動かすファイルです。
例えば、/api/auth/signinのGET来たらhandlerが動きます。

GET /api/authやPOST /api/authを叩いたら、api/auth/route.tsが動くのをRoute Handlersがやる

これでnpm run devして、ブラウザを立ち上げます。

npm run dev

ブラウザのhttp://localhost:3000の後に/api/auth/signinを入力するとGoogleログインが出てきます。

http://localhost:3000/api/auth/signin

これでログインできたら完了です🎉