📈

Nextauth Google Login client_fetch_error解決

2024/02/24に公開

Next.js

NextAuth

router

tech

Nextがpages routerからapp routerになってから少し書き方が変わりました！

ディレクトリ構成

pagesの時は[...nextauth].tsでコードを書けばできたが、、
appでは[...nextauth].tsでコードを書くとclient_fetch_errorが発生しました。

app-index.js:33 [next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON

サーバー側のRoutingの問題か、間違えったendpointを読んだとき出るエラーだって...

修正前

app/api/auth/[...nextauth].ts

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_OAUTH_ID || '',
      clientSecret: process.env.GOOGLE_OAUTH_SECRET || '',
    }),
    // ...add more providers here
  ],
};
export default NextAuth(authOptions);


export { handler as GET, handler as POST };

修正後

app/api/auth/[...nextauth]/route.ts

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

export const options: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_OAUTH_ID || "",
      clientSecret: process.env.GOOGLE_OAUTH_SECRET || "",
    }),
  ],
};

[...nextauth]フォルダーに route.tsファイルを作ってコードを作成したらできた！！！

BUT 今回はwarn発生..

コレはdeployときのURLとSECRET関連情報がないからだと
まだdeploy前なんでstrongpasswordgeneratorを使ってsecretコードを作るか openssl rand -base64 32でsecretコードを作ります。
opensslをつか場合はroute.tsに session: { strategy: "jwt" },を追加します。

openssl rand -base64 32

.env

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=

ディレクトリ構成

修正前

修正後

Discussion