NextAuthでGoogleログイン実装Zennみぃ💐NextAuthでGoogleログイン実装2024/10/09に公開2024/10/10Next.jsNextAuthtechはじめにNextAuthでGoogleログインを実装しましたので、その方法を記載していきます。実装こちらで作成したNext.jsのリポジトリに追加する形になります。https://zenn.dev/yumemi9808/articles/94b7e2162e1c17主に作成するのは3つです。devを行っていきます。詳しく説明していきます。GOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETを作成するこの記事を見て作るのが一番わかりやすいので、こちらをご覧ください。https://zenn.dev/aya1357/articles/bb291f8b4a31cb作成したGOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETをルートディレクトリに作った.envに書きます。Nextの設定ファイルを作成src/server/auth.tsというファイルを作り、こちらを貼り付けます。Handlersとは、ウェブアプリケーションで特定のURLパス(ルート)に対するHTTPリクエスト(例:GET、POSTなど)を処理するための関数やロジックのことです。リクエストを受け取った際にどのような処理を行うか、どんなレスポンスを返すかを定義します。src/app/api/auth/[...nextauth]/route.tsというファイルを作り、こちらを貼り付けます。Handlersを動かすファイルです。/api/auth/signinのGET来たらhandlerが動きます。!apiの配下がapiのエンドポイントになるというルールがあります。Handlersがやる![]はキャッチオールセグメンツといいます。これは、[]の中に何の値が来ても拾います。devして、ブラウザを立ち上げます。devブラウザのhttp://localhost:3000の後に/api/auth/signinを入力するとGoogleログインが出てきます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。