Next.jsのauthOptionsでaccessTokenを取得するときに気をつけること

作業する前に公式ドキュメントをちゃんと読めというのはまさしく格言であります。

今回、「Next.js + NextAuth.js + Prisma」の組み合わせで認証付きのwebアプリケーション作成の練習をしていて、ミドルウェアの認証を実装するときにエラーが出たのでその対処法を書いていきます。

まずは上手く行った記述を以下に…

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

.
.
.

export const authOptions: NextAuthOptions = {
  providers: [
    // 各プロバイダ設定
  ],
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token
      }
      return token
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken
      return session
    }
  },
  secret: process.env.NEXTAUTH_SECRET ?? '',
  session: {
    strategy: "jwt",
    maxAge: 60 * 60 * 24 * 30,
  },
  adapter: PrismaAdapter(prisma),
}

export default NextAuth (authOptions);

エラーその1：accessTokenの型エラー

当方Typescriptで書いているので型に気をつけてプログラムしていく必要があるのですが、authOptionのcallbackで設定しているsessionのaccessTokenにはデフォルトで型が定義されておらず、自前で設定する必要がありました。

このエラーはドキュメントにも対処法が書かれており、types/next-auth.d.tsで型定義をします。
参考URL：https://next-auth.js.org/getting-started/typescript#submodules

// types/next-auth.d.ts

import { JWT } from "next-auth/jwt";

declare module "next-auth/jwt" {
  interface JWT {
    accessToken?: string,
  }
}

場合によってはsessionのaccessTokenも上記内で型定義する必要があるかもしれません。

エラーその2：JWTが使えなかった

そもそもエラーでもないのですが、JWTをプロバイダのコールバックで使用するためにはsessionのstrategyで”jwt”を指定してあげないといけません。
参考URL：https://next-auth.js.org/configuration/options#jwt

使用できない状態でずっとJWTの型設定がおかしいのかと思って記事をグルグルしていたのでかなり無駄な時間を使ってしまいました…

何をするにもまずは公式ドキュメントですね。載ってないことは自分の実装方法が間違ってると肝に命じていきたいです。

Recent Posts

Recent Column